自定义View之onDraw（）

自定义View时可能会重写三个方法：
1、onDraw():你的View里画些什么内容
2、onMeasure():你的View的宽高
3、onLayout():你的View放在什么位置

这次写onDraw()，帮助自己总结记忆。

思路如下：
1、自定义属性，获得绘制的素材。在View里画东西，你总要有素材，也就是画些什么。比如说要画一张图，就要知道是什么图；要画一段文字，就需要知道是什么文字，文字的大小，文字的颜色等等。这个涉及到的知识点有：
- attrs自定义属性资源文件的编写
- 命名空间的使用
- 在自定义View的重载构造方法里如何拿取xml里填写的绘制素材（即自定义属性）
2、有了素材，如何将素材画进View。如android如何绘制图形和文字。会用到两个东西:
- Canvas：确定绘制什么东西，比如说可以画圆、画矩形、画图片、画文字等。
- Paint：确定绘制内容的属性，比如说画文字，你的文字的大小是多少，颜色是什么等。
在具体画的时候涉及到的小知识点有：
- 如何按照自己的思路将素材放在合适的位置，比如：确定图片位置的坐标点是左上，确定文字位置的坐标点是左下，你如何排列这些素材等
- 如何将Drawable转为BitMap
- 如何获得文字的宽度和高度

举个实例,效果图如下：

1、attrs.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomView">
        <attr name="icon" format="reference"/>
        <attr name="text" format="string"/>
        <attr name="color" format="color"/>
        <attr name="textSize" format="dimension"/>
    </declare-styleable>
</resources>

2、布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:background="@android:color/holo_orange_dark">
    <com.example.dong.demo.CustomView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:icon="@drawable/ic_navigation_home_on"
        app:text="主页"
        app:color="@android:color/holo_blue_dark"
        app:textSize="12sp"/>
    <com.example.dong.demo.CustomView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:icon="@drawable/ic_navigation_order_on"
        app:text="订单"
        app:color="@android:color/holo_blue_dark"
        app:textSize="12sp"/>
    <com.example.dong.demo.CustomView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:icon="@drawable/ic_navigation_message_on"
        app:text="消息"
        app:color="@android:color/holo_blue_dark"
        app:textSize="12sp"/>
    <com.example.dong.demo.CustomView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:icon="@drawable/ic_navigation_mine_on"
        app:text="我的"
        app:color="@android:color/holo_blue_dark"
        app:textSize="12sp"/>
</LinearLayout>
</RelativeLayout>

3、自定义View的Java代码：

public class CustomView extends View {
    /**
     * 图片
     */
    Drawable mIcon;
    /**
     * 文字
     */
    String mText;
    /**
     * 文字颜色
     */
    int mColor;
    /**
     * 文字大小
     */
    int mTextSize;
    /**
     * 绘制文字的画笔
     */
    Paint mTextPaint;
    /**
     * 绘制图片的画笔
     */
    Paint mPicturePaint;
    /**
     * 图片转为Bitmap格式，因为canvas只能画Bitmpa格式，不能画Drawable格式
     */
    Bitmap mBitmap;

    /**
     * 通过构造方法获得绘制的素材以及根据这些素材初始化画笔
     * @param context
     * @param attrs
     */
    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //拿取自定义内容，以提供onDraw()时的绘制素材
        getContent(context, attrs);
        //初始化画文字的画笔
        mTextPaint = new Paint();
        mTextPaint.setColor(mColor);
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setStyle(Paint.Style.FILL);//设置实心字体
        //初始化画图片的画笔
        mPicturePaint = new Paint();
        mPicturePaint.setAntiAlias(true);//设置抗锯齿
    }

    /**
     * 拿取自定义的内容，以提供onDraw()时的绘制素材
     *
     * @param context
     * @param attrs   所有的自定义属性集合
     */
    private void getContent(Context context, AttributeSet attrs) {
        //将“CustomView的自定义属性集合”从“所有自定义属性集合”中取出来
        TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.CustomView);

        //将CustomView自定义属性的值分别取出来
        mIcon = t.getDrawable(R.styleable.CustomView_icon);
        mText = t.getString(R.styleable.CustomView_text);
        mColor = t.getInt(R.styleable.CustomView_color, Color.BLACK);
        int defaultValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12f, getResources().getDisplayMetrics());//给以sp为单位的默认值
        mTextSize = t.getDimensionPixelSize(R.styleable.CustomView_textSize, defaultValue);

        //回收资源
        t.recycle();

        //将图片由Drawable格式转为Bitmap格式
        mBitmap = ((BitmapDrawable) mIcon).getBitmap();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //画图片，是从图片的左上角开始画。将图片画在控件的中央。
        float picLeft = getWidth() / 2 - (mBitmap.getWidth()) / 2;//“左上角坐标点”的“x轴的数值”就是“控件宽度的一半”减去“图片宽度的一半”
        float picTop = getHeight() / 2 - (mBitmap.getHeight()) / 2;//“左上角坐标点”的“y轴的数值”就是“控件高度的一半”减去“图片高度的一半”
        canvas.drawBitmap(mBitmap, picLeft, picTop, mPicturePaint);

        //画文字，是从文字的左下角开始画。将文字画在图片的下面。
        Rect bounds = new Rect();//通过画笔获得文字的宽度和高度，宽度和高度存在“Rect对象”中。
        mTextPaint.getTextBounds(mText, 0, mText.length(), bounds);//通过画笔获得文字的宽度和高度，宽度和高度存在“Rect对象”中
        float textLeft = getWidth() / 2 - (bounds.width()) / 2;//“左下角坐标点”的“x轴的数值”就是“控件宽度的一半”减去“文字宽度的一半”
        float textBottom = getHeight() / 2 + (mBitmap.getHeight()) / 2 + bounds.height();//“左下角坐标点”的“y轴的数值”就是“控件高度的一半”加上“图片高度的一半”再加上“文字的高度”
        canvas.drawText(mText, textLeft, textBottom, mTextPaint);
    }
}