自定义UI控件

　　很多时候android自定义控件并不能满足需求，如何做呢？很多方法，可以自己绘制一个，可以通过继承基础控件来重写某些环节，当然也可以将控件组合成一个新控件，这也是最方便的一个方法。

那么最好的方式去创建一个新的控件是什么？  这主要取决你想要完成什么。

1、组合控件，就是通过合并几个控件的功能来生成一个控件；

2、有些基本功能原生控件都能提供，所以这个时候你只需要继承并对控件进行扩展。通过重写它的事件，onDraw,但是始终都保持都父类方法的调用；

3、完完整整创建一个新的控件。

一、组合控件

　　这里将用两个例子来介绍。

　　例1：

　　第一个例子实现一个带图片和文字的按钮，如图所示：

　　

　　整个过程可以分四步走。第一步，定义一个layout，实现按钮内部的布局。代码如下：

　　custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingBottom="10.0dip"
        android:paddingLeft="10.0dip"
        android:paddingTop="10.0dip" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dip"
        android:paddingBottom="10.0dip"
        android:paddingLeft="5.0dip"
        android:paddingRight="10.0dip"
        android:paddingTop="10.0dip"
        android:textColor="#ffffff"
        android:textSize="18.0sp" />

</LinearLayout>

　　 接下来写一个类继承LinearLayout，导入刚刚的布局，并且设置需要的方法，从而使的能在代码中控制这个自定义控件内容的显示。代码如下：

　　CustomButton.java

package com.plusjun.android11;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomButton extends LinearLayout{

	private ImageView iv;
	private TextView tv;

	//重写构造方法
	public CustomButton(Context context, AttributeSet attrs){
		super(context, attrs);
		// 导入布局并实例化
		LayoutInflater.from(context).inflate(R.layout.custom_button, this, true);

		iv = (ImageView) findViewById(R.id.iv);
		tv = (TextView) findViewById(R.id.tv);
	}

	//设置图片资源
	public void setImageResource(int resId){
		iv.setImageResource(resId);
	}

	//设置显示的文字
	public void setTextViewText(String text){
		tv.setText(text);
	}
}

　　第三步，在需要使用这个自定义控件的layout中加入这控件，只需要在xml中加入即可。方法如下：
　　acivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 控件名即为完整类名 -->

    <com.plusjun.android11.CustomButton
        android:id="@+id/bt_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.plusjun.android11.CustomButton
        android:id="@+id/bt_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

　　注意的是，控件标签需使用完整的类名。最后一步，即在activity中设置该控件的内容。在activity中设置也非常简单，我们在CustomButton这个类中已经写好了相应的方法，简单调用即可。代码如下：

　　MainActivity.java

package com.plusjun.android11;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity{
	private CustomButton btnConfirm;
	private CustomButton btnCancel;

	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		btnConfirm = (CustomButton) findViewById(R.id.bt_confirm);
		btnCancel = (CustomButton) findViewById(R.id.bt_cancel);
		
		btnConfirm.setTextViewText("确定");
		btnConfirm.setImageResource(R.drawable.yes);
		btnCancel.setTextViewText("取消");
		btnCancel.setImageResource(R.drawable.no);
		
		btnConfirm.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				//实现点击事件
			}
		});
		btnCancel.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				//实现点击事件
			}
		});
	}
}

　　这样，一个带文字和图片的组合按钮控件就完成了。这样梳理一下，使用还是非常简单的。组合控件能做的事还非常多，主要是在类似上例中的CustomButton类中写好要使用的方法即可。

　　例2：
　　再来看一个组合控件，带删除按钮的EidtText。即在用户输入后，会出现删除按钮，点击即可取消用户输入。效果图如下：

　　
　　定义方法和上例一样。首先写一个自定义控件的布局：
　　custom_editview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <EditText
        android:id="@+id/et"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:singleLine="true" />

    <!-- 下面的background="#00000000"代表背景无色（透明） -->
    <!-- layout_alignRight="@+id/et"代表该控件的右端紧靠"@+id/et"的右端 -->
    <!-- android:visibility="gone"代表该控件不可见-->

    <ImageButton
        android:id="@+id/ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/et"
        android:background="#00000000"
        android:src="@drawable/no"
        android:visibility="gone" />

</RelativeLayout>

　　实现输入框右侧带按钮效果，注意将按钮隐藏。然后写一个CustomEditView类，实现删除用户输入功能。这里用到了TextWatcher这个接口，监听输入框中的文字变化。使用也很简单，实现他的三个方法即可。看代码：
　　CustomEditView.java

package com.plusjun.android22;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class CustomEditView extends LinearLayout {
	ImageButton ib;
	EditText et;
	/* 当输入框状态改变时，会调用TextWatcher里相应的方法
	 * TextWatcher是一个接口，因此里面的所有方法都要实现
	 */
	TextWatcher tw = new TextWatcher(){

		@Override
		public void onTextChanged(CharSequence s, int start, int before, int count){
			// TODO Auto-generated method stub
		}

		@Override
		public void beforeTextChanged(CharSequence s, int start, int count, int after){
			// TODO Auto-generated method stub
		}
		
		// 在文字改变后调用
		@Override
		public void afterTextChanged(Editable s){
			if (s.length() == 0){
				ib.setVisibility(View.GONE);// 设置按钮不可见
			} else{
				ib.setVisibility(View.VISIBLE);// 设置按钮可见
			}
		}
	};

	//重写构造方法
	public CustomEditView(Context context, AttributeSet attrs){
		super(context, attrs);
		//获取视图并实例化
		LayoutInflater.from(context).inflate(R.layout.custom_editview, this, true);
		init();
	}

	//注意init()方法是自行构造的，不是继承的
	private void init() {
		ib = (ImageButton) findViewById(R.id.ib);
		et = (EditText) findViewById(R.id.et);

		// 为输入框绑定一个监听文字变化的监听器
		et.addTextChangedListener(tw);
		// 添加按钮点击事件
		ib.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				ib.setVisibility(View.GONE);// 设置按钮不可见
				et.setText("");// 设置输入框内容为空
			}
		});
	}
}

　　在TextWatch接口的afterTextChanged方法中对文字进行判断，若长度为0，就隐藏按钮，否则，显示按钮。每修改一次文字的字符，都会调用该方法。
　　另外，实现ImageButton（即那个叉）的点击事件，删除输入框中的内容，并隐藏按钮。
　　后面两步的实现就是加入到实际布局中:
　　activity_main.xml

<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" >

    <!-- 控件名即为完整类名 -->

    <com.plusjun.android22.CustomEditView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

　　MainActivity.java

package com.plusjun.android22;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

以上部分内容转载或参考来源如下：

http://www.92coding.com/blog/index.php/archives/143.html#

http://my.oschina.net/wangjunhe/blog/99764

在此表示感谢。
转载请注明来源，版权归原作者所有，未经同意严禁用于任何商业用途。
微博：http://weibo.com/theworldsong
邮箱：theworldsong@foxmail.com