UI效果仿写AndroidAndroid 自定义view

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

2016-11-08  本文已影响1041人  Wang_Guan

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

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，为了让文字居中，计算一下字体的长度，然后取中就好啦。

写在后面

上一篇下一篇

猜你喜欢

热点阅读