android 自定义组合控件总结（两个Button点击切换）

 

 

也许看到样式后，有人说：这不是两个Button 吗？对，是两个Button没有错。实际情况中，这个Button 是有圆角的。就如左边一个一样。点击的效果就是，点击后，切换颜色，点击不同的按钮完成不同的功能。 这里不是讲单独的两个按钮组合，而是封装成一个自定义的组合控件，是一个整体。下面就开始讲组合控件的实现,重要的步骤与思想，实现举一反三，大致思想如下：
第一步：创建一个view_title_button.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 27 28 29 30 31 32

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      android:orientation= "vertical" >        <RelativeLayout          android:id= "@+id/rl_title_button"          android:layout_width= "match_parent"          android:layout_height= "wrap_content"          android:gravity= "center_horizontal" >            <Button              android:id= "@+id/btn_left"              android:layout_width= "140dp"              android:layout_height= "35dp"              android:layout_centerVertical= "true"              android:textColor= "@color/white"              android:background= "@drawable/left_button_click_shape"              android:text= "发布信息" />            <Button              android:id= "@+id/btn_right"              android:layout_width= "140dp"              android:layout_height= "35dp"              android:layout_centerVertical= "true"              android:textColor= "@color/kuaixiu_blue"              android:layout_toRightOf= "@+id/btn_left"              android:background= "@drawable/right_button_null_click_shape"              android:text= "查看发布" />      </RelativeLayout> </LinearLayout>

其中的left_button_click_shape与right_button_null_click_shape的样式代码如下。放在drawable 文件夹的下面：同样代码依次如下；

1 2 3 4 5 6 7 8 9

<?xml version= "1.0" encoding= "utf-8" ?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" >      <corners          android:bottomLeftRadius= "5dp"          android:bottomRightRadius= "0dp"          android:topLeftRadius= "5dp"          android:topRightRadius= "0dp" />      <solid android:color= "#157EFB" /> </shape>

第二个Xml文件内容：

1 2 3 4 5 6 7 8 9

<?xml version= "1.0" encoding= "utf-8" ?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" >      <corners          android:bottomLeftRadius= "0dp"          android:bottomRightRadius= "5dp"          android:topLeftRadius= "0dp"          android:topRightRadius= "5dp" />      <solid android:color= "#157EFB" /> </shape>

第二步：创建一个Java文件，TitleButton类。让这个类继承LinearLayout或者RelativeLayout 都行，然后实现其构造方法，一般三个。具体操作代码所示:

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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

public class TitleButton  extends LinearLayout {      private RelativeLayout mRlay;      private Button mLeft;      private Button mRight;      private OnLeftClickListener onLeftClickListener;      private OnRightClickListener onRightClickListener;      public TitleButton(Context context) {          super (context);          init();      }      public TitleButton(Context context, AttributeSet attrs) {          super (context, attrs);          init();      }      public TitleButton(Context context, AttributeSet attrs,  int defStyle) {          super (context, attrs, defStyle);          init();      }      public void init() {          View view = View.inflate(getContext(), R.layout.view_title_button,  this );          mLeft = (Button) view.findViewById(R.id.btn_left);          mRight = (Button) view.findViewById(R.id.btn_right);          mRlay = (RelativeLayout) view.findViewById(R.id.rl_title_button);            mLeft.setOnClickListener( new OnClickListener() {              @SuppressLint ( "NewApi" )              @Override              public void onClick(View v) {                  if (onLeftClickListener !=  null ) {                      onLeftClickListener.onLeftClickListener();                  }                  mRight.setBackground(getResources().getDrawable(R.drawable.right_button_null_click_shape));                  mRight.setTextColor(getResources().getColor(R.color.kuaixiu_blue));                  mLeft.setBackground(getResources().getDrawable(R.drawable.left_button_click_shape));                  mLeft.setTextColor(getResources().getColor(R.color.white));                }          });          mRight.setOnClickListener( new OnClickListener() {              @SuppressLint ( "NewApi" )              @Override              public void onClick(View v) {                  if (onRightClickListener !=  null ) {                      onRightClickListener.onRightClickListener();                  }                  mLeft.setBackground(getResources().getDrawable(R.drawable.left_button_no_click_shape));                  mLeft.setTextColor(getResources().getColor(R.color.kuaixiu_blue));                  mRight.setBackground(getResources().getDrawable(R.drawable.right_button_click_shape));                  mRight.setTextColor(getResources().getColor(R.color.white));              }          });      }      public Button getLeftButton() {          return mLeft;      }      public Button getRightButton() {          return mRight;      }      /**       * 返回左边按钮点击回调       *       */      public interface OnLeftClickListener {          public void onLeftClickListener();      }      /**       * 返回右边按钮点击回调       *       */      public interface OnRightClickListener {          public void onRightClickListener();      }     //回调接口      public void setOnLeftClickListener(OnLeftClickListener onLeftClickListener) {          this .onLeftClickListener = onLeftClickListener;      }        public void setOnRightClickListener(              OnRightClickListener onRightClickListener) {          this .onRightClickListener = onRightClickListener;      } }

如上代码:逐步解释，首先三个构造方法，一般直接覆写即可，没有特殊要求，但需要注意的是，下面的 init() 方法一定要在每个构造方法里调用。否则页面加载不出来。
下面就讲解 init() 的方法，

1	View view = View.inflate(getContext(), R.layout.view_title_button,  this );

这行代码需要注意的地方是： 传入的参数 ：最后一个参数，一定是 this而不是null，要不布局也是加载不出来的。视图加载出来以后，则是控件，与布局的实例化，并且为其添加对应的点击事件。没有什么可说的，点击事件里面，就是按钮背景与字体颜色的改变。
如果你想实现，简单的切换，变色的效果，简单的点击事件的话，代码写到这，也就够了。但是实际情况中，我们点击按钮不可能只是颜色背景的改变，而是请求服务器啊，做一些Ui的操作啊。这就需要想别的办法了。
下面讲到的是，如何将左右两个按钮的点击事件暴露到Activity里面，从而实现主要的功能。
在最前面的时候，会发现，我们定义了两个响应事件

1 2	private OnLeftClickListener onLeftClickListener; private OnRightClickListener onRightClickListener;

并为其创建set方法，同时创建左右按钮点击事件对应的接口。

1 2 3 4 5 6 7 8 9 10 11 12

/**   * 返回左边按钮点击回调   */ public interface OnLeftClickListener {      public void onLeftClickListener(); } /**   * 返回右边按钮点击回调   */ public interface OnRightClickListener {      public void onRightClickListener(); }

同时在左右按钮的点击事件里，将此接口调用，就能在外面实现点击事件的方法了。这个自定义组合控件到此就结束了。那么怎么使用呢。
首先说在布局文件里面：

1 2 3 4 5 6

<cn.zmit.customelayout.widget.TitleButton      android:id= "@+id/btn"      android:layout_width= "match_parent"      android:layout_height= "wrap_content"      android:layout_marginTop= "20dp" > </cn.zmit.customelayout.widget.TitleButton>

就是所在的包名，加类名。在activity里面，这样使用，直接加载布局，实例化

1 2	private TitleButton mTBtn; mTBtn = (TitleButton) findViewById(R.id.btn);

要想实现点击操作事件则这样使用即可:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

mTBtn.setOnLeftClickListener( new OnLeftClickListener() {                @Override              public void onLeftClickListener() {                  Toast.makeText(EditTextActivity. this ,  "左边" ,  0 ).show();                }          });          mTBtn.setOnRightClickListener( new OnRightClickListener() {                @Override              public void onRightClickListener() {                  Toast.makeText(EditTextActivity. this ,  "右边" ,  0 ).show();                }          });

这就是连个按钮的点击事件，以上的自定义组合控件大概就是这样了。因为项目需要多次使用这样的控件，就封装了一整的，直接调用即可。也讲完了，大致思路，理一下，就是：首先创建想要封装的布局文件，然后继承类中，进行简单的点击效果的实现，或者更为复杂的效果也行，最后将要点击的控件，用接口，回调机制。实现就可以了。希望同学举一反三。自定义需要的复合控件。

本文永久地址：http://blog.it985.com/11945.html
本文出自 IT985博客 ，转载时请注明出处及相应链接。