# 自定义view————流程位置

madreain
1,071 阅读3分钟

名字真不知道起什么名字，上效果图把，原谅我的词穷（最近在弄weex混合开发，头都大了，有兴趣的可以去研究，有问题一起交流）

效果图
效果图

这是这么样效果，在实际项目运用到了，想想要是UI给icon多浪费资源呀，干脆自己上手写个自定义view来解决

思路分析

看效果图就是几个实心圆，几个空心圆花在一条线上，其中要考虑圆的大小，圆间距。根据这些计算第一个画圆的开始位置

开始位置的计算：

float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;

开始x=(宽-(实心圆+空心圆)*每一个圆的宽度)/2;计算出开始的x，画圆从圆心开始，得再把圆半径加上

float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);

每一个圆的位置x=开始x+圆宽*个数（0开始）+半径

开始画圆

分析的思路大致就能在onDraw开始画了

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //先计算总量 每一个20
        int size = solidnum + hollownum;
        if (size > 0) {
            float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
            float y=mheight/2;
            for(int i=0;i<size;i++){
                float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
                //画实心
                if(i<solidnum){
                    canvas.drawCircle(x,y,radius,solidPaint);
                    //画空心
                }else {
                    canvas.drawCircle(x,y,radius,hollowPaint);
                }
            }
        }
    }

圆画好了就是一些自定义属性添加：实心圆个数、空心圆个数、圆颜色

自定义属性

xml中添加

attrs.xml

    <!--//select-->
    <declare-styleable name="SelectView">
        <attr name="solidnum" format="integer"/>
        <attr name="hollownum" format="integer"/>
    </declare-styleable>

代码中获取

    private void initType(Context context,AttributeSet attrs){
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
        solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
        hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
        typedArray.recycle();
    }

颜色也是一样添加，可以自行添加

java代码添加

    /***
     *
     * @param solidnum 实心
     * @param hollownum  空心
     */
    public void setSelect(int solidnum, int hollownum) {
        this.solidnum = solidnum;
        this.hollownum = hollownum;
        invalidate();
    }

    /**
     * 支持设置颜色
     * @param red
     * @param green
     * @param blue
     */
    public void setColor(int red, int green, int blue){
        solidPaint.setColor(Color.rgb(red,green,blue));
        hollowPaint.setColor(Color.rgb(red,green,blue));
        invalidate();
    }

完整自定义view代码

package com.selectview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;


/**
 * Created by wujun on 2017/9/13.
 * 7个选择点
 *
 * @author madreain
 * @desc
 */

public class SelectView extends View {
    //实心
    Paint solidPaint;
    //空心
    Paint hollowPaint;
    private int solidnum;
    private int hollownum;

    //宽高
    int mwidth, mheight;
    float radius;
    Context mcontext;

    public SelectView(Context context) {
        super(context);
        mcontext = context;
        init(context);
    }

    public SelectView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mcontext = context;
        initType(context,attrs);
        init(context);
    }

    public SelectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mcontext = context;
        initType(context,attrs);
        init(context);
    }

    private void initType(Context context,AttributeSet attrs){
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
        solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
        hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
        typedArray.recycle();
    }

    private void init(Context context) {
        solidPaint = new Paint();
        solidPaint.setAntiAlias(true);
        solidPaint.setColor(Color.rgb(50,193,164));
        solidPaint.setStyle(Paint.Style.FILL);

        hollowPaint = new Paint();
        hollowPaint.setAntiAlias(true);
        hollowPaint.setColor(Color.rgb(50,193,164));
        hollowPaint.setStyle(Paint.Style.STROKE);

        radius = DisplayUtil.dip2px(context, 3.5f);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //宽高
        mwidth = w;
        mheight = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //先计算总量 每一个20
        int size = solidnum + hollownum;
        if (size > 0) {
            float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
            float y=mheight/2;
            for(int i=0;i<size;i++){
                float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
                //画实心
                if(i<solidnum){
                    canvas.drawCircle(x,y,radius,solidPaint);
                    //画空心
                }else {
                    canvas.drawCircle(x,y,radius,hollowPaint);
                }
            }
        }
    }

    /***
     *
     * @param solidnum 实心
     * @param hollownum  空心
     */
    public void setSelect(int solidnum, int hollownum) {
        this.solidnum = solidnum;
        this.hollownum = hollownum;
        invalidate();
    }

    /**
     * 支持设置颜色
     * @param red
     * @param green
     * @param blue
     */
    public void setColor(int red, int green, int blue){
        solidPaint.setColor(Color.rgb(red,green,blue));
        hollowPaint.setColor(Color.rgb(red,green,blue));
        invalidate();
    }

}

项目中使用

xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.selectview.MainActivity">

    <com.selectview.SelectView
        android:id="@+id/selectView1"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="6"
        app:solidnum="1" />

    <com.selectview.SelectView
        android:id="@+id/selectView2"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="6"
        app:solidnum="1" />

    <com.selectview.SelectView
        android:id="@+id/selectView3"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="3"
        app:solidnum="1" />


</LinearLayout>

代码中设置

        selectView2.setColor(0,100,0);
        selectView2.setSelect(3,4);

        selectView3.setColor(220,20,60);

SelectView github demo地址

个人博客

avatar
文章
阅读
粉丝