Android自訂控制項

今天和大家分享下群組控制項的使用。很多時候android自訂控制項並不能滿足需求，如何做呢？很多方法，可以自己繪製一個，可以通過繼承基礎控制項來重寫某些環節，當然也可以將控制群組合成一個新控制項，這也是最方便的一個方法。今天就來介紹下如何使用群組控制項，將通過兩個執行個體來介紹。第一個實現一個帶圖片和文字的按鈕，：整個過程可以分四步走。第一步，定義一個layout，實現按鈕內部的布局。代碼如下：custom_button.xml<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android"     android:orientation="horizontal"     android:layout_width="fill_parent"     android:layout_height="fill_parent"    >  <ImageView   android:id="@+id/iv"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_gravity="center_vertical"     android:paddingLeft="10.0dip"     android:paddingTop="10.0dip"     android:paddingBottom="10.0dip"     />  <TextView   android:id="@+id/tv"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:textColor="#ffffff"      android:layout_marginLeft="8dip"      android:layout_gravity="center_vertical"      android:paddingLeft="5.0dip"     android:paddingTop="10.0dip"     android:paddingBottom="10.0dip"     android:paddingRight="10.0dip"     android:textSize="18.0sp"     /> </LinearLayout>這個xml實現一個左圖右字的布局，接下來寫一個類繼承LinearLayout，匯入剛剛的布局，並且設定需要的方法，從而使的能在代碼中控制這個自訂控制項內容的顯示。代碼如下：CustomButton.javapackage com.szy.customview; import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView; /** *@author coolszy *@date 2011-12-20 *@blog http://blog.92coding.com/ */public class CustomButton extends LinearLayout{  private ImageView iv; private TextView tv;  public CustomButton(Context context) {  this(context, null); }  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中加入即可。方法如下：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.szy.customview.CustomButton     android:id="@+id/bt_confirm"      android:layout_width="wrap_content"     android:layout_height="wrap_content"      android:background="@drawable/button_bg"      />  <com.szy.customview.CustomButton     android:id="@+id/bt_cancel"      android:layout_width="wrap_content"     android:layout_height="wrap_content"      android:background="@drawable/button_bg"     /> </LinearLayout>注意的是，控制項標籤使用完整的類名即可。為了給按鈕一個點擊效果，你需要給他一個selector背景，這裡就不說了。最後一步，即在activity中設定該控制項的內容。當然，在xml中也可以設定，但是只能設定一個，當我們需要兩次使用這樣的控制項，並且顯示內容不同時就不行了。在activity中設定也非常簡單，我們在CustomButton這個類中已經寫好了相應的方法，簡單調用即可。代碼如下：package com.szy.customview; 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.main);  btnConfirm = (CustomButton) findViewById(R.id.bt_confirm);  btnCancel = (CustomButton) findViewById(R.id.bt_cancel);   btnConfirm.setTextViewText("確定");  btnConfirm.setImageResource(R.drawable.confirm);  btnCancel.setTextViewText("取消");  btnCancel.setImageResource(R.drawable.cancel);   btnConfirm.setOnClickListener(new OnClickListener()  {   @Override   public void onClick(View v)   {    // 在這裡可以實現點擊事件   }  }); }}這樣，一個帶文字和圖片的組合按鈕控制項就完成了。這樣梳理一下，使用還是非常簡單的。群組控制項能做的事還非常多，主要是在類似上例中的CustomButton類中寫好要使用的方法即可。再來看一個群組控制項，帶刪除按鈕的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"      />  <ImageButton      android:id="@+id/ib"      android:visibility="gone"      android:src="@drawable/cancel"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:background="#00000000"      android:layout_alignRight="@+id/et" /> </RelativeLayout>實現輸入框右側帶按鈕效果，注意將按鈕隱藏。然後寫一個CustomEditView類，實現刪除使用者輸入功能。這裡用到了TextWatch這個介面，監聽輸入框中的文字變化。使用也很簡單，實現他的三個方法即可。看代碼：CustomEditView.javapackage com.szy.customview; 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; /** *@author coolszy *@date 2011-12-20 *@blog http://blog.92coding.com/ */public class CustomEditView extends LinearLayout implements EdtInterface{ ImageButton ib; EditText et;  public CustomEditView(Context context) {  super(context);  } public CustomEditView(Context context, AttributeSet attrs) {  super(context, attrs);  LayoutInflater.from(context).inflate(R.layout.custom_editview, this, true);  init();  } private void init() {  ib = (ImageButton) findViewById(R.id.ib);  et = (EditText) findViewById(R.id.et);  et.addTextChangedListener(tw);// 為輸入框綁定一個監聽文字變化的監聽器  // 添加按鈕點擊事件  ib.setOnClickListener(new OnClickListener()  {   @Override   public void onClick(View v)   {    hideBtn();// 隱藏按鈕    et.setText("");// 設定輸入框內容為空白   }  });  } // 當輸入框狀態改變時，會調用相應的方法 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)   {    hideBtn();// 隱藏按鈕   } else   {    showBtn();// 顯示按鈕   }  } };  @Override public void hideBtn() {  // 設定按鈕不可見  if (ib.isShown())   ib.setVisibility(View.GONE);  }  @Override public void showBtn() {  // 設定按鈕可見  if (!ib.isShown())  {   ib.setVisibility(View.VISIBLE);  } }} interface EdtInterface{ public void hideBtn(); public void showBtn();}在TextWatch介面的afterTextChanged方法中對文字進行判斷，若長度為0，就隱藏按鈕，否則，顯示按鈕。另外，實現ImageButton（即那個叉）的點擊事件，刪除輸入框中的內容，並隱藏按鈕。後面兩步的實現就是加入到實際布局中: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.szy.customview.CustomEditView  android:layout_width="fill_parent"     android:layout_height="wrap_content"     /></LinearLayout>