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 {privateint 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);//設定表徵圖}}

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    結果展示     參考   註：轉載請註明出處 :)   畢竟代碼是一個一個敲出來的啊，O(∩_∩)O~