Android 高级编程读书笔记 视图View定制与拓展

Android 本身给我们提供了一些基本的视图View，然而有些情况下，这些基本视图本身并不够美观，或者说不适合被我们使用，因此我们需要重新定制特定需求的视图。

Android 本身的工具箱包含的视图提供了很多创建UI的基本控件，我们要定制这些基本控件的时候，就需要创建一个扩展了员视图的新类。这里作为Demo，我们是实现一个如下效果的todolist 的TextView：

首先我们新建一个工程，然后创建一个继承TextView新类名字为 MyTextView，代码如下：

public class MyTextView extends TextView {
	/**
	 * 使用资源文件进行创建时必须的构造函数
	 * 
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public MyTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		init();
	}

	/**
	 * 使用资源文件进行创建时必须的构造函数
	 * 
	 * @param context
	 * @param attrs
	 */
	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		init();
	}

	/**
	 * 使用代码进行创建时必须的构造函数
	 * 
	 * @param context
	 */
	public MyTextView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init();
	}
}

我们定义了三个构造函数，并在构造函数中实现init()函数完成一些初始化操作。

我们的todolist Demo 是使用TextView控件来表示视图中的每一行，通过新类MyTextView拓展TextView以及重写它的onDraw方法来定制列表的外观。首先，我们重新定制我们上面MyTextView的外观，在res/values 中新建colors.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="note_paper">#AAFFFF99</color>
    <color name="note_lines">#FF0000FF</color>
    <color name="note_margin">#90FF0000</color>
    <color name="note_text">#AA0000FF</color>

</resources>

在这个colors.xml 文件中，我们定义了列表项的背景颜色，线的颜色，边界颜色和文字颜色

接着在新建dimens.xml如下：

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
	<dimen name="note_margin">30dp</dimen>
</resources>

这里我们定义了页面边缘的宽度。

通过上面定义的资源，我们就可以定制tudolist的外观了。先创建新的私有变量来存储用来绘制页面的背景和边缘的Paint对象，并创建用来存储页面颜色值和边缘宽度值得变量，如下：

	private Paint marginPaint;
	private Paint linePaint;
	private int paperColor;
	private float margin;

接着完善init()方法来引用之前创建的资源，并创建Paint对象用于接下来在onDraw方法中被调用，代码如下：

	/**
	 * 布局初始化方法
	 */
	private void init() {
		// TODO Auto-generated method stub
		Resources mResources = getResources();
		/**
		 * 创建画刷
		 */
		marginPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		marginPaint.setColor(mResources.getColor(R.color.note_margin));
		linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		linePaint.setColor(mResources.getColor(R.color.note_lines));
		/**
		 * 获得背景颜色和边缘宽度
		 */
		paperColor = mResources.getColor(R.color.note_paper);
		margin = mResources.getDimension(R.dimen.note_margin);

	}

初始化完毕后，就可以重写onDraw方法绘制我们需要的页面。一旦绘制完之后，就可以调用 super.onDraw()方法，让它想往常一样绘制文本。onDraw方法代码如下：

	/**
	 * 重新绘制布局
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		canvas.drawColor(paperColor);
		// 绘制TextView短横线
		canvas.drawLine(0, 0, margin, 0, linePaint);
		// 绘制TextView长横线
		canvas.drawLine(0, getMeasuredHeight(), getMeasuredWidth(),
				getMeasuredHeight(), linePaint);
		// 绘制边缘
		canvas.drawLine(margin, 0, margin, getMeasuredHeight(), marginPaint);
		canvas.save();
		//将添加的文本平移，跨过边缘
		canvas.translate(margin, 0);
		/**
		 * 调用基类绘制文本
		 */
		super.onDraw(canvas);
		canvas.restore();
	}

致此，我们的MyTextView已经定义完成，接着我们在res/layout 中创建一个新的todolist_item.xml文件来描述每一个item是怎么显示的。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<com.example.drawtextview.MyTextView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:scrollbars="vertical"
    android:textColor="@color/note_text"
    android:fadingEdge="vertical"
     />

接着我们再activity_main.xml文件中创建一个ListView，用来装载每一个todolist_item，代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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=".MainActivity" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ListView>

</RelativeLayout>

最后，我们在MainActivity.java文件中获取该ListView并添加适配器和数据，代码如下：

package com.example.drawtextview;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ListView listView = (ListView) findViewById(R.id.listView);
		final ArrayList<String> todoItem = new ArrayList<String>();
		todoItem.add("1. test");
		todoItem.add("2. test");
		todoItem.add("3. test");
		todoItem.add("4. test");
		todoItem.add("5. test");
		final ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(
				this, R.layout.todolist_item, todoItem);
		listView.setAdapter(arrayAdapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

完整的 MyTextView.java 代码如下：

package com.example.drawtextview;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.widget.TextView;

public class MyTextView extends TextView {

	private Paint marginPaint;
	private Paint linePaint;
	private int paperColor;
	private float margin;

	/**
	 * 使用资源文件进行创建时必须的构造函数
	 * 
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public MyTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		init();
	}

	/**
	 * 使用资源文件进行创建时必须的构造函数
	 * 
	 * @param context
	 * @param attrs
	 */
	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		init();
	}

	/**
	 * 使用代码进行创建时必须的构造函数
	 * 
	 * @param context
	 */
	public MyTextView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init();
	}

	/**
	 * 重新绘制布局
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		canvas.drawColor(paperColor);
		// 绘制TextView短横线
		canvas.drawLine(0, 0, margin, 0, linePaint);
		// 绘制TextView长横线
		canvas.drawLine(0, getMeasuredHeight(), getMeasuredWidth(),
				getMeasuredHeight(), linePaint);
		// 绘制边缘
		canvas.drawLine(margin, 0, margin, getMeasuredHeight(), marginPaint);
		canvas.save();
		//将添加的文本平移，跨过边缘
		canvas.translate(margin, 0);
		/**
		 * 调用基类绘制文本
		 */
		super.onDraw(canvas);
		canvas.restore();
	}

	/**
	 * 按钮事件
	 */
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub
		Log.v("test", "keyCode" + keyCode);
		return super.onKeyDown(keyCode, event);
		
	}

	/**
	 * 布局初始化方法
	 */
	private void init() {
		// TODO Auto-generated method stub
		Resources mResources = getResources();
		/**
		 * 创建画刷
		 */
		marginPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		marginPaint.setColor(mResources.getColor(R.color.note_margin));
		linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		linePaint.setColor(mResources.getColor(R.color.note_lines));
		/**
		 * 获得背景颜色和边缘宽度
		 */
		paperColor = mResources.getColor(R.color.note_paper);
		margin = mResources.getDimension(R.dimen.note_margin);

	}
}