Android投票自定义View

效果图

视觉稿有个这样的显示投票信息的控件，用自定义View来实现。

1、计算左右布局的长度

float leftLength; float rightLength; //一边为0人时的最短距路 float minLength = 120 + getHeight(); if (leftNum != 0 && rightNum != 0) { //都不为零看比例 leftLength = minLength + ((float) leftNum / (leftNum + rightNum)) * (getWidth() - 2 * minLength); } else { if (leftNum == 0) { if (rightNum == 0) { //左右都为0 各占一半 leftLength = getWidth() / 2; } else { //左边为0右边不为0 leftLength = minLength; } } else { //左边不为0右边为0 rightLength = minLength; leftLength = getWidth() - rightLength; } }

2、绘制左边布局

先画半圆，再画梯型，最后填充颜色

//画半圆 RectF leftOval = new RectF(0, 10, getHeight() - 10, getHeight() - 10); mPath.moveTo(getHeight() / 2 - 5, getHeight() / 2); mPath.arcTo(leftOval, 90, 180); //画矩形 mPath.moveTo(getHeight() / 2 - 5, 10); mPath.lineTo(leftLength + mInclination - 10, 10); mPath.lineTo(leftLength - mInclination - 10, getHeight() - 10); mPath.lineTo(getHeight() / 2 - 5, getHeight() - 10); //渐变色 Shader leftShader = new LinearGradient(0, 0, leftLength + mInclination - 10, 0, leftStartColor, leftEndColor, Shader.TileMode.CLAMP); mPaint.setShader(leftShader); //左边布局绘制完毕 canvas.drawPath(mPath, mPaint); mPaint.setShader(null); mPath.reset();

2、绘制右边布局

先画半圆，再画梯型，最后填充颜色

//画右边半圆 RectF rightOval = new RectF(getWidth() - getHeight(), 0, getWidth(), getHeight()); mPath.moveTo(getWidth() - getHeight() / 2, getHeight() / 2); mPath.arcTo(rightOval, -90, 180); //画右边矩形 mPath.moveTo(leftLength + mInclination + 10, 0); mPath.lineTo(getWidth() - getHeight() / 2, 0); mPath.lineTo(getWidth() - getHeight() / 2, getHeight()); mPath.lineTo(leftLength - mInclination + 10, getHeight()); //渐变色 Shader rightShader = new LinearGradient(leftLength + mInclination + 10, getHeight(), getWidth(), getHeight(), rightStartColor, rightEndColor, Shader.TileMode.CLAMP); mPaint.setShader(rightShader); //右边布局绘制完毕 canvas.drawPath(mPath, mPaint); mPaint.setShader(null);

3、画中间白线

//画中间白线 mPath.moveTo(leftLength + mInclination - 10, 0); mPath.lineTo(leftLength + mInclination + 10, 0); mPath.lineTo(leftLength - mInclination + 10, getHeight()); mPath.lineTo(leftLength - mInclination - 10, getHeight()); mPath.close(); mPaint.setColor(Color.WHITE); canvas.drawPath(mPath, mPaint); mPath.reset();

4、画文字

String leftText = String.valueOf(leftNum); String rightText = String.valueOf(rightNum); mPaint.setColor(textColor); mPaint.setTextSize(textSize); mPaint.setTextAlign(Paint.Align.LEFT); mPaint.getTextBounds(leftText, 0, leftText.length(), mBound); //左边文字 canvas.drawText(leftText, getHeight() / 2 + 6, getHeight() / 2 - 36 + mBound.height() / 2, mPaint); canvas.drawText("支持", getHeight() / 2 + 6, getHeight() / 2 + 12 + mBound.height() / 2, mPaint); mPaint.setColor(textColor); mPaint.getTextBounds(rightText, 0, rightText.length(), mBound); mPaint.setTextAlign(Paint.Align.RIGHT); //右边文字 canvas.drawText(rightText, getWidth() - getHeight() / 2 - 6, getHeight() / 2 - 36 + mBound.height() / 2, mPaint); canvas.drawText("不支持", getWidth() - getHeight() / 2 - 6, getHeight() / 2 + 12 + mBound.height() / 2, mPaint);

GitHub地址 地址