Android--自定义View

自定义View

为什么要自定义View？
因为Android系统内置的View无法实现我们的需求，所以要根据自己的实际的需求来自定义View

如何使用自定义View（流程）？

①自定义View的属性

②继承View（至少重写2个构造方法）

③重写的 onMeasure（测量当前View的尺寸）、onDraw（绘画）、onLayout（定位）、onTouchEvent（监听）方法

使用教程（可以分为2种，一种是不使用自定义的View属性 另一种就是使用自定义的View属性。）

①先说不使用自定义的View（构造方法至少写2个，我这块写了4个）

package com.example.dabin.www.day03_viewcircle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Dabin on 2017/4/27.
 */

public class VirtualKeyView extends View {
    public VirtualKeyView(Context context) {
        super(context);
    }

    public VirtualKeyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VirtualKeyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public VirtualKeyView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    //测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

       //Paint 为画笔   Canvas为画布  

        Paint base = new Paint();       //最底部的圈
        Paint middle = new Paint();     //中间的圈
        Paint top = new Paint();        //最顶部的圈

        //选取屏幕中间
        float wi = canvas.getWidth() / 2;
        float he = canvas.getHeight() / 2;

        int baseR = dip2px(getContext(), 150); //设置底部圆半径
        int middleR = dip2px(getContext(), 80); //设置中间圈半径
        int topR = dip2px(getContext(), 50); //设置圆环宽度



        base.setARGB(255, 199, 33, 56);  //底部圈设置为红色
        middle.setColor(Color.WHITE);   //中间部圈设置为白色
        top.setColor(Color.BLUE);       //顶部圈设置为蓝色

        //画笔样式分三种： 1.Paint.Style.STROKE：描边    2.Paint.Style.FILL_AND_STROKE：描边并填充3.Paint.Style.FILL：填充
        //base.setStyle(Paint.Style.STROKE);  //给底部圈描边

        //设置描边的粗细，单位：像素px 注意：当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
        //base.setStrokeWidth(20);   //底部圈描边的粗细

        //设置画笔为抗齿锯
        base.setAntiAlias(true);
        middle.setAntiAlias(true);
        top.setAntiAlias(true);


        canvas.drawColor(Color.YELLOW);         //整体页面颜色
        canvas.drawCircle(wi, he, baseR, base);   //底部圈位置大小
        canvas.drawCircle(wi, he, middleR, middle);  //中间圈位置大小
        canvas.drawCircle(wi, he, topR, top);     //顶部圈位置大小

        canvas.drawText("X", wi, he, base);     //底部圈的字体
    }

    //定位
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

    //监听
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    //根据手机的分辨率从 dp 的单位 转成为 px(像素)
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

我这块直接在onDraw中进行一系列操作，Paint()为画笔， Canvas为画布，其中根据手机分辨率从dp单位转成为px，可以不用，在相应的位置上直接写上数也可以。

其中drawCircle为画圆、drawLine绘制直线、drawRect绘制矩形、drawBitmap绘制位图

效果如下：

②使用View的属性（点击改变数字）

先在res/values下添加一个attrs.xml,在里面定义属性和声明样式

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="mText" format="string" />
    <attr name="mTextColor" format="color" />
    <attr name="mTextSize" format="dimension" />
    <declare-styleable name="MyView">
        <attr name="mText"/>
        <attr name="mTextColor"/>
        <attr name="mTextSize"/>
    </declare-styleable>
</resources>

接着在我们的布局文件中声明我们的自定义View

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:dabin="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.dabin.com.www.view.MainActivity">

    <com.example.dabin.www.day04_view.MyView
        android:layout_width="200dip"
        android:layout_height="100dip"
        android:textSize="20sp"
        dabin:mTextSize="25sp"
        dabin:mText="i love you"
        dabin:mTextColor ="#0000ff"
        android:background="#ff0000"/>

</RelativeLayout>

紧记一定要引入   xmlns:dabin="http://schemas.andoroid.com/apk/res-auto" 这句话，这是命名空间，dabin:mTextSize=”25sp“  这是对我们attrs.xml中声明属性的赋值。

接着看一下自定义View中的内容

package com.example.dabin.www.day04_view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Dabin on 2017/9/28.
 */

public class MyView extends View {


    private String mText;// 文字
    private int mTextColor;// 颜色
    private int mTextSize; // 字体大小

    private Rect rect;
    private Paint paint;

    public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //获取自定义属性的值
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyView, defStyleAttr, 0);

        mText = a.getString(R.styleable.MyView_mText); //获取attrs.xml中的字体
        mTextColor = a.getColor(R.styleable.MyView_mTextColor, Color.BLACK);//设置attrs.xml中的字体颜色
        mTextSize = (int) a.getDimension(R.styleable.MyView_mTextSize, 100);//设置attrs.xml中的字体大小

        a.recycle();  //注意回收

        paint = new Paint();
        paint.setTextSize(mTextSize); //设置字体大小
        paint.setColor(mTextColor);  //设置字体颜色

        //获得绘制文本的宽和高
        rect = new Rect();
        paint.getTextBounds(mText, 0, mText.length(), rect);
    }

    // 绘制
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText(mText, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + rect.height() / 2, paint); //绘制文字
    }

    //监听
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:  //移动
                break;
            case MotionEvent.ACTION_DOWN:  //按下
                float a = (float) (Math.random() * 10000);  //生成一个随机数
                mText = "" + a;
                invalidate(); //更新视图
                break;
            case MotionEvent.ACTION_UP:  //抬起
                break;
        }
        //这句话不要修改
        return super.onTouchEvent(event);
    }
}

在构造方法中，获取自定义View的对象，然后对其进行赋值。

在onTouchEvent()监听方法中设置点击改变值。

效果如下：

这些就是自定义View的一些简单使用。