自定义View(一)

From AigeStudio,Power by Aige

---

自定义view的步骤：
1，自定义view的属性
2，在view的构造方法中获得自定义的属性
[3,重写onMeasure]
4, 重写onDrew

那么来画一个不停的从小变大的圆环，效果图：

在Android中自定义一个View类并一定是直接继承View类或者View类的子类比如TextView、Button等等，这里呢我们也依葫芦画瓢直接继承View自定义一个View的子类CircleStroke：

/**
 * Created by yaoyanbao on 2017/6/5.
 */
public class CircleStroke extends View implements Runnable {
    /**
     * 定义画笔
     */
    private Paint mPaint;
    /**
     * 定义半径
     */
    private int radius;
    /**
     *上下文对象
     */
    private Context mContext;
    public CircleStroke(Context context) {
        super(context);
    }

    /**
     * 构造方法获取自定义的属性
     * @param context
     * @param attrs
     */
    public CircleStroke(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        //初始化画笔
        initPaint();
    }

    private void initPaint() {
        //实例化画笔并打开抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        /*
         * 设置画笔样式为描边，圆环嘛……当然不能填充不然就么意思了
         *
         * 画笔样式分三种：
         * 1.Paint.Style.STROKE：描边
         * 2.Paint.Style.FILL_AND_STROKE：描边并填充
         * 3.Paint.Style.FILL：填充
         */
        mPaint.setStyle(Paint.Style.STROKE);
        //设置画笔颜色
        mPaint.setColor(Color.BLUE);
        /*
         * 设置描边的粗细，单位：像素px
         * 注意：当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
         */
        mPaint.setStrokeWidth(10);
    }

    /**
     * 重写onDraw方法
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆环
        canvas.drawCircle(MeasureUtil.getScreenWidth((Activity) mContext)/2,
                MeasureUtil.getScreenHeight((Activity) mContext)/2, radius, mPaint);
    }

    @Override
    public void run() {
        /**
         * 确保线程不断执行，不断刷新界面
         */
        while (true){
            try {
                /*
                 * 如果半径小于200则自加否则大于200后重置半径值以实现往复
                 */
                if (radius <= 200){
                    radius += 10;
                    // 刷新View
                    postInvalidate();
                }else{
                    radius = 0;
                }
                // 每执行一次暂停40毫秒
                    Thread.sleep(40);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

其中在重写onDraw方法时，Measure工具类是用来获取屏幕尺寸，以便将圆心设置到屏幕中心位置，代码如下：

/**
 * 测绘工具类
 * 
 * @author Aige
 * @since 2014/11/17
 */
public final class MeasureUtil {
    private MeasureUtil()
    {
        /* cannot be instantiated */
        throw new UnsupportedOperationException("cannot be instantiated");
    }

    /**
     * 获取屏幕宽度
     * @param activity
     * @return
     */
    public static int getScreenWidth(Activity activity)
    {
        DisplayMetrics metrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
        return metrics.widthPixels;
    }
    /**
     * 获得屏幕高度
     *
     * @param activity
     * @return
     */
    public static int getScreenHeight(Activity activity)
    {
        DisplayMetrics metrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
        return metrics.heightPixels;
    }
}

第二步，将自定义的CircleStroke类当做一个控件添加到布局中，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <com.example.yaoyanbao.costumonedemo.view.CircleStroke
        android:id="@+id/circleStroke"
        android:background="#e0fce0"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

最后，在mainActivity中实例化自定义View，再开启线程，代码如下：

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.circleStroke)
    CircleStroke circleStroke;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        new Thread(circleStroke).start();
    }
}