在App市场中，我们经常可以看到许多的非常炫的页面，他们设计精美注重细节，用户体验非常好。而这种页面的开发，通常Android自带的原生控件是无法满足的，所以就需要我们根据不同的需求进行自定义View。而根据设计和功能需求不同，我们通常有三种方法来实现自定义View：
- 组合：将不同控件组合在一起形成新的控件；
- 扩展：在现有控件的基础上，进行扩展；
- 重写：现有控件无法满足，通过重写来实现全新的控件；
本文以常见的自定义文本输入框为例子，分享实现方式以及相关的自定义控件知识点。
需求 - 复杂自定义输入框
整个控件包含三部分：标题栏，输入框，提示信息栏。要求该输入框上面包含一个文本控件显示标题，下面包含一个文本控件显示提示信息，合起来是一个完整的控件，并有多个新添加属性，能够为用户提供XML配置方式，也可以Java代码配置。如图所示输入框，能够对不同状态有不同的显示：
-
正常状态下，灰色边框，且为圆角矩形；
正常状态下
-
得到焦点时，蓝色边框，且为圆角矩形；
得到焦点时
-
校验输入内容，发现有错误时，红色边框，圆角矩形，且有感叹号提示图标用来提醒用户；
发生错误时
分析
- 输入框：该输入框包含多个状态，但分析可知，类似Android原生的EditText控件，且该控件现有功能无法满足多种状态的要求，因为，可以扩展EditText，在原生控件的基础上进行扩展，增加功能，修改UI显示效果；
- 整体：包含三部分：标题 + 输入框 + 提示信息，即TextView + 扩展EditText + TextView，且要作为一个整体提供给用户使用，姑且将此控件成为CustomInputView。即几个基本控件组合在一起行成新的控件，这种方式通常需要继承一个合适的ViewGroup，然后添加指定功能控件，形成新的控件，且可以指定可配置属性，增强可配置性；
一、自定义View实现构造函数
(一) 实现：继承View并自定义输入框的构造函数
保证自定义view不管通过哪种方式创建都可以走到相应的逻辑
public CustomView(Context context) {
this(context, null);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//do something
}
通过继承View或者合适的布局(比如这里实现自定义输入框，可以直接继承EditText；或者考虑到包含三部分标题+控件+提示信息，可以直接继承线性布局LinearLayout)，并实现View的构造函数，之后就可以对其进行改造，实现我们想要的自定义效果。但是其中有四个构造函数，他们分别什么意义呢？我们这里又为什么只实现了三个呢？
(二) 原理：四个构造函数
- 用Java代码创建View，如果只用这个构造函数声明，该View没有任何参数，基本是个空View对象；
public View(Context context)
- 从XML中创建View，且参数attr是在XML中配置的参数；
public View(Context context, AttributeSet attrs)
- 从XML中创建View，且有自定义属性时调用。系统默认只会调用前两个构造函数,至于第三个构造函数的调用,通常是在构造函数中主动调用的（例如,在第二个构造函数中调用第三个构造函数）；
public View(Context context, AttributeSet attrs, int defStyleAttr)
- 从XML中创建View，且有自定义属性，且需要在SDK21以上才能使用；
public View(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
知道了不同的构造函数的含义后，那么我们自定义View时，应该重写哪个构造函数呢？首先我们要区分不同构造函数的调用时机，一共四个构造函数，第一个是Java代码创建时调用；后三个都是XML创建，其中第二个比较好理解，即attr参数就是XML中配置的参数；那么后两个构造函数又有什么区别呢？他们都是与主题相关，从而使得一些View即使不对其进行任何配置，也有一些默认属性，所以，在自定义View时，如果不需要View随着主题变化而变化，有前两个构造函数就够了。
(三) 原理：View的属性和主题
不同View的形态不同，是因为其配置的属性不同，在View中有很多属性，如color，background等，这些属性可以在不同位置进行配置：（1）可以直接写在XML文件中；（2）可以在XML中以style形式定义；（3）theme主题中定义；（4）defStyleAttr；（5）defStyleRes；且他们的优先级为：
XML直接定义 > XML中style引用 > defStyleAttr > defStyleRes > theme直接定义
- defStyleAttr：只要在主题中对这个属性赋值，该View就会自动应用这个属性的值。在给这个属性赋值时，在xml中一般使用@style/xxx形式；
- defStyleRes：只有在第三个参数defStyleAttr为0，或者主题中没有找到这个defStyleAttr属性的赋值时，才可以启用。而且这个参数不再是Attr了，而是真正的style。其实这也是一种低级别的“默认主题”，即在主题未声明属性值时，我们可以主动的给一个style，使用这个构造函数定义出的View，其主题就是这个定义的defStyleRes。
具体关于优先级验证的例子见这篇博客
二、自定义属性
(一) 实现步骤1：编写styleable和item等标签元素
通过declare-styleable标签为其配置自定义属性，在res/values/attrs.xml文件中编写styleable和item等标签元素：
<resources>
<declare-styleable name="CustomView">
<attr name="custom_attr1" format="string" />
<attr name="custom_attr2" format="boolean" />
<attr name="custom_attr3" format="integer" />
<attr name="custom_attr4" format="dimension" />
</declare-styleable>
<attr name="custom_attr5" format="string" />
</resources>
声明了一个自定义属性集MyCustomView,其中包含了custom_attr1,custom_att2,custom_attr3,custom_attr4四个属性.同时,我们还声明了一个独立的属性custom_attr5；
(二) 实现步骤2：在XML布局文件中使用
- 在根布局引用命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"
- 在布局文件中使用自定义view
<com.example.myapplication.CustomView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:custom_attr1="test"
app:custom_attr2="true"
app:custom_attr3="1"
app:custom_attr4="1dp"
app:custom_attr5="base"/>
(三) 实现步骤3：在CustomView的构造方法中通过TypedArray获取
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
String testStr = ta.getString(R.styleable.CustomView_custom_attr1);
boolean testBool = ta.getBoolean(R.styleable.CustomView_custom_attr2, false);
ta.recycle();
通过以上四个步骤，我们就为自定义view定义了自定义属性，且可以通过XML进行配置，并读取到配置的属性值，并对其进行操作。下面是其中的一些原理：
(四) 原理：AttributeSet与TypedArray
- AttributeSet：包含该View声明的所有的属性的集合。可以通过getAttributeName()方法获取所有属性的key，getAttributeValue()方法获取所有属性的value；例如：
<com.example.myapplication.CustomView
android:layout_width="100dp"
android:layout_height="100dp"
app:custom_attr1="test"/>
解析出来的key和value值为：
attrName = layout_width , attrVal = 100.0dip
attrName = layout_height , attrVal = 200.0dip
attrName = text , attrVal = test
- TypedArray：简化解析属性的工作。如果布局中的属性的值是引用类型（比如：@dimen/dp100），AttributeSet解析出来的结果是
@数字的字符串，即id。如果使用AttributeSet去获得最终的字符串，那么需要第一步拿到id，第二步再去解析id。而TypedArray正是帮我们简化了这个过程。例如：
<com.example.myapplication.CustomView
android:layout_width="@dimen/dp100"
android:layout_height="100dp"
app:custom_attr1="@string/test"/>
解析出来的key和value值为：
attrName = layout_width , attrVal = @2130065234
attrName = layout_height , attrVal = 100.0dip
attrName = text , attrVal = @2131211809
如果用AttributeSet解析像素值，代码为：
int widthDimenId = attrs.getAttributeResourceValue(0, -1);
int width = getResources().getDimension(widthDimenId);
结论：在View的构造方法中，可以通过AttributeSet去获得自定义属性的值，但是比较麻烦，而TypedArray可以很方便的获取。
(五) 原理：declare-styleable
- styleale的出现系统可以为我们完成很多常量（int[]数组，下标常量）等的编写，简化开发工作；
- attr中的属性不可以重复定义，可以一次定义，多次使用。可以声明一个parent，父类style，其他style继承该父类使用，其中定义和使用的区别：
（1）定义：<attr name="testAttr" format="integer" />
（2）使用：<attr name="testAttr"/>
结论：Android会根据其在R.java中生成一些常量方便我们使用(aapt干的)，本质上，可以不声明declare-styleable，仅仅声明所需的属性即可，但是比较麻烦，而declare-styleable可以使我们方便的获取。
具体关于自定义属性验证的例子见这篇博客
三、设置不同样式对应不同状态
(一) 实现：一个文件实现不同状态的样式
- 第一种方式：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--可编辑状态，失焦时：灰色-->
<item android:state_enabled="true" android:state_focused="false">
<shape android:shape="rectangle">
<stroke android:width="@dimen/dp1" android:color="@color/grey">
</shape>
</item>
<!--可编辑状态，且获得焦点时：蓝色-->
<item android:state_enabled="true" android:state_focused="true">
<shape android:shape="rectangle">
<stroke android:width="@dimen/dp1" android:color="@color/blue">
</shape>
</item>
</selector>
- 第二种方式:
或者也可以将其中不同状态对应的item抽成一个文件，以防如果其他控件使用可以直接调用，代码如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--可编辑状态，失焦时：灰色-->
<item android:drawable="@drawable/custom_drawable1" android:state_enabled="true" android:state_focused="false" />
<!--可编辑状态，且获得焦点时：蓝色-->
<item android:drawable="@drawable/custom_drawable2" android:state_enabled="true" android:state_focused="true" />
</selector>
其中，custom_drawable1.xml的代码为：(custom_drawable2类似)
<shape android:shape="rectangle">
<stroke android:width="@dimen/dp1" android:color="@color/grey">
</shape>
(二) 原理：selector选择器
定义资源文件xml时，使用selector标签，可以添加一个或多个item子标签，而相应的状态是在item标签中定义的。定义的xml文件可以作为两种资源使用：drawable和color：
- 作为drawable资源使用时，一般和shape一样放于drawable目录下，item必须指定android:drawable属性；使用的例子见上面代码(
(一) 实现：一个文件实现不同状态的样式) - 作为color资源使用时，则放于color目录下，item必须指定android:color属性；使用例子见下面：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 当前窗口失去焦点时 -->
<item android:color="@android:color/black" android:state_window_focused="false" />
<!-- 不可用时 -->
<item android:color="@android:color/background_light" android:state_enabled="false" />
<!-- 按压时 -->
<item android:color="@android:color/holo_blue_light" android:state_pressed="true" />
<!-- 被选中时 -->
<item android:color="@android:color/holo_green_dark" android:state_selected="true" />
<!-- 被激活时 -->
<item android:color="@android:color/holo_green_light" android:state_activated="true" />
<!-- 默认时 -->
<item android:color="@android:color/white" />
</selector>
其中，注意：
- android:drawable属性除了引用@drawable资源，也可以引用@color颜色值；但android:color只能引用@color；
- item是从上往下匹配的，如果匹配到一个item那它就将采用这个item，而不是采用最佳匹配的规则；所以设置默认的状态，一定要写在最后，如果写在前面，则后面所有的item都不会起作用；
总结
根据以上介绍，可以简单写出一个标题+输入框+提示信息的布局了，且可以自定义属性值，主要代码如下：
public class CustomView extends LinearLayout {
private TextView title;
private TextView description;
private EditText input;
//custom property
private String customAttr1;
private Boolean customAttr2;
public CustomView(Context context) {
this(context, null);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initViews(context);
initProperties(context, attrs);
}
private void initViews(Context context) {
setOrientation(VERTICAL);
title = new TextView(context);
addView(title);
input = new EditText(context);
input.setBackgroundResource(R.drawable.custom_input_selector);
input.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if(somethingWrong()) {
input.setBackgroundResource(R.drawable.custom_input_error);
} else {
input.setBackgroundResource(R.drawable.custom_input_selector);
}
//或者可以使用三目运算符
//input.setBackgroundResource(somethingWrong()? R.drawable.custom_input_error : R.drawable.custom_input_selector);
}
});
addView(input);
description = new EditText(context);
addView(description);
}
private void initProperties(Context context, @Nullable AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
setCustomAttr1(ta.getString(R.styleable.CustomView_custom_attr1));
setCustomAttr2(ta.getBoolean(R.styleable.CustomView_custom_attr2, false));
ta.recycle();
}
public void setCustomAttr1(String attr) {
customAttr1 = attr;
}
public void setCustomAttr2(boolean attr) {
customAttr2 = attr;
}
public String getCustomAttr1() {
return customAttr1;
}
public Boolean getCustomAttr2() {
return customAttr2;
}
}
实用的常用Tips
- 给ImageView设置水波纹效果：
android:background="?android:attr/selectableItemBackground"
- 可以利用ContextThemeWrapper引入style来修改控件样式，能够方便的将自定义样式写入style，减少代码，如：
ContextThemeWrapper wrapper = new ContextThemeWrapper(context, R.style.CustomStyle);
CustomView customView = new CustomView(wrapper);
但要注意，慎用这种方式，ContextThemeWrapper会改变当前theme，并改变此后再使用的context，有可能会影响较大。
- 设置当前自定义控件的宽度和高度
customView.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.WRAP_CONTENT);
//或者
customView.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.WRAP_CONTENT));
网友评论