自定義控件實例(超詳細)

 首先定義一個layout實現按鈕內部佈局：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?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/imageView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_vertical"         android:paddingBottom="5dip"         android:paddingLeft="40dip"         android:paddingTop="5dip"         android:src="@drawable/right_icon" />       <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_vertical"         android:layout_marginLeft="8dip"         android:text="確定"         android:textColor="#000000" />   </LinearLayout>

        接下來寫一個類繼承LinearLayout，導入剛剛的佈局，並且設置需要的方法，從而使的能在代碼中控制這個自定義控件內容的顯示。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public class ImageBtn extends LinearLayout {       private ImageView imageView;     private TextView  textView;           public ImageBtn(Context context) {         super(context);         // TODO Auto-generated constructor stub     }     public ImageBtn(Context context, AttributeSet attrs) {         super(context, attrs);         // TODO Auto-generated constructor stub         LayoutInflater inflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);         inflater.inflate(R.layout.imagebtn, this);         imageView=(ImageView) findViewById(R.id.imageView1);         textView=(TextView)findViewById(R.id.textView1);     }           /**      * 設置圖片資源      */      public void setImageResource(int resId) {          imageView.setImageResource(resId);      }          /**      * 設置顯示的文字      */      public void setTextViewText(String text) {          textView.setText(text);      }    }

     在需要使用這個自定義控件的layout中加入這控件，只需要在xml中加入即可。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?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" >       <cn.com.karl.view.ImageBtn         android:id="@+id/btn_right"         android:layout_height="wrap_content"          android:layout_width="wrap_content"         android:background="@drawable/btn"          />       <cn.com.karl.view.ImageBtn         android:id="@+id/btn_error"         android:layout_marginLeft="5dp"         android:layout_height="wrap_content"          android:layout_width="wrap_content"         android:background="@drawable/btn"          />   </LinearLayout>

        這裏用到了背景圖片 在drawable/btn.xml

?

1 2 3 4 5 6 7 8 9

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" >       <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/btn_normal"></item>     <item android:state_pressed="true" android:drawable="@drawable/btn_white"></item>     <item android:state_checked="true" android:drawable="@drawable/btn_white"></item>     <item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/btn_normal"></item>       </selector>

 
最後在activity中設置該控件，和其他控件差不多：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public class IdentifyButtonActivity extends Activity {    private ImageBtn imageBtn1;    private ImageBtn imageBtn2;     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         setContentView(R.layout.identifybutton);                   imageBtn1=(ImageBtn) this.findViewById(R.id.btn_right);         imageBtn2=(ImageBtn) this.findViewById(R.id.btn_error);         imageBtn1.setTextViewText("確定");         imageBtn2.setTextViewText("取消");         imageBtn1.setImageResource(R.drawable.right_icon);         imageBtn2.setImageResource(R.drawable.error_icon);                   imageBtn1.setOnClickListener(new View.OnClickListener() {                           public void onClick(View v) {                 // TODO Auto-generated method stub                 Toast.makeText(getApplicationContext(), "點擊的正確按鈕", 1).show();             }         });                   imageBtn2.setOnClickListener(new View.OnClickListener() {                           public void onClick(View v) {                 // TODO Auto-generated method stub                 Toast.makeText(getApplicationContext(), "點擊的錯誤按鈕", 1).show();             }         });     } }

        最後看看我們自定義控件的效果吧！

     點擊後還有按下按鈕的效果。