GIF.gif

### 如何实现？

1.上面的瓶盖
2.中间的瓶子
3.下面显示的文字

#### 实现上面的瓶盖

``````      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);
}
``````

#### 实现中间的瓶子

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;
}
``````

?_?思路草稿

#### 实现下面显示的文字

``````     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上面了☞完整代码