Android创建新的视图(二)之创建复合控件

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

整个过程可以分四步走。第一步，定义一个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:orientation = "horizontal"      android:layout_width = "fill_parent"      android:layout_height = "fill_parent"      > < ImageView      android:layout_width = "wrap_content"      android:layout_height = "wrap_content"      android:id = "@+id/iv"      android:src = "@drawable/confirm"      android:paddingTop = "5dip"      android:paddingBottom = "5dip"      android:paddingLeft = "40dip"      android:layout_gravity = "center_vertical"      /> < TextView      android:layout_width = "wrap_content"      android:layout_height = "wrap_content"      android:text = "确定"      android:textColor = "#000000"      android:id = "@+id/tv"      android:layout_marginLeft = "8dip"      android:layout_gravity = "center_vertical"      /> </ LinearLayout >

这个xml实现一个左图右字的布局，接下来写一个类继承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 34 35 36 37 38 39 40 41 42

package com.notice.ib;   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 ImageBt extends LinearLayout {        private ImageView iv;      private TextView  tv;        public ImageBt(Context context) {          this (context, null );      }        public ImageBt(Context context, AttributeSet attrs) {          super (context, attrs);          // 导入布局          LayoutInflater.from(context).inflate(R.layout.custombt, 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中加入即可。方法如下：

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

< RelativeLayout           android:orientation = "horizontal"           android:layout_width = "fill_parent"           android:layout_height = "wrap_content"           android:layout_gravity = "bottom"           >           < com.notice.ib.ImageBt               android:id = "@+id/bt_confirm"               android:layout_height = "wrap_content"               android:layout_width = "wrap_content"               android:layout_alignParentBottom = "true"               android:background = "@drawable/btbg"               android:clickable = "true"               android:focusable = "true"               />           < com.notice.ib.ImageBt               android:id = "@+id/bt_cancel"               android:layout_toRightOf = "@id/bt_confirm"               android:layout_height = "wrap_content"               android:layout_width = "wrap_content"               android:layout_alignParentBottom = "true"               android:background = "@drawable/btbg"               android:clickable = "true"               android:focusable = "true"              />           </ RelativeLayout >

注意的是，控件标签使用完整的类名即可。为了给按钮一个点击效果，你需要给他一个selector背景，这里就不说了。

最后一步，即在activity中设置该控件的内容。当然，在xml中也可以设置，但是只能设置一个，当我们需要两次使用这样的控件，并且显示内容不 同时就不行了。在activity中设置也非常简单，我们在ImageBt这个类中已经写好了相应的方法，简单调用即可。代码如下：

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

public class MainActivity extends Activity {        private ImageBt ib1;      private ImageBt ib2;        /** Called when the activity is first created. */      @Override      public void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.login);            ib1 = (ImageBt) findViewById(R.id.bt_confirm);          ib2 = (ImageBt) findViewById(R.id.bt_cancel);            ib1.setTextViewText( "确定" );          ib1.setImageResource(R.drawable.confirm);          ib2.setTextViewText( "取消" );          ib2.setImageResource(R.drawable.cancel);           ib1.setOnClickListener(new View.OnClickListener() {             @Override         public void onClick(View v) {         // TODO Auto-generated method stub          Toast.makeText(getApplicationContext(), "确定",           Toast.LENGTH_SHORT).show();    }   });       } }

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