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

 
 
 
 
 
 
 
相关文章
|
4月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
383 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
4月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
|
4月前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果,重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量,初始化画笔属性,设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`,并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图,帮助开发者快速理解并实践这一动画实现方式。
120 0
|
4月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
|
4月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
205 65
Android自定义view之网易云推荐歌单界面
|
4月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
488 84
|
4月前
|
Android开发 开发者
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
本文详细介绍了如何通过自定义 `attrs.xml` 文件实现 Android 自定义 View 的属性配置。以一个包含 TextView 和 ImageView 的 DemoView 为例,讲解了如何使用自定义属性动态改变文字内容和控制图片显示隐藏。同时,通过设置布尔值和点击事件,实现了图片状态的切换功能。代码中展示了如何在构造函数中解析自定义属性,并通过方法 `setSetting0n` 和 `setbackeguang` 实现功能逻辑的优化与封装。此示例帮助开发者更好地理解自定义 View 的开发流程与 attrs.xml 的实际应用。
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
|
4月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
|
4月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
Android自定义view之围棋动画(化繁为简)
|
10月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。

热门文章

最新文章