Android投票自定义View
16lz
2021-01-23
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地址
CSDN地址
更多相关文章
- Android 用style简化layout布局文件
- android 布局文件中控件ID、name标签属性的命名包含“@”、“.”
- 【源码分享下载】每日更新之Android应用源码之仿微信5.2布局
- Android之基本样式和布局
- android -------- 流式布局，支持单选、多选等
- 约束布局ConstraintLayout的使用你知道吗