閱讀348 返回首頁    go 阿裏雲 go 技術社區[雲棲]

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

1    自定義標簽

這是我的模板項目目錄

 
 
既然想像 android:text  那樣使用自己的標簽，那麼首先得有標簽。
在 res/values/ 下我新建了個 mm_tag.xml (切記不可出現大寫，隻能是 小寫字母、數字、下劃線)

第一步:    自定義 標簽    

mm_tag.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <declare-styleable name="GridItem">  
  4.         <attr name="bkground" format="reference|color"/>  
  5.         <attr name="text1"    format="string"/>  
  6.         <attr name="text2"    format="string"/>  
  7.         <attr name="image"    format="reference|integer"/>  
  8.     </declare-styleable>      
  9. </resources>  

format 參考:
1. reference：參考某一資源ID
2. color：顏色值
3. boolean：布爾值
4. dimension：尺寸值
5. float：浮點值
6. integer：整型值
7. string：字符串
8. fraction：百分數
9. enum：枚舉值
  1. //屬性定義：  
  2. < declare -styleable name = "名稱" >  
  3.     <attr name = "orientation" >  
  4.         <enum name = "horizontal" value = "0" />  
  5.         <enum name = "vertical" value = "1" />  
  6.     </attr>                        
  7. </ declare -styleable>  
  8.   
  9. //屬性使用：  
  10. <LinearLayout  
  11.     xmlns:android = "https://schemas.android.com/apk/res/android"  
  12.     android:orientation = "vertical"  
  13.     android:layout_width = "fill_parent"  
  14.     android:layout_height = "fill_parent"  
  15. >  
  16. </LinearLayout>  

10. flag：位或運算
  1. //屬性定義：  
  2. < declare -styleable name = "名稱" >  
  3.     <attr name = "windowSoftInputMode" >  
  4.         <flag name = "stateUnspecified" value = "0" />  
  5.         <flag name = "stateUnchanged" value = "1" />  
  6.         <flag name = "stateHidden" value = "2" />  
  7.     </attr>                  
  8. </ declare -styleable>  
  9.   
  10. //屬性使用：  
  11. <activity  
  12.     android: name = ".StyleAndThemeActivity"  
  13.     android:label = "@string/app_name"  
  14.     android:windowSoftInputMode = "stateUnspecified | stateUnchanged　|　stateHidden" >  
  15.     <intent-filter>  
  16.         < action android: name = "android.intent.action.MAIN" />  
  17.         <category android: name = "android.intent.category.LAUNCHER" />  
  18.     </intent-filter>  
  19. </activity>  

11.注意：屬性定義時可以指定多種類型值。
  1. //屬性定義：  
  2. < declare -styleable name = "名稱" >  
  3.     <attr name = "background" format = "reference|color" />  
  4. </ declare -styleable>  
  5.   
  6. //屬性使用：  
  7. <ImageView  
  8.     android:layout_width = "42dip"  
  9.     android:layout_height = "42dip"  
  10.     android: background = "@drawable/圖片ID|#00FF00" />  

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

比如我們在布局中使用自定義組件 GridItem:
首先 聲明好 標簽的命名空間
  1. xmlns:griditem = "https://schemas.android.com/apk/res/com.mm.template"  
  2. //對比下 android 的命名空間:  
  3. xmlns:android = "https://schemas.android.com/apk/res/android"  
發現隻有 res/後麵的不同，com.mm.template 是我的應用程序包名，通過上文中的 項目目錄圖片可以看出來，
griditem 是我隨便想的一個命名空間的名字。
接下來就是使用自定義組件
  1. < com.mm.template.GridItem  
  2.      griditem:image = "@drawable/mm_1"  
  3.      android:padding = "5dp"  
  4.      android:layout_width = "wrap_content"  
  5.      android:layout_height = "wrap_content"  
  6.      android:layout_weight = "1"  
  7.      griditem:bkground = "@color/orange"  
  8.      griditem:text1 = "Android"       griditem:text2 = "手機開發" />  
其中 用到了我們的自定義標簽：
  1. griditem:image = "@drawable/mm_1"  
  2. griditem:bkground = "@color/orange"  
  3. griditem:text1 = "Android"  
  4. griditem:text2 = "手機開發"  
怎麼獲取標簽傳回的數據呢呢？
在自定義組件 GridItem 的實現代碼中使用如下方法即可
  1. public GridItem(Context context, AttributeSet attrs) {  
  2.     super(context, attrs);  
  3.       
  4.     TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);  
  5.       
  6.     bk_color =typedarray.getResourceId(R.styleable.GridItem_bkground, R.color.burlywood);  
  7.     text1 =typedarray.getString(R.styleable.GridItem_text1);  
  8.     text2 =typedarray.getString(R.styleable.GridItem_text2);  
  9.     image=typedarray.getDrawable(R.styleable.GridItem_image);  
  10.       
  11.     typedarray.recycle();  
  12.   
  13.     view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);  
  14.       
  15.     layout=(LinearLayout)view.findViewById(R.id.item_layout);  
  16.     textview1=(TextView)view.findViewById(R.id.text1);  
  17.     textview2=(TextView)view.findViewById(R.id.text2);  
  18.     imageview=(ImageView)view.findViewById(R.id.imageview);  
  19.       
  20.     layout.setBackgroundResource(bk_color); //設置背景色  
  21.     textview1.setText(text1);               //設置第一行文字  
  22.     textview2.setText(text2);               //設置第二行文字  
  23.     imageview.setImageDrawable(image);      //設置圖標  
  24. }  



即可獲得 我們自定義標簽傳過來的數據，並且正確的在界麵中顯示出來。
下麵我將結合自定義 組件 GridItem 來一起講。

2    自定義組件

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



那麼就用到自定義組件。
下麵我將實現一個自定義組件 GridItem 實現。
 
一般都是繼承於 Layout（我用繼承於View時出現問題 ~~!）
GridItem.java
  1. package com.mm.template;  
  2.   
  3. import android.content.Context;  
  4. import android.content.res.TypedArray;  
  5. import android.graphics.drawable.Drawable;  
  6. import android.util.AttributeSet;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.widget.ImageView;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.TextView;  
  12.   
  13. public class GridItem extends LinearLayout {  
  14.       
  15.     private int bk_color;   //背景色  
  16.     private String text1;   //第一行文字  
  17.     private String text2;   //第二行文字  
  18.     private Drawable image; //圖標  
  19.       
  20.     private LinearLayout layout;  
  21.     private TextView textview1;  
  22.     private TextView textview2;  
  23.     private ImageView imageview;  
  24.       
  25.     private View view;  
  26.   
  27.     public GridItem(Context context, AttributeSet attrs) {  
  28.         super(context, attrs);  
  29.           
  30.         TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);  
  31.           
  32.         bk_color =typedarray.getResourceId(R.styleable.GridItem_bkground, R.color.burlywood);  
  33.         text1 =typedarray.getString(R.styleable.GridItem_text1);  
  34.         text2 =typedarray.getString(R.styleable.GridItem_text2);  
  35.         image=typedarray.getDrawable(R.styleable.GridItem_image);  
  36.           
  37.         typedarray.recycle();  
  38.       
  39.         view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);  
  40.           
  41.         layout=(LinearLayout)view.findViewById(R.id.item_layout);  
  42.         textview1=(TextView)view.findViewById(R.id.text1);  
  43.         textview2=(TextView)view.findViewById(R.id.text2);  
  44.         imageview=(ImageView)view.findViewById(R.id.imageview);  
  45.           
  46.         layout.setBackgroundResource(bk_color); //設置背景色  
  47.         textview1.setText(text1);               //設置第一行文字  
  48.         textview2.setText(text2);               //設置第二行文字  
  49.         imageview.setImageDrawable(image);      //設置圖標  
  50.     }  
  51.   
  52. }  

這個自定義組件 GridItem 用到的布局文件
mm_grid_item.xml
  1. <? xml   version = "1.0"    encoding = "utf-8" ?>  
  2. < LinearLayout   xmlns:android = "https://schemas.android.com/apk/res/android"  
  3.      xmlns:tools = "https://schemas.android.com/tools"  
  4.      android: id = "@+id/item_layout"  
  5.      android:layout_width = "match_parent"  
  6.      android:layout_height = "match_parent"  
  7.      android:orientation = "vertical"  
  8.      android: background = "@color/black"  
  9.      android:padding = "3dp"  
  10.      android:paddingLeft = "6dp"  
  11.      tools:ignore = "HardcodedText,ContentDescription"    >  
  12.      < TextView  
  13.          android: id = "@+id/text1"  
  14.          android:layout_weight = "1"  
  15.           style = "@style/MM_TextView" />  
  16.      < TextView  
  17.          android: id = "@+id/text2"  
  18.          android:layout_weight = "1"  
  19.          android:textSize = "12sp"  
  20.           style = "@style/MM_TextView" />  
  21.      < ImageView  
  22.          android: id = "@+id/imageview"  
  23.          android:layout_width = "wrap_content"  
  24.          android:layout_height = "0dp"  
  25.          android:layout_gravity = "right"  
  26.          android: src = "@drawable/mm_title_1"     
  27.          android:layout_weight = "2"  
  28.          android:layout_marginTop = "10dp"  
  29.          android:scaleType = "fitCenter" />  
  30.       
  31.       <!--圖片縮放  
  32.         android:scaleX="0.8"  
  33.         android:scaleY="0.8" --> </ LinearLayout >  

3    使用方法

在 main_layout.xml (我的主布局文件)中使用
  1. < LinearLayout   xmlns:android = "https://schemas.android.com/apk/res/android"  
  2.      xmlns:tools = "https://schemas.android.com/tools"  
  3.      xmlns:griditem = "https://schemas.android.com/apk/res/com.mm.template"  
  4.      android:layout_width = "match_parent"  
  5.      android:layout_height = "match_parent"  
  6.      android: background = "@color/white"  
  7.      android:orientation = "vertical"  
  8.      tools:ignore = "HardcodedText,ContentDescription,NestedWeights"    >  
  9.       
  10.       <!-- Head start -->  
  11.      < LinearLayout  
  12.          android:layout_width = "match_parent"  
  13.          android:layout_height = "44dp"  
  14.          android:orientation = "horizontal"  
  15.          android:padding = "10dp"  
  16.          android: background = "@color/red" >  
  17.          < ImageView  
  18.              android:layout_width = "wrap_content"  
  19.              android:layout_height = "match_parent"  
  20.              android: src = "@drawable/mm_title_1"    />  
  21.          < TextView  
  22.              android:layout_width = "0dp"  
  23.              android:layout_height = "match_parent"  
  24.              android:layout_weight = "1"  
  25.              android:gravity = "center"  
  26.              android: text = "測試案例"  
  27.              android:textStyle = "bold"  
  28.              android:textSize = "16sp"  
  29.              android:textColor = "@android:color/white" />  
  30.          < ImageView  
  31.              android:layout_width = "wrap_content"  
  32.              android:layout_height = "match_parent"  
  33.              android: src = "@drawable/mm_title_2"    />  
  34.      </ LinearLayout >  
  35.       <!-- Head end   -->  
  36.       
  37.       <!-- Search start-->  
  38.      < LinearLayout  
  39.          android:layout_width = "match_parent"  
  40.          android:layout_height = "36dp"  
  41.          android:orientation = "vertical"  
  42.          android:paddingTop = "3dp"     
  43.          android:layout_margin = "8dp" >  
  44.          < EditText  
  45.              android: id = "@+id/search_edit"  
  46.              android:layout_width = "match_parent"  
  47.              android:layout_height = "match_parent"  
  48.              android:drawableLeft = "@drawable/mm_search"  
  49.                android: background = "@drawable/mm_shape_editview"  
  50.                android:hint = "請輸入關鍵字"  
  51.              android:textSize = "16sp"  
  52.              android:textColorHint = "@color/darkgray"  
  53.              android:textStyle = "bold"  
  54.              android:padding = "6dp" />  
  55.      </ LinearLayout >  
  56.       <!-- Search end  -->  
  57.       <!-- GridItem start  -->  
  58.      < LinearLayout    
  59.            android:layout_width = "match_parent"  
  60.            android:layout_height = "0dp"  
  61.            android:layout_weight = "1"  
  62.            android:orientation = "horizontal"  
  63.          android:layout_margin = "10dp" >  
  64.          < com.mm.template.GridItem  
  65.              griditem:image = "@drawable/mm_1"  
  66.              android:padding = "5dp"  
  67.                android:layout_width = "wrap_content"  
  68.                android:layout_height = "wrap_content"  
  69.                android:layout_weight = "1"  
  70.                griditem:bkground = "@color/orange"  
  71.                griditem:text1 = "Android"  
  72.                griditem:text2 = "手機開發" />  
  73.          < com.mm.template.GridItem  
  74.              griditem:image = "@drawable/mm_2"  
  75.              android:padding = "5dp"  
  76.                android:layout_width = "wrap_content"  
  77.                android:layout_height = "wrap_content"  
  78.                android:layout_weight = "1"  
  79.                griditem:bkground = "@color/blueviolet"  
  80.                griditem:text1 = "C++"  
  81.                griditem:text2 = "編程語言" />  
  82.          < com.mm.template.GridItem  
  83.              griditem:image = "@drawable/mm_3"  
  84.              android:padding = "5dp"  
  85.                android:layout_width = "wrap_content"  
  86.                android:layout_height = "wrap_content"  
  87.                android:layout_weight = "1"  
  88.                griditem:bkground = "@color/blue"  
  89.                griditem:text1 = "服務端"  
  90.                griditem:text2 = "後台開發" />  
  91.      </ LinearLayout >  
  92.       <!-- GridItem end  --> </ LinearLayout >  
也就是 <com /> 標簽為我們自定義的 GridItem 組件。

4    結果展示

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

最後更新：2017-04-03 12:55:33

  上一篇：go Android使用 startActivityForResult 、 onActivityResult 時的注意事項
  下一篇：go 怎麼讓有些QQ好友的動態不在自己空間裏顯示