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

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

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

Android 高级编程读书笔记视图View定制与拓展_第1张图片

首先我们新建一个工程，然后创建一个继承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 stubinit();}/** * 使用资源文件进行创建时必须的构造函数 *  * @param context * @param attrs */public MyTextView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubinit();}/** * 使用代码进行创建时必须的构造函数 *  * @param context */public MyTextView(Context context) {super(context);// TODO Auto-generated constructor stubinit();}}

我们定义了三个构造函数，并在构造函数中实现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 stubResources 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方法代码如下：

/** * 重新绘制布局 */@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubcanvas.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 {@Overrideprotected 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);}@Overridepublic 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 stubinit();}/** * 使用资源文件进行创建时必须的构造函数 *  * @param context * @param attrs */public MyTextView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubinit();}/** * 使用代码进行创建时必须的构造函数 *  * @param context */public MyTextView(Context context) {super(context);// TODO Auto-generated constructor stubinit();}/** * 重新绘制布局 */@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubcanvas.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();}/** * 按钮事件 */@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// TODO Auto-generated method stubLog.v("test", "keyCode" + keyCode);return super.onKeyDown(keyCode, event);}/** * 布局初始化方法 */private void init() {// TODO Auto-generated method stubResources 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);}}

更多相关文章

随机推荐

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

更多相关文章

随机推荐

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