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">

	<ImageView
			android: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() {
			
			@Override
			public void onClick(View v) {
				ib1.setClickable(true);
				ib2.setClickable(false);
				Toast.makeText(getApplicationContext(), "you have cancel!", Toast.LENGTH_SHORT).show();
			}
        });
    }
}