转载请注明出处：http://blog.csdn.net/guolin_blog

如果说要按类型来划分的话，自定义View的实现方式大概可以分为三种，自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下，每种方式分别是如何自定义View的。

一、自绘控件

自绘控件的意思就是，这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的，而这部分内容我们已经在 Android视图绘制流程完全解析，带你一步步深入了解View(二) 中学习过了。

下面我们准备来自定义一个计数器View，这个View可以响应用户的点击事件，并自动记录一共点击了多少次。新建一个CounterView继承自View，代码如下所示：

[java] view plaincopy

1. public class CounterView extends View implements OnClickListener {  
2.   
3.     private Paint mPaint;  
4.       
5.     private Rect mBounds;  
6.   
7.     private int mCount;  
8.       
9.     public CounterView(Context context, AttributeSet attrs) {  
10.         super(context, attrs);  
11.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
12.         mBounds = new Rect();  
13.         setOnClickListener(this);  
14.     }  
15.   
16.     @Override  
17.     protected void onDraw(Canvas canvas) {  
18.         super.onDraw(canvas);  
19.         mPaint.setColor(Color.BLUE);  
20.         canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);  
21.         mPaint.setColor(Color.YELLOW);  
22.         mPaint.setTextSize(30);  
23.         String text = String.valueOf(mCount);  
24.         mPaint.getTextBounds(text, 0, text.length(), mBounds);  
25.         float textWidth = mBounds.width();  
26.         float textHeight = mBounds.height();  
27.         canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2  
28.                 + textHeight / 2, mPaint);  
29.     }  
30.   
31.     @Override  
32.     public void onClick(View v) {  
33.         mCount++;  
34.         invalidate();  
35.     }  
36.   
37. }  

既然CounterView是一个自绘视图，那么最主要的逻辑当然就是写在onDraw()方法里的了，下面我们就来仔细看一下。这里首先是将Paint画笔设置为蓝色，然后调用Canvas的drawRect()方法绘制了一个矩形，这个矩形也就可以当作是CounterView的背景图吧。接着将画笔设置为黄色，准备在背景上面绘制当前的计数，注意这里先是调用了getTextBounds()方法来获取到文字的宽度和高度，然后调用了drawText()方法去进行绘制就可以了。

这样，一个自定义的View就已经完成了，并且目前这个CounterView是具备自动计数功能的。那么剩下的问题就是如何让这个View在界面上显示出来了，其实这也非常简单，我们只需要像使用普通的控件一样来使用CounterView就可以了。比如在布局文件中加入如下代码：

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent" >  
4.   
5.     <com.example.customview.CounterView  
6.         android:layout_width="100dp"  
7.         android:layout_height="100dp"  
8.         android:layout_centerInParent="true" />  
9.   
10. </RelativeLayout>  

好了，就是这么简单，接下来我们可以运行一下程序，并不停地点击CounterView，效果如下图所示。

怎么样？是不是感觉自定义View也并不是什么高级的技术，简单几行代码就可以实现了。当然了，这个CounterView功能非常简陋，只有一个计数功能，因此只需几行代码就足够了，当你需要绘制比较复杂的View时，还是需要很多技巧的。

二、组合控件

组合控件的意思就是，我们并不需要自己去绘制视图上显示的内容，而只是用系统原生的控件就好了，但我们可以将几个系统原生的控件组合到一起，这样创建出的控件就被称为组合控件。

举个例子来说，标题栏就是个很常见的组合控件，很多界面的头部都会放置一个标题栏，标题栏上会有个返回按钮和标题，点击按钮后就可以返回到上一个界面。那么下面我们就来尝试去实现这样一个标题栏控件。

新建一个title.xml布局文件，代码如下所示：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="50dp"  
5.     android:background="#ffcb05" >  
6.   
7.     <Button  
8.         android:id="@+id/button_left"  
9.         android:layout_width="60dp"  
10.         android:layout_height="40dp"  
11.         android:layout_centerVertical="true"  
12.         android:layout_marginLeft="5dp"  
13.         android:background="@drawable/back_button"  
14.         android:text="Back"  
15.         android:textColor="#fff" />  
16.   
17.     <TextView  
18.         android:id="@+id/title_text"  
19.         android:layout_width="wrap_content"  
20.         android:layout_height="wrap_content"  
21.         android:layout_centerInParent="true"  
22.         android:text="This is Title"  
23.         android:textColor="#fff"  
24.         android:textSize="20sp" />  
25.   
26. </RelativeLayout>  

在这个布局文件中，我们首先定义了一个RelativeLayout作为背景布局，然后在这个布局里定义了一个Button和一个TextView，Button就是标题栏中的返回按钮，TextView就是标题栏中的显示的文字。

接下来创建一个TitleView继承自FrameLayout，代码如下所示：

[java] view plaincopy

1. public class TitleView extends FrameLayout {  
2.   
3.     private Button leftButton;  
4.   
5.     private TextView titleText;  
6.   
7.     public TitleView(Context context, AttributeSet attrs) {  
8.         super(context, attrs);  
9.         LayoutInflater.from(context).inflate(R.layout.title, this);  
10.         titleText = (TextView) findViewById(R.id.title_text);  
11.         leftButton = (Button) findViewById(R.id.button_left);  
12.         leftButton.setOnClickListener(new OnClickListener() {  
13.             @Override  
14.             public void onClick(View v) {  
15.                 ((Activity) getContext()).finish();  
16.             }  
17.         });  
18.     }  
19.   
20.     public void setTitleText(String text) {  
21.         titleText.setText(text);  
22.     }  
23.   
24.     public void setLeftButtonText(String text) {  
25.         leftButton.setText(text);  
26.     }  
27.   
28.     public void setLeftButtonListener(OnClickListener l) {  
29.         leftButton.setOnClickListener(l);  
30.     }  
31.   
32. }  

接下来调用findViewById()方法获取到了返回按钮的实例，然后在它的onClick事件中调用finish()方法来关闭当前的Activity，也就相当于实现返回功能了。

另外，为了让TitleView有更强地扩展性，我们还提供了setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法，分别用于设置标题栏上的文字、返回按钮上的文字、以及返回按钮的点击事件。

到了这里，一个自定义的标题栏就完成了，那么下面又到了如何引用这个自定义View的部分，其实方法基本都是相同的，在布局文件中添加如下代码：

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.example.customview.TitleView  
7.         android:id="@+id/title_view"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content" >  
10.     </com.example.customview.TitleView>  
11.   
12. </RelativeLayout>  

这样就成功将一个标题栏控件引入到布局文件中了，运行一下程序，效果如下图所示：

现在点击一下Back按钮，就可以关闭当前的Activity了。如果你想要修改标题栏上显示的内容，或者返回按钮的默认事件，只需要在Activity中通过findViewById()方法得到TitleView的实例，然后调用setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法进行设置就OK了。

三、继承控件

继承控件的意思就是，我们并不需要自己重头去实现一个控件，只需要去继承一个现有的控件，然后在这个控件上增加一些新的功能，就可以形成一个自定义的控件了。这种自定义控件的特点就是不仅能够按照我们的需求加入相应的功能，还可以保留原生控件的所有功能，比如 Android PowerImageView实现，可以播放动画的强大ImageView 这篇文章中介绍的PowerImageView就是一个典型的继承控件。

为了能够加深大家对这种自定义View方式的理解，下面我们再来编写一个新的继承控件。ListView相信每一个Android程序员都一定使用过，这次我们准备对ListView进行扩展，加入在ListView上滑动就可以显示出一个删除按钮，点击按钮就会删除相应数据的功能。

首先需要准备一个删除按钮的布局，新建delete_button.xml文件，代码如下所示：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <Button xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/delete_button"  
4.     android:layout_width="wrap_content"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/delete_button" >  
7.   
8. </Button>  

接着创建MyListView继承自ListView，这就是我们自定义的View了，代码如下所示：

[java] view plaincopy

1. public class MyListView extends ListView implements OnTouchListener,  
2.         OnGestureListener {  
3.   
4.     private GestureDetector gestureDetector;  
5.   
6.     private OnDeleteListener listener;  
7.   
8.     private View deleteButton;  
9.   
10.     private ViewGroup itemLayout;  
11.   
12.     private int selectedItem;  
13.   
14.     private boolean isDeleteShown;  
15.   
16.     public MyListView(Context context, AttributeSet attrs) {  
17.         super(context, attrs);  
18.         gestureDetector = new GestureDetector(getContext(), this);  
19.         setOnTouchListener(this);  
20.     }  
21.   
22.     public void setOnDeleteListener(OnDeleteListener l) {  
23.         listener = l;  
24.     }  
25.   
26.     @Override  
27.     public boolean onTouch(View v, MotionEvent event) {  
28.         if (isDeleteShown) {  
29.             itemLayout.removeView(deleteButton);  
30.             deleteButton = null;  
31.             isDeleteShown = false;  
32.             return false;  
33.         } else {  
34.             return gestureDetector.onTouchEvent(event);  
35.         }  
36.     }  
37.   
38.     @Override  
39.     public boolean onDown(MotionEvent e) {  
40.         if (!isDeleteShown) {  
41.             selectedItem = pointToPosition((int) e.getX(), (int) e.getY());  
42.         }  
43.         return false;  
44.     }  
45.   
46.     @Override  
47.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
48.             float velocityY) {  
49.         if (!isDeleteShown && Math.abs(velocityX) > Math.abs(velocityY)) {  
50.             deleteButton = LayoutInflater.from(getContext()).inflate(  
51.                     R.layout.delete_button, null);  
52.             deleteButton.setOnClickListener(new OnClickListener() {  
53.                 @Override  
54.                 public void onClick(View v) {  
55.                     itemLayout.removeView(deleteButton);  
56.                     deleteButton = null;  
57.                     isDeleteShown = false;  
58.                     listener.onDelete(selectedItem);  
59.                 }  
60.             });  
61.             itemLayout = (ViewGroup) getChildAt(selectedItem  
62.                     - getFirstVisiblePosition());  
63.             RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(  
64.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
65.             params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);  
66.             params.addRule(RelativeLayout.CENTER_VERTICAL);  
67.             itemLayout.addView(deleteButton, params);  
68.             isDeleteShown = true;  
69.         }  
70.         return false;  
71.     }  
72.   
73.     @Override  
74.     public boolean onSingleTapUp(MotionEvent e) {  
75.         return false;  
76.     }  
77.   
78.     @Override  
79.     public void onShowPress(MotionEvent e) {  
80.   
81.     }  
82.   
83.     @Override  
84.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
85.             float distanceY) {  
86.         return false;  
87.     }  
88.   
89.     @Override  
90.     public void onLongPress(MotionEvent e) {  
91.     }  
92.       
93.     public interface OnDeleteListener {  
94.   
95.         void onDelete(int index);  
96.   
97.     }  
98.   
99. }  

当手指按下时，会调用OnGestureListener的onDown()方法，在这里通过pointToPosition()方法来判断出当前选中的是ListView的哪一行。当手指快速滑动时，会调用onFling()方法，在这里会去加载delete_button.xml这个布局，然后将删除按钮添加到当前选中的那一行item上。注意，我们还给删除按钮添加了一个点击事件，当点击了删除按钮时就会回调onDeleteListener的onDelete()方法，在回调方法中应该去处理具体的删除操作。

好了，自定义View的功能到此就完成了，接下来我们需要看一下如何才能使用这个自定义View。首先需要创建一个ListView子项的布局文件，新建my_list_view_item.xml，代码如下所示：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:descendantFocusability="blocksDescendants"  
6.     android:orientation="vertical" >  
7.   
8.     <TextView  
9.         android:id="@+id/text_view"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="50dp"  
12.         android:layout_centerVertical="true"  
13.         android:gravity="left|center_vertical"  
14.         android:textColor="#000" />  
15.   
16. </RelativeLayout>  

[java] view plaincopy

1. public class MyAdapter extends ArrayAdapter<String> {  
2.   
3.     public MyAdapter(Context context, int textViewResourceId, List<String> objects) {  
4.         super(context, textViewResourceId, objects);  
5.     }  
6.   
7.     @Override  
8.     public View getView(int position, View convertView, ViewGroup parent) {  
9.         View view;  
10.         if (convertView == null) {  
11.             view = LayoutInflater.from(getContext()).inflate(R.layout.my_list_view_item, null);  
12.         } else {  
13.             view = convertView;  
14.         }  
15.         TextView textView = (TextView) view.findViewById(R.id.text_view);  
16.         textView.setText(getItem(position));  
17.         return view;  
18.     }  
19.   
20. }  

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.example.customview.MyListView  
7.         android:id="@+id/my_list_view"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content" >  
10.     </com.example.customview.MyListView>  
11.   
12. </RelativeLayout>  

[java] view plaincopy

1. public class MainActivity extends Activity {  
2.   
3.     private MyListView myListView;  
4.   
5.     private MyAdapter adapter;  
6.   
7.     private List<String> contentList = new ArrayList<String>();  
8.   
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
13.         setContentView(R.layout.activity_main);  
14.         initList();  
15.         myListView = (MyListView) findViewById(R.id.my_list_view);  
16.         myListView.setOnDeleteListener(new OnDeleteListener() {  
17.             @Override  
18.             public void onDelete(int index) {  
19.                 contentList.remove(index);  
20.                 adapter.notifyDataSetChanged();  
21.             }  
22.         });  
23.         adapter = new MyAdapter(this, 0, contentList);  
24.         myListView.setAdapter(adapter);  
25.     }  
26.   
27.     private void initList() {  
28.         contentList.add("Content Item 1");  
29.         contentList.add("Content Item 2");  
30.         contentList.add("Content Item 3");  
31.         contentList.add("Content Item 4");  
32.         contentList.add("Content Item 5");  
33.         contentList.add("Content Item 6");  
34.         contentList.add("Content Item 7");  
35.         contentList.add("Content Item 8");  
36.         contentList.add("Content Item 9");  
37.         contentList.add("Content Item 10");  
38.         contentList.add("Content Item 11");  
39.         contentList.add("Content Item 12");  
40.         contentList.add("Content Item 13");  
41.         contentList.add("Content Item 14");  
42.         contentList.add("Content Item 15");  
43.         contentList.add("Content Item 16");  
44.         contentList.add("Content Item 17");  
45.         contentList.add("Content Item 18");  
46.         contentList.add("Content Item 19");  
47.         contentList.add("Content Item 20");  
48.     }  
49.   
50. }