Android聊天面板和横向观众列表透明度渐变的实现

问题重述

这次的题目有点长，特意的将两个类似的东西进行了划分。也是为了完全重现我在遇到和解决这两个问题时候的过程。在一开始，是需求那边要我做一个我们聊天面板的渐变效果。经过多方查证，终于实现了这个功能。后来在迭代版本的时候又要加一个观众列表的右侧透明渐变效果，就想到了还用公屏同样的代码，然而中间竟然遇到了坑，还找不到攻略（好慌-。-），所以记录一下，防止后面遇到相同的问题没有资源参考。
先上个效果图，静态滴

两种效果显示
你们要的 Git地址，拿去不谢！(●´∀｀●)

聊天面板的实现

在开始我就是要实现一个聊天面板的消息渐变消失效果(如上图)，经过查找资料，最后使用了下面的代码实现：

// 实现渐变效果
    Paint mPaint;
    private int layerId;
    private LinearGradient linearGradient;
    public void doTopGradualEffect(){
        mPaint = new Paint();
        // dst_in 模式，实现底层透明度随上层透明度进行同步显示
        //（即上层为透明时，下层就透明，并不是上层覆盖下层)
        // 具体关于PorterDuff.Mode的东西大家可以自行查阅了解
        final Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        mPaint.setXfermode(xfermode);
        // 透明位置不变，位于Recyclerview偏上位置
        // 使用 CLAMP 模式边缘拉伸，完美契合背景颜色
        linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP);

        addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
                super.onDrawOver(canvas, parent, state);

                mPaint.setXfermode(xfermode);
                mPaint.setShader(linearGradient);
                canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint);
                mPaint.setXfermode(null);
                canvas.restoreToCount(layerId);
            }

            @Override
            public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
                super.onDraw(c, parent, state);
                // 此处 Paint的参数这里传的null， 在传入 mPaint 时会出现
                // 第一次打开黑屏闪现的问题
                // 注意 saveLayer 不能省也不能移动到onDrawOver方法里
                layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), null, Canvas.ALL_SAVE_FLAG);
            }

            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                // 该方法作用自行百度
                super.getItemOffsets(outRect, view, parent, state);
            }
        });
    }

注释还是比较清楚的。主要使用了 Recyclerview 的 addItemDecoration 和 PorterDuff.Mode 的 DST_IN 模式，这个模式下绘制的效果会受到源图像（即代码中的 drawRect）透明度的影响，因为我们使用了渐变的 Shader--LinearGradient，所以画出来的矩形透明度是渐变的，当我们 restore 的时候就会影响到底层的透明度(即公屏消息的透明度)。

Lucky

观众列表右侧透明渐变

这里我要强调右侧，因为我在考虑这个功能时马上想到了使用上面类似的代码，然而在左侧是OK的，可怎么也移动不到右侧。开始走了一条不归路。因为左侧是OK的，所以我想只需要把透明位置移动到右侧就可以了，就想修改 drawRect 的左右边界线来实现移动，但是都说了是不归路(╥╯^╰╥)，期间进行了各种修改调试，最后甚至尝试了盖一张图片，添加一个毛玻璃蒙层，但效果都不好。在休息了一晚后，我又回到上次的记录点(左侧OK)，终于让我发现了问题所在，原来控制透明度的位置不是通过控制矩形的位置，而是通过 linearGradient 的位置来实现的。后面又出现一些小问题，最终出世了以下代码：

// 实现渐变效果
    Paint mPaint;
    private int layerId;
    private LinearGradient linearGradient;
    private int preWidth = 0;// Recyclerview宽度动态变化时，监听每一次的宽度
    public void doTopGradualEffect(){
        mPaint = new Paint();
        // dst_in 模式，实现底层透明度随上层透明度进行同步显示（即上层为透明时，下层就透明，并不是上层覆盖下层)
        final Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        mPaint.setXfermode(xfermode);

        addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
                super.onDrawOver(canvas, parent, state);
                // 当linearGradient为空即第一次绘制 或 Recyclerview宽度发生改变时，
                // 重新计算透明位置
                if (linearGradient == null || preWidth!=parent.getWidth()){
                    // 透明位置从最后一个 itemView 的一半处到 Recyclerview 的最右边
                    linearGradient = new LinearGradient(parent.getWidth()-(itemViewWidth/2), 
                              0.0f, parent.getWidth(), 0.0f, new int[]{Color.BLACK, 0}, null, Shader.TileMode.CLAMP);
                    preWidth = parent.getWidth();
                }

                mPaint.setXfermode(xfermode);
                mPaint.setShader(linearGradient);
                canvas.drawRect(0.0f, 0.0f, parent.getRight(), parent.getBottom(), mPaint);
                mPaint.setXfermode(null);
                canvas.restoreToCount(layerId);
            }

            @Override
            public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
                super.onDraw(c, parent, state);
                // 此处 Paint的参数这里传的null， 在传入 mPaint 时会出现第一次打开黑屏闪现的问题
                // 注意 saveLayer 不能省也不能移动到onDrawOver方法里
                layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), null, Canvas.ALL_SAVE_FLAG);
            }

            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                // 该方法作用自行百度
                super.getItemOffsets(outRect, view, parent, state);
            }
        });
    }

苦恼了一天的问题原来就在于一个参数的修改（〜^㉨^)〜，终于顺利完成了这个功能，后来由于我们的需求是少于3个人右对齐，3个人以上左对齐，所以添加了动态计算的代码。

Tip:我示例的代码都是在我自定义的Recyclerview中，所以是直接调用的addItemDecoration，还有记得 saveLayer 时如果传了 Paint 的话可能出现界面打开的时候闪一个黑屏。

转载请联系作者--维权骑士，盗版必究