圆形投票进度条

我们经常看到一些手机投票结果如果只有两种情况，使用以下效果往往看起来比较直观，我之前在一个android开发群里边发现有人问这个问题，今天闲着没事，就顺带着做出来了。个人只制作了圆形条部分，你当然可以在下方再加一个布局说明黑色代表什么，粉色代表什么。

做任何一件事，最最需要的是整体上有个规划，其次是细节上有个考量。先说整体思路：1、找一张画布，画一个底色；2、画一个粉色圆形；3、画一个封闭的黑色弧形；4、在圆环内部画一个底色圆形，截出一个圆环

简单吧？然后就是写代码的体力活了，为了让看官们都懂，在下当然会上代码。

1、activity源码，很简单，加载一个布局文件

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    }
}

2、voteview类，使用自定义资源declare-styleable，在ondraw方法中进行绘制

public class VoteView extends View {

    private int background,foreground,max,progress;
    private Paint paint;
    private Path path;
    private int mWidth,mHeight;
    public VoteView(Context context){
        this(context,null);
    }
    
    public VoteView(Context context,AttributeSet attrs){
        this(context,attrs,0);
    }
    public VoteView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        TypedArray mType = getResources().obtainAttributes(attrs,R.styleable.voteattr);
        for (int i = 0; i < mType.getIndexCount(); i++) {
            switch (mType.getIndex(i)) {
            case R.styleable.voteattr_background:
                background = mType.getColor(R.styleable.voteattr_background,000000);
                break;
            case R.styleable.voteattr_foreground:
                foreground = mType.getColor(R.styleable.voteattr_foreground,000000);
                break;
            case R.styleable.voteattr_max:
                max = mType.getInt(R.styleable.voteattr_max,0);
                break;
            case R.styleable.voteattr_progress:
                progress = mType.getInt(R.styleable.voteattr_progress,0);
                break;

            default:
                break;
            }
        }
        mType.recycle();
        paint = new Paint();
        path = new Path();
        paint.setColor(background);
        paint.setAntiAlias(true);
        paint.setStyle(Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        canvas.drawColor(Color.WHITE);
        mHeight = getHeight();
        mWidth = getWidth();
        path.addCircle(mWidth/2,mHeight/2,Math.min(mWidth/2,mHeight/2),Direction.CW);
        canvas.drawPath(path,paint);
        RectF mRectF = null;
        if (mWidth>= mHeight) {
            mRectF = new RectF((mWidth-mHeight)/2,0,(mWidth-mHeight)/2+mHeight,mHeight);
        }
        else {
            mRectF = new RectF(0,(mHeight-mWidth)/2,mWidth,(mHeight-mWidth)/2+mWidth);
        }
        paint.setColor(foreground);
        canvas.drawArc(mRectF,90,progress,true,paint);
        paint.setColor(Color.WHITE);
        path.reset();
        path.addCircle(mWidth/2,mHeight/2,Math.min(mWidth/4,mHeight/4),Direction.CW);
        canvas.drawPath(path,paint);
    }

3、使用的declare属性xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="voteattr">
        <attr name = "background"  format="color|reference"/>
        <attr name = "foreground"  format="color|reference"/>
        <attr name = "max"  format="integer"/>
        <attr name = "progress"  format="integer"/>
    </declare-styleable>
</resources>

4、activity加载的资源文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <com.example.voteview.VoteView 
        xmlns:vote="http://schemas.android.com/apk/res/com.example.voteview"
        android:layout_width="300dp"
        android:layout_height="200dp"
        vote:background="#ff00ff"
        vote:foreground="#0f0f0f"
        vote:progress="90"
        />
     
</RelativeLayout>

不知道博客园怎么上传源码，反正到此为止所有的代码都已经上传了，(●'◡'●)

圆形投票进度条

推荐阅读