Android中如何自定义控件

Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Android标准控件库中没有满足要求的,有些是开发过程中没有代码的可复用,自己定义的。 一个好的自定义控件应当和Android本身提供的控件一样,封装了一系列的功能以供开发者使用,不仅具有完备的功能,也需要高效的使用内存和CPU。Android本身提供了一些指标:

  1. 应当遵守Android标准的规范(命名,可配置,事件处理等)。
  2. 在XML布局中科配置控件的属性。
  3. 对交互应当有合适的反馈,比如按下,点击等。
  4. 具有兼容性, Android版本很多,应该具有广泛的适用性。

Android已经提供了一系列基础控件和xml属性来帮助你创建自定义控件。


1. View的子类
View在Android是最基础的几个控件之一, 所有的控件均继承自View,你也可以直接继承View也可以继承其他的控件比如ImageView、LinearLayout等。
当然,你至少需要提供一个构造函数,其中Context和AttributeSet作为参数。 举例如下:

 class PieChart extends View { 
       public PieChart(Context context, AttributeSet attrs) { 
            super(context, attrs); 
       } 
} 

2. 自定义属性
一个完美的自定义控件也可以添加xml来配置属性和风格。 要实现这一点,可按照下列步骤来做:
1) 添加自定义属性<declare-styleable>到xml文件中
2) 在xml的<declare-styleable>中,指定属性的值
3) 在view中获取xml中的值
4) 将获取的值应用到view中
下面继续举例说明:添加<declare-styleable> 到你的程序中,习惯上一般是放在res/values/attrs.xml文件中(可以参考sdk文件下的attrs文件 :sdk\platforms\android-19\data\res\values\attrs.xml
),例如:

<resources> 
 <declare-styleable name="PieChart"> 
 <attr name="showText" format="boolean" /> 
 <attr name="labelPosition" format="enum"> 
 <enum name="left" value="0"/> 
 <enum name="right" value="1"/> 
 </attr> 
 </declare-styleable> 
</resources> 

这段代码声明了两个自定义的属性 showText和labelPosition,他们属于一个自定义的实体PieChat。

一旦定义好了属性,就可以在xml中使用这些属性了,下面是一个简单的例子:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:custom="http://schemas.android.com/apk/res/com.example.customviews"> 
 <com.example.customviews.charting.PieChart 
     custom:showText="true" 
     custom:labelPosition="left" /> 
</LinearLayout> 

可以看到和标准的Android的组件一样,唯一的差别在他们属于不同的命名空间,标准的组件的命名空间一般是 http://schemas.android.com/apk/res/android
而我们自定义的命名空间是http://schemas.android.com/apk/res/[your package name]。注意到xmlns:custom中的custom了吗?你可以使用任意的字符,但是要和下面的控件的定义中的字符要保持一致。另外一个需要注意的是, xml中的tag:com.example.customviews.charting.PieChart,需要的完整的包名,如果你的自定义控件是个内部类(好吧,这么奇葩),也必须给全路径,假设PieChat有个内部类PieView,如果在XML中引用它,需要这样使用:com.example.customviews.charting.PieChart$PieView


3) 应用自定义的属性值
当View被创建的时候,可以通过AttributeSet读取所有的定义在xml中的属性,在构造函数中通过obtainStyledAttributes读取attrs,该方法会返回一个TypeArray数组。通过TypeArray可以读取到已经定义在XML中的方法。下面的例子展示了读取上文中的xml属性值。

public PieChart(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     TypedArray a = context.getTheme().obtainStyledAttributes(
    attrs,R.styleable.PieChart, 0, 0); 
     try { 
         mShowText = a.getBoolean(R.styleable.PieChart_showText, false); 
          mTextPos = a.getInteger(R.styleable.PieChart_labelPosition, 0); 
     } finally { 
         a.recycle(); 
     } 
} 

需要强调的是, TypeArray使用完毕后需要销毁,不然会发生内存泄露。


4) 添加自定义的方法和事件
自定义属性很强大,但缺点也很明显,它只能在view初始化的时候被应用到控件中。 为了添加更加灵活的行为, 可以为每一个属性添加getter和setter对。下面的代码段展示了PieChat的属性showText

public boolean isShowText() { 
    return mShowText; 
} 
public void setShowText(boolean showText) { 
    mShowText = showText; 
    invalidate(); 
    requestLayout(); 
} 

在setShowText中调用了invalidate()和requestLayout(), 保证了view能及时的更新。在你的自定义View中,如果有属性被改变并且需要立即生效时,你也必须调用这个方法。 这样系统会立即重新绘制view。 同样的,如果view的尺寸或者形状发生了变化,你也必须调用requestLayout(). 不然会引起很多问题。
一般你也需要添加事件回调来和调用者沟通。 例如PieChat暴露了OnCurrentItemChanged来通知调用者pie chat发生了旋转。在开发过程中,很容易忘记添加一些属性和事件,特别是作者是这个自定义View的唯一使用者的时候。为使View有更普遍的适用性,应当花些时间考虑的更加周全。最好是暴露所有的可能改变外观和行为的属性。


**实例展示:
**

Paste_Image.png

一、** 自定义属性: **res/values/attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="SettingItemView">
     <attr name="des" format="string|reference"></attr>
     <attr name="itemBg" format="string">
        <enum name="first" value="0"></enum>
        <enum name="middle" value="1"></enum>
        <enum name="last" value="2"></enum>
     </attr>
     <attr name="checked" format="boolean"></attr>
     <attr name="isVisiable" format="boolean"></attr>
   </declare-styleable>
</resources>

二、 LinearLayout**的子类 **

public class SettingItemView extends LinearLayout {
   private ImageView mIv;
   private boolean mChecked;
   private boolean mIsVisable;

   public SettingItemView(Context context) {
      super(context);
   }

   public SettingItemView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
   }

   public SettingItemView(Context context, AttributeSet attrs) {// 布局文件
      super(context, attrs);
       View view = View.inflate(context, R.layout.view_setting_item, this);// view_setting_item--View
 // 拿到布局文件中的数据
       TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.SettingItemView);
       String des = ta.getString(R.styleable.SettingItemView_des);
       int itemBg = ta.getInt(R.styleable.SettingItemView_itemBg, -1);// 获取枚举值
         mChecked = ta.getBoolean(R.styleable.SettingItemView_checked, false);
       mIsVisable = ta.getBoolean(R.styleable.SettingItemView_isVisiable,false);
     
     TextView tv = (TextView) view.findViewById(R.id.tv_setting_item_des);
     tv.setText(des);

 switch (itemBg) {
 case 0:
     setBackgroundResource(R.drawable.iv_first_selector);
     break;
 case 1:
     setBackgroundResource(R.drawable.iv_middle_selector);
     break;
 case 2:
     setBackgroundResource(R.drawable.iv_last_selector);
     break;
 default:
     setBackgroundResource(R.drawable.iv_first_selector);
     break;
 }
 mIv = (ImageView) view.findViewById(R.id.iv_setting_item_checked);
 setChecked();
 setVisable();
 // 让这个可点击
 setClickable(true);
 // 回收一下
 ta.recycle();
 }

 private void setVisable() {
     mIv.setVisibility(mIsVisable?View.VISIBLE:View.INVISIBLE);
 }

 private void setChecked() {
 // if(mChecked){
 // mIv.setImageResource(R.drawable.on);
 // }else {
 // mIv.setImageResource(R.drawable.off);
 // }
     mIv.setImageResource(mChecked ? R.drawable.on : R.drawable.off);
 }

 // 提供外面设置,是否被选择
 public void setChecked(boolean isChecked){
     this.mChecked=isChecked;
     // 更新UI
     setChecked();
 }

 public boolean isChecked(){
     return this.mChecked;
 }

 public void toggle(){
     this.mChecked=!this.mChecked;
     // 更新UI
     setChecked();
 }
}

三、item文件
view_setting_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingLeft="5dp"
 android:paddingRight="5dp"
 android:paddingTop="10dp"
 android:paddingBottom="10dp" >

 <TextView
 android:id="@+id/tv_setting_item_des"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerVertical="true"
 android:text="版本更新" />

 <ImageView
 android:id="@+id/iv_setting_item_checked"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:src="@drawable/on"  />

</RelativeLayout>

四、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:custom="http://schemas.android.com/apk/res/com.fanfy"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

 <com.custom.view.SettingItemView
 android:id="@+id/siv_version"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="true"
 custom:itemBg="first" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_call_sms_safe"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 customisVisiable="true"
 custom:itemBg="last" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 custom:checked="false"
 custom:des="版本更新"
 custom:isVisiable="true"
 custom:itemBg="first" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_style_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="false"
 custom:itemBg="middle" />
 
 <com.custom.view.SettingItemView
 android:id="@+id/siv_style_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="false"
 custom:itemBg="last" />

</LinearLayout>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 6、View的绘制 (1)当测量好一个View之后,我们就可以简单的重写 onDraw()方法,并在 Canvas...
    b5e7a6386c84阅读 1,858评论 0 3
  • 早起打开微信,发现两个朋友已经上传了昨天她们手抄的一首诗,又让我感慨万千,本来,从诗词大会开始,本子上就计划了,每...
    无限妈妈阅读 157评论 1 1
  • 今天很不想写作业,想利用还没用过的两次不写机会的,但临睡觉前想到一件值得写的事儿,写吧。 下班后跟同事32一起出公...
    风飘啊飘阅读 146评论 0 0
  • 思量旧事,天气正清秋。 尚记得,并肩游。 黑山夕阳映远树, 温泊月色笼小楼。 几番行,几番醉,几番留。 凭谁料,龙...
    秋雨霜荷阅读 256评论 5 4