学习View第三步

相信大家对View的测量和绘制有了粗浅的认识，但是得需要一个简单的入门小例子来进行巩固，我就直接从《Android群英传》里面的一个小例子说起。

MainActivity.java:

public class MainActivity extends AppCompatActivity {

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

class My_TextView extends TextView{

    private Paint mPaint1;
    private Paint mPaint2;

    public My_TextView(Context context) {
        super(context);
        initView();
    }

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

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

    private void initView() {
        //也可以是使用getPaint()方法获得Paint的实例，但是只能是给一个引用，如果给两个则会混乱
        mPaint1 = new Paint();
        mPaint1.setColor(getResources().getColor(android.R.color.holo_blue_light));
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint2 = new Paint();
        mPaint2.setColor(Color.YELLOW);
        mPaint1.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //绘制外层矩形
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
        //绘制内层矩形
        canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mPaint2);
        //canvas.save();
        canvas.translate(50,0);
        super.onDraw(canvas);
        //canvas.restore();
    }
}

activity_main.xml:

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

    <com.example.li.view_my_three.My_TextView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="android"
        android:textSize="30sp"
        />

</LinearLayout>

然后是效果图：

讲解：

canvas.drawRect

首先drawRect是画一个矩形，现在Android知道是画一个矩形，但是这个矩形画哪儿呢？你可以覆写onMeasure()方法，但是我们这里直接使用了TextView自带的。绘制的基点是左上角，即以这个为标准来判断距离。你可以将这个四个参数变换就知道代表的什么。然后是save和restore()这两个方法在 现在还用不着，在用比较复杂的绘图界面时才会采用。这里是详解这两个方法的传送门：http://blog.youkuaiyun.com/oney139/article/details/8143281。

讲解：

canvas.translate(50,0);

这个方法是将画布向X轴方向平移了50，向Y轴平移了0。

假如，我们改变布局文件：

android:layout_width="wrap_content"
android:layout_height="wrap_content"

结果会是这样

。

首先大家要明白canvas是画板！，然后canvas实际操作的是画布，即bitmap！这个在前面有说过，但是为什么会这样呢，其实如果大家将canvas.translate(50,0);给注释掉再运行就明白了。因为在TextView在绘图之前以及测量了大小。相当于我们固定了画板，但是画布整体左边移动了50，这时候我们在画板上就只能看到这些了。

这是在原有的控件进行了拓展，只是在绘制上进行了自定义，而不是完全自定义。