Android中如何自定义控件

作者: 清枫浦上 | 来源:发表于2017-01-09 15:32 被阅读0次

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

应当遵守Android标准的规范(命名，可配置，事件处理等)。
在XML布局中科配置控件的属性。
对交互应当有合适的反馈，比如按下，点击等。
具有兼容性， 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>

Android中如何自定义控件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读