Android 之 自定义标签 和 自定义组件 TypedArray

  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>
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>
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>
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. context通过调用obtainStyledAttributes方法来获取一个TypeArray，然后由该TypeArray来对属性进行设置
   obtainStyledAttributes方法有三个，我们最常用的是有一个参数的obtainStyledAttributes(int[] attrs)，其参数直接styleable中获得
   TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.MyView);
   调用结束后务必调用recycle()方法，否则这次的设定会对下次的使用造成影响  

5. 其中，TypedArray实例是个属性的容器，context.obtainStyledAttributes()方法返回得到。AttributeSet是节点的属性集合，在本例中是<com.easymorse.textbutton.TextButton节点中的属性集合。

   这句话：

   typedArray.getDimension(R.styleable.button_textSize, 
                   15)

   将获取自定义textSize的值，如果没有，则使用默认的值，15。

   
   */
7.     TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);
9.     bk_color =typedarray.getResourceId(R.styleable.GridItem_bkground, R.color.burlywood);
10.     text1 =typedarray.getString(R.styleable.GridItem_text1);
11.     text2 =typedarray.getString(R.styleable.GridItem_text2);
12.     image=typedarray.getDrawable(R.styleable.GridItem_image);
14.     typedarray.recycle();
16.     view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);
18.     layout=(LinearLayout)view.findViewById(R.id.item_layout);
19.     textview1=(TextView)view.findViewById(R.id.text1);
20.     textview2=(TextView)view.findViewById(R.id.text2);
21.     imageview=(ImageView)view.findViewById(R.id.imageview);
23.     layout.setBackgroundResource(bk_color); //设置背景色
24.     textview1.setText(text1);               //设置第一行文字
25.     textview2.setText(text2);               //设置第二行文字
26.     imageview.setImageDrawable(image);      //设置图标
27. }

即可获得 我们自定义标签传过来的数据，并且正确的在界面中显示出来。

下面我将结合自定义 组件 GridItem 来一起讲。

2    自定义组件

我想实现一个组件，类似于这样的

 

方法有很多种，自定义布局即可，现在我想让它以组件的形式在 布局中直接 像 TextView 一样使用，

那么就用到自定义组件。

下面我将实现一个自定义组件 GridItem 实现。

一般都是继承于 Layout（我用继承于View时出现问题 ~~!）

GridItem.java

1. package com.mm.template;
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;
13. public class GridItem extends LinearLayout {
15.     private int bk_color;   //背景色
16.     private String text1;   //第一行文字
17.     private String text2;   //第二行文字
18.     private Drawable image; //图标
20.     private LinearLayout layout;
21.     private TextView textview1;
22.     private TextView textview2;
23.     private ImageView imageview;
25.     private View view;
27.     public GridItem(Context context, AttributeSet attrs) {
28.         super(context, attrs);
30.         TypedArray typedarray=context.obtainStyledAttributes(attrs, R.styleable.GridItem);
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);
37.         typedarray.recycle();
39.         view=LayoutInflater.from(context).inflate(R.layout.mm_grid_item, this,true);
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);
46.         layout.setBackgroundResource(bk_color); //设置背景色
47.         textview1.setText(text1);               //设置第一行文字
48.         textview2.setText(text2);               //设置第二行文字
49.         imageview.setImageDrawable(image);      //设置图标
50.     }
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" />
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"    >
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   -->
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    结果展示