#安卓杂记（七）：自定义控件及属性获取

平日里喜欢阅读网易云阅读客户端的资讯，对订阅版块的设计甚是喜爱，就想琢磨着如何实现类似于卡片式的文件夹的样式：

显然，安卓里没有自带的这样的控件。有人一定会问，每个卡片无非就是个LinearLayout或RelativeLayout啊。的确没错。如果用RelativeLayout写的话，许是这样的罢：

<RelativeLayout 
            android:id="@+id/news01"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="2dp"
            android:background="@color/white"
            android:clickable="true"
            android:layout_weight="1">

            <ImageView 
                android:contentDescription="@string/news_image"
                android:src="@drawable/news01"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_centerInParent="true"/>

            <TextView 
                android:layout_centerHorizontal="true"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="10dp"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="国内"/>

 </RelativeLayout> 

嗯，确实没错，可是十个RelativeLayout一起叠加下去，不仅代码冗余难读，而且不易维护。再者，如果我们要在这个Layout上加个Listener呢，莫非也要一个一个加？显然不成。由此，自定义控件就变得格外有意义。

一、定义xml样式

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/news_card"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:focusable="true"
            android:clickable="true"
            android:background="@color/white">

            <ImageView 
                android:id="@+id/card_image"
                android:src="@drawable/news02"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_centerInParent="true"/>

            <TextView 
                android:id="@+id/card_text"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/card_image"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="card_name"/>

        </RelativeLayout>

我们期待的样子是这样嘀：

二、定义attrs.xml文件

定义自定义控件属性需要在res/values文件下定义一个attrs.xml文件，以布局文件可以调用定义属性：

<?xml version="1.0" encoding="utf-8"?>
    <resources >
        <declare-styleable name="newsCard">
            <attr name="card_id" format="integer"/>
            <attr name="text" format="string"/>
            <attr name="src" format="reference"/>
        </declare-styleable>
    </resources> 

其中，中的format有以下几种格式：
string , integer , dimension , reference , color , enum
reference指资源引用。

三、布局文件中使用控件属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.courseexamplev2"
    android:id="@+id/news_layout"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

   <LinearLayout 
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/background_blue"
        android:orientation="horizontal">

       <com.example.courseexamplev2.NewsCard
           android:id="@+id/card01"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="1"
           app:text="国内"
           app:src="@drawable/news01">

       </com.example.courseexamplev2.NewsCard>

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card02"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="2"
           app:text="国际"
           app:src="@drawable/news02">  
       </com.example.courseexamplev2.NewsCard>

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card03"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_marginRight="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="3"
           app:text="社会"
           app:src="@drawable/news03"> 
       </com.example.courseexamplev2.NewsCard>

    </LinearLayout>

    <LinearLayout 
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/background_blue"
        android:orientation="horizontal">

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card04"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="4"
           app:text="财经"
           app:src="@drawable/news04">  
       </com.example.courseexamplev2.NewsCard>

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card05"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="5"
           app:text="体育"
           app:src="@drawable/news05">  
       </com.example.courseexamplev2.NewsCard>

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card06"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_marginRight="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="6"
           app:text="科技"
           app:src="@drawable/news06">  
       </com.example.courseexamplev2.NewsCard>

    </LinearLayout>

    <LinearLayout 
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/background_blue"
        android:orientation="horizontal">

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card07"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="7"
           app:text="播客"
           app:src="@drawable/news07">
        </com.example.courseexamplev2.NewsCard>

        <com.example.courseexamplev2.NewsCard
           android:id="@+id/card08"
           android:layout_width="0dp"
           android:layout_marginTop="2dp"
           android:layout_marginLeft="2dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           app:card_id="8"
           app:text="股市"
           app:src="@drawable/news08">
        </com.example.courseexamplev2.NewsCard>

         <RelativeLayout
             android:id="@+id/news09"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_marginTop="2dp"
             android:layout_marginLeft="2dp"
             android:layout_marginRight="2dp"
             android:background="@color/white"
             android:layout_weight="1" >

            <ImageView 
                android:src="@drawable/icon_add"
                android:contentDescription="@string/news_image"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_centerInParent="true"/>

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/background_blue"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <RelativeLayout
            android:id="@+id/news10"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/white"
            android:layout_weight="1" >

            <ImageView 
                android:src="@drawable/icon_add"
                android:contentDescription="@string/news_image"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_centerInParent="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/news11"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/white"
            android:layout_weight="1" >

            <ImageView 
                android:src="@drawable/icon_add"
                android:contentDescription="@string/news_image"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_centerInParent="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/news12"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="@color/white"
            android:layout_weight="1" >

            <ImageView 
                android:src="@drawable/icon_add"
                android:contentDescription="@string/news_image"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
  android:layout_centerInParent="true"/>
        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

注意，
必须在表头注明命名空间：xmlns:app=http://schemas.android.com/apk/res/com.example.courseexamplev2

四、自定义控件的类

package com.example.courseexamplev2;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class NewsCard extends RelativeLayout{ 
//  private RelativeLayout layout;
    private ImageView cardView;
    private TextView cardText;
    private String text;
    private Drawable src;
    int cardId;

    public NewsCard(Context context) {
        super(context);
    }

    public NewsCard(Context context, AttributeSet attrs) {  
        super(context, attrs);  
  //在构造函数中将Xml中定义的布局解析出来。
        LayoutInflater.from(context).inflate(R.layout.news_card, this, true);

        cardView = (ImageView)findViewById(R.id.card_image);
        cardText = (TextView)findViewById(R.id.card_text);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.newsCard);  

        text = a.getString(R.styleable.newsCard_text);
            if(text != null)
                cardText.setText(text);

        src = a.getDrawable(R.styleable.newsCard_src);
            if(src != null)
                cardView.setImageDrawable(src);

        cardId = a.getInt(R.styleable.newsCard_card_id, 0);

        a.recycle();

   }  

    public void setImageResource(int resId){
        cardView.setImageResource(resId);
    }
    public void setTextViewText(String text){
        cardText.setText(text);
    }

 }

在自定义控件的构造方法中，利用：

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.newsCard);  

来获取自定义控件的属性集合，这样就可以利用a调用各种属性了。
当然，为了简便，我没有在示例中添加点击事件。来看看最终效果吧：