男人就是个视觉动物，无图无真相，咱们先上张图看看效果。
恩，没错啦，就是流水线瓶装汽水装盖的效果，个人感觉还是蛮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上面了☞完整代码
