Android自定义控件实现

0 摘要

本文的自定义控件模仿微信的选项条，提供IMAGE/TEXT/MODE属性:

• IMAGE 控制选项条的图标，如果不设置就没有图标；
• TEXT 控制选项条上的文字；
• MODE 控制选项条的背景图案（按理来说，margintop也应该由MODE来控制，由于涉及到另外的接口，所以在本文中没有涉及）

1 定义自定义控件的属性

value/attrs.xml

<resources>

    <declare-styleable name="ControlOption">
        <attr name="Text" format="reference|string"></attr>
        <attr name="Img" format="reference|integer"></attr>
        <attr name="Mode" >
            <enum name="Standalone" value="0"></enum>
            <enum name="Top" value="1"></enum>
            <enum name="Middle" value="2"></enum>
            <enum name="Bottom" value="3"></enum>
        </attr>
    </declare-styleable>

</resources>

2 定义自定义控件布局

layout/control_option.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"                    
        android:scaleType="matrix"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:src="@drawable/find_more_friend_shake" />    
    <TextView
        android:id="@+id/text"
        android:layout_toRightOf="@id/image"
        android:padding="8dp" 
        android:text="default"
        android:textSize="17sp"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textColor="#000" /> 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"                    
        android:scaleType="matrix"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/mm_submenu" />                       
</RelativeLayout>

3 实现自定义空间类

src/ControlOption.java

public class ControlOption extends RelativeLayout {
	private static int SRC_BG[] = {
		R.drawable.preference_single_item,
		R.drawable.preference_first_item,
		R.drawable.preference_item,
		R.drawable.preference_last_item,
	};
	
	private ImageView mImage;
	private TextView mText;
	
	public ControlOption(Context context, AttributeSet attrs) {
		super(context,attrs);
		LayoutInflater.from(context).inflate(R.layout.control_option, this, true);  
        
		mImage = (ImageView)findViewById(R.id.image);
        mImage.setVisibility(GONE);
		mText = (TextView)findViewById(R.id.text);
        
        int resourceId = -1;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ControlOption);
        
        int N = typedArray.getIndexCount();
        for (int i = 0; i < N; i++) {
            int attr = typedArray.getIndex(i);
            
            switch (attr) {
	            case R.styleable.ControlOption_Mode:
	                resourceId = typedArray.getInt(R.styleable.ControlOption_Mode, 0);
	                this.setBackgroundResource(SRC_BG[resourceId]);
	                break;
	            case R.styleable.ControlOption_Text:
	                resourceId = typedArray.getResourceId(R.styleable.ControlOption_Text, 0);
	                mText.setText(resourceId > 0 ? 
	                		typedArray.getResources().getText(resourceId) : 
		        			typedArray.getString(R.styleable.ControlOption_Text));
	                break;
	            case R.styleable.ControlOption_Img:
	                resourceId = typedArray.getResourceId(R.styleable.ControlOption_Img, 0);
	                if(resourceId>0) {
		                mImage.setVisibility(VISIBLE);
		                mImage.setImageResource(resourceId);
	                }
	                break;   
            }
        }
        
        typedArray.recycle();
    }
	
};

4 引用自定义控件

	        <com.shiningstone.myweixin.ControlOption style="@style/option_top"
	            local:Text="个人信息" local:Mode="Top" />
		<com.shiningstone.myweixin.ControlOption  style="@style/option"
		    local:Text="二维码名片" local:Mode="Middle" />
		<com.shiningstone.myweixin.ControlOption  style="@style/option"
		    local:Text="腾讯微博" local:Mode="Bottom" />
			

为了方便起见，增加了style定义，对于自定义控件实现是非必须的。

value/styles.xml

    <style name="option">
        <item name="android:layout_height">wrap_content</item>       
        <item name="android:layout_width">fill_parent</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:clickable">true</item>
    </style>

    <style name="option_top" parent="@style/option">
        <item name="android:layout_marginTop">14dp</item>
    </style>