Android 自定義標籤 和 自定義組件

1    自定義標籤

這是我的模板項目目錄

 

 

既然想像 android:text  那樣使用自己的標籤，那麼首先得有標籤。

在 res/values/ 下我新建了個 mm_tag.xml (切記不可出現大寫，只能是 小寫字母、數字、下劃線)

第一步:    自定義 標籤    

mm_tag.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="GridItem">
        <attr name="bkground" format="reference|color"/>
        <attr name="text1"    format="string"/>
        <attr name="text2"    format="string"/>
        <attr name="image"    format="reference|integer"/>
    </declare-styleable>
</resources>

format 參考:

1. reference：參考某一資源ID

2. color：顏色值

3. boolean：布爾值

4. dimension：尺寸值

5. float：浮點值

6. integer：整型值

7. string：字符串

8. fraction：百分數

9. enum：枚舉值

//屬性定義：
< declare -styleable name = "名稱" >
    <attr name = "orientation" >
        <enum name = "horizontal" value = "0" />
        <enum name = "vertical" value = "1" />
    </attr>
</ declare -styleable>

//屬性使用：
<LinearLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent"
>
</LinearLayout>

10. flag：位或運算

//屬性定義：
< declare -styleable name = "名稱" >
    <attr name = "windowSoftInputMode" >
        <flag name = "stateUnspecified" value = "0" />
        <flag name = "stateUnchanged" value = "1" />
        <flag name = "stateHidden" value = "2" />
    </attr>
</ declare -styleable>

//屬性使用：
<activity
    android: name = ".StyleAndThemeActivity"
    android:label = "@string/app_name"
    android:windowSoftInputMode = "stateUnspecified | stateUnchanged　|　stateHidden" >
    <intent-filter>
        < action android: name = "android.intent.action.MAIN" />
        <category android: name = "android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

11.注意：屬性定義時可以指定多種類型值。

//屬性定義：
< declare -styleable name = "名稱" >
    <attr name = "background" format = "reference|color" />
</ declare -styleable>

//屬性使用：
<ImageView
    android:layout_width = "42dip"
    android:layout_height = "42dip"
    android: background = "@drawable/圖片ID|#00FF00" />

第二步:    在自定義組件中獲得標籤傳回的數據

比如我們在佈局中使用自定義組件 GridItem:

首先 聲明好 標籤的命名空間

xmlns:griditem = "http://schemas.android.com/apk/res/com.mm.template"
//對比下 android 的命名空間:
xmlns:android = "http://schemas.android.com/apk/res/android"

發現只有 res/後面的不同，com.mm.template 是我的應用程序包名，通過上文中的 項目目錄圖片可以看出來，

griditem 是我隨便想的一個命名空間的名字。

接下來就是使用自定義組件

< com.mm.template.GridItem
     griditem:image = "@drawable/mm_1"
     android:padding = "5dp"
     android:layout_width = "wrap_content"
     android:layout_height = "wrap_content"
     android:layout_weight = "1"
     griditem:bkground = "@color/orange"
     griditem:text1 = "Android"       griditem:text2 = "手機開發" />

其中 用到了我們的自定義標籤：

griditem:image = "@drawable/mm_1"
griditem:bkground = "@color/orange"
griditem:text1 = "Android"
griditem:text2 = "手機開發"

怎麼獲取標籤傳回的數據呢呢？

在自定義組件 GridItem 的實現代碼中使用如下方法即可

public GridItem(Context context, AttributeSet attrs) {
    super(context, attrs);

    TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);

    bk_color =typedarray.getResourceId(R.styleable.GridItem_bkground, R.color.burlywood);
    text1 =typedarray.getString(R.styleable.GridItem_text1);
    text2 =typedarray.getString(R.styleable.GridItem_text2);
    image=typedarray.getDrawable(R.styleable.GridItem_image);

    typedarray.recycle();

    view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);

    layout=(LinearLayout)view.findViewById(R.id.item_layout);
    textview1=(TextView)view.findViewById(R.id.text1);
    textview2=(TextView)view.findViewById(R.id.text2);
    imageview=(ImageView)view.findViewById(R.id.imageview);

    layout.setBackgroundResource(bk_color); //設置背景色
    textview1.setText(text1);               //設置第一行文字
    textview2.setText(text2);               //設置第二行文字
    imageview.setImageDrawable(image);      //設置圖標
}

即可獲得 我們自定義標籤傳過來的數據，並且正確的在界面中顯示出來。

下面我將結合自定義 組件 GridItem 來一起講。

2    自定義組件

我想實現一個組件，類似於這樣的

 

 

方法有很多種，自定義佈局即可，現在我想讓它以組件的形式在 佈局中直接 像 TextView 一樣使用，

那麼就用到自定義組件。

下面我將實現一個自定義組件 GridItem 實現。

 

一般都是繼承於 Layout（我用繼承於View時出現問題 ~~!）

GridItem.java

package com.mm.template;

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

public class GridItem extends LinearLayout {

    private int bk_color;   //背景色
    private String text1;   //第一行文字
    private String text2;   //第二行文字
    private Drawable image; //圖標

    private LinearLayout layout;
    private TextView textview1;
    private TextView textview2;
    private ImageView imageview;

    private View view;

    public GridItem(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);

        bk_color =typedarray.getResourceId(R.styleable.GridItem_bkground, R.color.burlywood);
        text1 =typedarray.getString(R.styleable.GridItem_text1);
        text2 =typedarray.getString(R.styleable.GridItem_text2);
        image=typedarray.getDrawable(R.styleable.GridItem_image);

        typedarray.recycle();

        view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);

        layout=(LinearLayout)view.findViewById(R.id.item_layout);
        textview1=(TextView)view.findViewById(R.id.text1);
        textview2=(TextView)view.findViewById(R.id.text2);
        imageview=(ImageView)view.findViewById(R.id.imageview);

        layout.setBackgroundResource(bk_color); //設置背景色
        textview1.setText(text1);               //設置第一行文字
        textview2.setText(text2);               //設置第二行文字
        imageview.setImageDrawable(image);      //設置圖標
    }

}

這個自定義組件 GridItem 用到的佈局文件

mm_grid_item.xml

<? xml   version = "1.0"    encoding = "utf-8" ?>
< LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"
     xmlns:tools = "http://schemas.android.com/tools"
     android: id = "@+id/item_layout"
     android:layout_width = "match_parent"
     android:layout_height = "match_parent"
     android:orientation = "vertical"
     android: background = "@color/black"
     android:padding = "3dp"
     android:paddingLeft = "6dp"
     tools:ignore = "HardcodedText,ContentDescription"    >
     < TextView
         android: id = "@+id/text1"
         android:layout_weight = "1"
          style = "@style/MM_TextView" />
     < TextView
         android: id = "@+id/text2"
         android:layout_weight = "1"
         android:textSize = "12sp"
          style = "@style/MM_TextView" />
     < ImageView
         android: id = "@+id/imageview"
         android:layout_width = "wrap_content"
         android:layout_height = "0dp"
         android:layout_gravity = "right"
         android: src = "@drawable/mm_title_1"
         android:layout_weight = "2"
         android:layout_marginTop = "10dp"
         android:scaleType = "fitCenter" />

      <!--圖片縮放
        android:scaleX="0.8"
        android:scaleY="0.8" --> </ LinearLayout >

3    使用方法

在 main_layout.xml (我的主佈局文件)中使用

< LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"
     xmlns:tools = "http://schemas.android.com/tools"
     xmlns:griditem = "http://schemas.android.com/apk/res/com.mm.template"
     android:layout_width = "match_parent"
     android:layout_height = "match_parent"
     android: background = "@color/white"
     android:orientation = "vertical"
     tools:ignore = "HardcodedText,ContentDescription,NestedWeights"    >

      <!-- Head start -->
     < LinearLayout
         android:layout_width = "match_parent"
         android:layout_height = "44dp"
         android:orientation = "horizontal"
         android:padding = "10dp"
         android: background = "@color/red" >
         < ImageView
             android:layout_width = "wrap_content"
             android:layout_height = "match_parent"
             android: src = "@drawable/mm_title_1"    />
         < TextView
             android:layout_width = "0dp"
             android:layout_height = "match_parent"
             android:layout_weight = "1"
             android:gravity = "center"
             android: text = "測試案例"
             android:textStyle = "bold"
             android:textSize = "16sp"
             android:textColor = "@android:color/white" />
         < ImageView
             android:layout_width = "wrap_content"
             android:layout_height = "match_parent"
             android: src = "@drawable/mm_title_2"    />
     </ LinearLayout >
      <!-- Head end   -->

      <!-- Search start-->
     < LinearLayout
         android:layout_width = "match_parent"
         android:layout_height = "36dp"
         android:orientation = "vertical"
         android:paddingTop = "3dp"
         android:layout_margin = "8dp" >
         < EditText
             android: id = "@+id/search_edit"
             android:layout_width = "match_parent"
             android:layout_height = "match_parent"
             android:drawableLeft = "@drawable/mm_search"
               android: background = "@drawable/mm_shape_editview"
               android:hint = "請輸入關鍵字"
             android:textSize = "16sp"
             android:textColorHint = "@color/darkgray"
             android:textStyle = "bold"
             android:padding = "6dp" />
     </ LinearLayout >
      <!-- Search end  -->
      <!-- GridItem start  -->
     < LinearLayout
           android:layout_width = "match_parent"
           android:layout_height = "0dp"
           android:layout_weight = "1"
           android:orientation = "horizontal"
         android:layout_margin = "10dp" >
         < com.mm.template.GridItem
             griditem:image = "@drawable/mm_1"
             android:padding = "5dp"
               android:layout_width = "wrap_content"
               android:layout_height = "wrap_content"
               android:layout_weight = "1"
               griditem:bkground = "@color/orange"
               griditem:text1 = "Android"
               griditem:text2 = "手機開發" />
         < com.mm.template.GridItem
             griditem:image = "@drawable/mm_2"
             android:padding = "5dp"
               android:layout_width = "wrap_content"
               android:layout_height = "wrap_content"
               android:layout_weight = "1"
               griditem:bkground = "@color/blueviolet"
               griditem:text1 = "C++"
               griditem:text2 = "編程語言" />
         < com.mm.template.GridItem
             griditem:image = "@drawable/mm_3"
             android:padding = "5dp"
               android:layout_width = "wrap_content"
               android:layout_height = "wrap_content"
               android:layout_weight = "1"
               griditem:bkground = "@color/blue"
               griditem:text1 = "服務端"
               griditem:text2 = "後臺開發" />
     </ LinearLayout >
      <!-- GridItem end  --> </ LinearLayout >

也就是 <com /> 標籤爲我們自定義的 GridItem 組件。

4    結果展示

 

 

 

 

 

參考來源： <http://blog.sina.com.cn/s/blog_62ef2f14010105vi.html>