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    结果展示

 
 
 
 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值