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>