自定义View-是时候弄个与众不同的Loading了。

男人就是个视觉动物,无图无真相,咱们先上张图看看效果。

GIF.gif

恩,没错啦,就是流水线瓶装汽水装盖的效果,个人感觉还是蛮COOL的。
就是无聊,就是爱倒腾加载效果。这个☞小白上手-自定义风扇型Loading控件是我上一篇弄得风扇加载的效果,感兴趣的可以去看一看哦。
好,接下来讲讲我是如何实现的吧,也抛砖引玉,希望大家做出更强大,更炫酷的效果。

如何实现?

由效果图,可以将实现拆分为三部分:
1.上面的瓶盖
2.中间的瓶子
3.下面显示的文字
至于如何让这整个view动起来,这里就不讲啦。

实现上面的瓶盖

咱们先看代码:

      private void drawLine(Canvas canvas, int offset) {
            bottlePaint.setStrokeWidth(5);
            for (int i = 0; i < mWidth / perItemWidth * 2; i++) {
                int start = (i * perItemWidth) + -mWidth + bottlePadding + offset;
                int end = start + bottleWidth;
                if (start > mWidth / 2 - bottleWidth / 2 && start <= mWidth / 2 + bottleWidth) {
                    canvas.drawLine(start + bottleWidth / 2, 5, start + bottleWidth / 2, 30, bottlePaint);
                    canvas.drawLine(start + 15, 30, end - 15, 30, bottlePaint);
                } else if (start > mWidth / 2 + bottleWidth) {
                    canvas.drawLine(start + 15 - 2, bottleMarginTop, end - 15 + 2, bottleMarginTop, bottlePaint);
                } else {
                    canvas.drawLine(start + 15, 5, end - 15, 5, bottlePaint);
                }
            }
            bottlePaint.setStrokeWidth(1);
        }

划线嘛,需要知道线段的起点和终点,代码中的start以及end就是线段的起点和终点,然后用循环,将所有的线画出。从效果图中我们可以看到,这个线不是保持原样的,而是会根据位置做一些变化,中间是那个压盖的状态,而view中间之后的部分,瓶盖已经是压盖完成的。所以这里我们还需要做一下判断。代码写的应该比较清楚,应该容易理解,不理解的可以留言讨论一下。

实现中间的瓶子

港真,这个view弄了我一天多的时间,而中间瓶子这部分花了我超多的时间!!!中间有很多的坑!!!比如那个【PorterDuff.Mode.SRC_IN】效果,有木有,有木有?有木有朋友照着网上一搜就能找到的那张图,想实现那16种效果,然而。。。你会遇到各种奇葩的问题。这里我就不说这个了。如果可能,我会将我遇到的坑给大家总结一下,蓝瘦、香菇。
OK,fine,我们看代码:


        private void drawBottle(Canvas canvas, int offset) {
            for (int i = 0; i < mWidth / perItemWidth * 2; i++) {

                int start = i * perItemWidth - mWidth + bottlePadding + offset;

                path.reset();
                path.moveTo(start + 15, bottleMarginTop);
                path.lineTo(start + 15, bottleMarginTop + 5);
                path.lineTo(start + 5, bottleMarginTop + 50);
                path.lineTo(start, bottleMarginTop + 55);
                path.lineTo(start, bottleMarginTop + bottleHeight - 5);
                path.lineTo(start + 5, bottleMarginTop + bottleHeight);
                path.lineTo(start + 35, bottleMarginTop + bottleHeight);
                path.lineTo(start + 40, bottleMarginTop + bottleHeight - 5);
                path.lineTo(start + 40, bottleMarginTop + 55);
                path.lineTo(start + 35, bottleMarginTop + 50);
                path.lineTo(start + 25, bottleMarginTop + 5);
                path.lineTo(start + 25, bottleMarginTop);
                path.close();
                canvas.drawPath(path, bottlePaint);
            }

            int sc = canvas.saveLayer(0, 0, mWidth, mHeight, null);

            Paint paint = new Paint();
            canvas.drawBitmap(makeBottle(offset), 0, 0, paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            canvas.drawBitmap(makeWater(offset), 0, 0, paint);
            paint.setXfermode(null);
            canvas.restoreToCount(sc);
        }

        Bitmap makeBottle(int offset) {
            Bitmap bitmap = Bitmap.createBitmap(mWidth * 2, mHeight, Bitmap.Config.ARGB_8888);

            Canvas canvas = new Canvas(bitmap);

            for (int i = 0; i < mWidth / perItemWidth * 2; i++) {
                int start = i * perItemWidth - mWidth + bottlePadding + offset;
                path.reset();
                path.moveTo(start + 15, bottleMarginTop);
                path.lineTo(start + 15, bottleMarginTop + 5);
                path.lineTo(start + 5, bottleMarginTop + 50);
                path.lineTo(start, bottleMarginTop + 55);
                path.lineTo(start, bottleMarginTop + bottleHeight - 5);
                path.lineTo(start + 5, bottleMarginTop + bottleHeight);
                path.lineTo(start + 35, bottleMarginTop + bottleHeight);
                path.lineTo(start + 40, bottleMarginTop + bottleHeight - 5);
                path.lineTo(start + 40, bottleMarginTop + 55);
                path.lineTo(start + 35, bottleMarginTop + 50);
                path.lineTo(start + 25, bottleMarginTop + 5);
                path.lineTo(start + 25, bottleMarginTop);
                path.close();
                canvas.drawPath(path, waterPaint);
            }
            return bitmap;
        }
        
        Bitmap makeWater(int offset) {
            Bitmap bitmap = Bitmap.createBitmap(mWidth * 2, mHeight, Bitmap.Config.ARGB_8888);

            Canvas canvas = new Canvas(bitmap);

            for (int i = 0; i < mWidth / perItemWidth * 2; i++) {
                int start = i * perItemWidth - mWidth + bottlePadding + offset;
                canvas.drawRect(start, perItemWidth, start + bottleWidth, bottleMarginTop + bottleHeight, waterPaint);
            }

            return bitmap;
        }

接着还有一个重要的图,配合着看会更好理解一点。_

瓶子坐标图

哈哈,忽略我的思路草稿(。・_・。)ノ


?_?思路草稿

恩,一开始,我在纠结到底要怎样画圆角?要怎么组合?等等等问题。后来我就想,为啥要画圆角?于是乎,就有了上面那个瓶子的图。当然,如果有朋友画出好看的瓶子,希望能@我一下啊/(ㄒoㄒ)/~~
你们应该有发现我弄了两个bitmap,makeBottle(),makeWater()。是的,我试了很多种方法,Google,Baidu,只有这种可以实现两张图交集那种效果(瓶子中水),就是【PorterDuff.Mode.SRC_IN】,然后再在外面,描一个空心的瓶子就好了。OK,瓶子这部分也搞定了。

实现下面显示的文字

这部分应该是最简单的,pain.drawText()就可以了。看下代码:

     private void drawText(Canvas canvas) {   
            if (textContent == null || textContent.isEmpty())
                return;
            //测量字体长度
            float textWidth = textPaint.measureText(textContent);
            canvas.drawText(textContent
            , (mWidth - textWidth) / 2
            , mHeight - ((mHeight - bottleMarginTop - bottleHeight) / 2)
            , textPaint);
        }

OK,为了让文字居中,计算一下字体的长度,然后取中就好啦。

写在后面

  • 一直都没有记录部落格的习惯,现在写了几篇,感觉自己的坚持是有意义的,回头看看,还能捡起一些东西,不至于全部遗忘,而且,通过写部落格,又再一次缕了一下思路,印象也加深了。挺好。
  • 代码中有很多不完善的地方,希望大家可以多多指教,共同进步。
  • 这个实现,算是一种粗略的实现,如果有朋友有更好的实现或者发现别的有更好的实现,希望可以@我一下,共同进步。
  • 完整的代码我放Github上面了☞完整代码

推荐阅读更多精彩内容