学习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.csdn.net/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，这时候我们在画板上就只能看到这些了。

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