Android4笔记之定制To-Do List

To-Do List示例使用了TextView来表示列表视图的每一行。可以通过扩展TextView及重写onDraw方法来定制列表的外观。

在以下这个例子中，将创建一个新的ToDoListItemView，它可以使每一个条目的外观成为像在笔记本中的那样。

（1）创建一个新的扩展了TextView的ToDoListItemView类。它包含一个重写onDraw方法的stub，以及调用了新的init方法的构造函数实现

package com.paad.todolist;

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

public class ToDoListItemView extends TextView {

  public ToDoListItemView (Context context, AttributeSet ats, int ds) {
    super(context, ats, ds);
    init();
  }

  public ToDoListItemView (Context context) {
    super(context);
    init();
  }

  public ToDoListItemView (Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  private void init() {
    
  }

  @Override
  public void onDraw(Canvas canvas) {
    // 使用TextView基类渲染文本
    super.onDraw(canvas);
  }

}

（2）在res/values文件夹中创建一个新的color.xml资源。并为页面、边缘、行和文本设置新的颜色值。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="notepad_paper">#EEF8E0A0</color>
  <color name="notepad_lines">#FF0000FF</color>
  <color name="notepad_margin">#90FF0000</color>
  <color name="notepad_text">#AA0000FF</color>
</resources>

（3）创建一个新的dimens.xml资源文件，并为页面边缘的宽度添加新值。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <dimen name="notepad_margin">30dp</dimen>
</resources>

（4）通过使用已定义的资源，现在就可以定制ToDoListItemView的外观了。创建新的私有实例变量来存储用来绘制页面的背景和边缘的Paint对象。此外还要分别创建用来存储页面的颜色值和边缘值得变量。

  通过完善init方法来引用在前两步中创建的实例资源，并创建Paint对象。

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

  private void init() {
    // 获取对资源表的引用
    Resources myResources = getResources();

    // 创建在onDraw方法中使用的画刷
    marginPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    marginPaint.setColor(myResources.getColor(R.color.notepad_margin));
    linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    linePaint.setColor(myResources.getColor(R.color.notepad_lines));

    // 获得页面背景色和边缘宽度
    paperColor = myResources.getColor(R.color.notepad_paper);
    margin = myResources.getDimension(R.dimen.notepad_margin);
  }

（5）要开始绘制页面，就需要重写onDraw方法，并使用在步骤（4）中创建的Paint对象来绘制图像。一旦绘制了页面图像之后就可以调用超类onDraw方法，让它像往常一样绘制文本。

 @Override
  public void onDraw(Canvas canvas) {
    // 绘制页面的颜色
    canvas.drawColor(paperColor);

    // 绘制边缘
    canvas.drawLine(0, 0, 0, getMeasuredHeight(), linePaint);
    canvas.drawLine(0, getMeasuredHeight(),
                       getMeasuredWidth(), getMeasuredHeight(),
                       linePaint);

    // 绘制背景
    canvas.drawLine(margin, 0, margin, getMeasuredHeight(), marginPaint);

    // 移动文本，让它跨过边缘
    canvas.save();
    canvas.translate(margin, 0);

    // 使用TextView渲染文本
    super.onDraw(canvas);
    canvas.restore();
  }

  （6）ToDOListItemView的实现至此完成。要在To-Do List Activity中使用它，需要把它添加到一个新布局中，并将该布局传递给Array Adapter构造函数。首先在res/values文件夹中创建一个新的todolist_item.xml资源来指定每一个To-Do List条目是如何在列表视图中显示的。对于这个例子来说，布局只需要由心的ToDoLiatItemView组成即可，所以可将其设置为填充整个可用的空间

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView
    android:id="@+id/rowDate"
    android:background="@color/notepad_paper"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:textColor="#F000"
    android:layout_alignParentRight="true"
  />
  <com.paad.todolist.ToDoListItemView
    android:id="@+id/row"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:padding="10dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:textColor="@color/notepad_text"
    android:layout_toLeftOf="@+id/rowDate"
  />
</RelativeLayout>