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 = "http://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 = "http://schemas.android.com/apk/res/com.mm.template"  
2. //对比下 android 的命名空间:  
3. xmlns:android = "http://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 = "http://schemas.android.com/apk/res/android"  
3.      xmlns:tools = "http://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 = "http://schemas.android.com/apk/res/android"  
2.      xmlns:tools = "http://schemas.android.com/tools"  
3.      xmlns:griditem = "http://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    结果展示

 

 

 

 

 

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