android UI进阶之自定义组合控件之一

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

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

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

<?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"><ImageViewandroid:id="@+id/iv"  android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/icon"    android:paddingTop="5dip"    android:paddingBottom="5dip"    android:paddingLeft="40dip"    android:layout_gravity="center_vertical"/>        <TextView    android:id="@+id/tv"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textColor="#00FF00"    android:layout_marginLeft="8dip"    android:layout_gravity="center_vertical"    /></LinearLayout>

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

package com.sada.compare.ui;import com.sx.allwidget.R;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中加入即可。方法如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"         android:orientation="horizontal"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="bottom"         >         <com.sada.compare.ui.ImageBt             android:id="@+id/bt_confirm"             android:layout_height="wrap_content"             android:layout_width="wrap_content"             android:layout_alignParentBottom="true"             android:clickable="true"             android:focusable="true"             android:background="@drawable/background"             />         <com.sada.compare.ui.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:clickable="true"             android:focusable="true"             android:background="@drawable/backgroundc"            />         </RelativeLayout>

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

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

package com.sada.compare.ui;import com.sx.allwidget.R;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;import android.widget.Toast;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.newmain);        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);        ib2.setClickable(false);        ib1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {            ib2.setClickable(true);            ib1.setClickable(false);                    //在这里可以实现点击事件            Toast.makeText(getApplicationContext(), "you have cofirm!",          Toast.LENGTH_SHORT).show();            }        });                ib2.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {ib1.setClickable(true);ib2.setClickable(false);Toast.makeText(getApplicationContext(), "you have cancel!", Toast.LENGTH_SHORT).show();}        });    }}