Android投票自定义View

本文介绍了一种在Android中自定义View实现投票显示效果的方法。通过计算左右布局长度并使用Canvas绘制半圆、梯形及文字,实现了动态展示投票结果的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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地址
优快云地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值