前言
在开发AndroidUI时，如果想要做出自己想要的特定的外观效果，就不可能只依赖Android原生组件，虽然说随着Android的版本更迭其原生组件的美观度有了很大的提升，但是对于一个完整的App来说，它们很难与我们想要的整体效果保持一致，所以这个时候我们就需要自定义组件来实现特定的效果。
本文将介绍实现基本的自定义组件的方法，并完成一个自定义的EditText做为示例。
自定义组件基本步骤
-
继承View的子类
在AndroidUI中，所有的布局、组件等界面元素都是继承自View类，这个类定义了一个界面元素的标准行为，包括确定位置，确定尺寸，绘制外观样式等，当我们自定义组件时，就需要重写onMeasure，onLayout，onDraw方法。当我们需要的组件与原生组件的功能相似时，我们可以直接继承自具体的View的子类，如ImageButton，当我们需要完全重新定义一个组件时，需要做的工作就比较多，这时就需要继承View或ViewGroup。本文暂时只讨论前者。
-
为自定义View添加属性
这里的属性是指配置UI组件时的属性，我们在自定义组件时，原生View的属性往往不能满足我们的配置需求，我们可能需要一些更多样化或更精确的控制，这时我们就需要为View添加属性，这样我们定义的组件就会变的通用。
-
编写代码覆盖View中的绘制方法
即覆盖View中的onMeasure，onLayout，onDraw等方法。
-
自定义事件响应方法和部分回调方法
onFinishInflate() 回调方法，当应用从XML加载该组件并用它构建界面之后调用的方法
onMeasure() 检测View组件及其子组件的大小
onLayout() 当该组件需要分配其子组件的位置、大小时
onSizeChange() 当该组件的大小被改变时
onDraw() 当组件将要绘制它的内容时
onKeyDown 当按下某个键盘时
onKeyUp 当松开某个键盘时
onTouchEvent 当发生触屏事件时
onWindowFocusChanged(boolean) 当该组件得到、失去焦点时
onAtrrachedToWindow() 当把该组件放入到某个窗口时
onDetachedFromWindow() 当把该组件从某个窗口上分离时触发的方法
onWindowVisibilityChanged(int): 当包含该组件的窗口的可见性发生改变时触发的方法
自定义Edittext示例
本例的目的不在于创建一个十分美观的组件，主要是为了通过一个简单的示例说明上述内容的具体实现方法，帮助大家理解自定义组件的基本原理和方法。明白了基本的自定义组件实现方法，创建出炫酷的组件还会远吗？
-
右下角字数统计
由于要在下划线下显示字数统计，所以下划线的绘制位置要修改到字的上端。另外，由于字数统计的存在，还需要增加EditText的bottom padding，把字显示在多出来的这块padding上。
-
自定义属性
设置了一个自定义属性lineColor，用于设置下划线颜色，可以在xml布局文件中直接进行设置。
-
效果图
-
示例代码
MyEditText.java
public class MyEditText extends EditText {
// 画下划线的画笔
private Paint paint;
// 绘制计数的画笔
private TextPaint textPaint;
// 下划线的开始y坐标
private int lineY;
// 下划线的颜色
private int lineColor;
// 当前输入的字符数
private int count;
// 用来获取计数结果的字符串
private StringBuffer countString;
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private void init(AttributeSet attrs) {
TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.MyEditText);
lineColor = array.getColor(R.styleable.MyEditText_lineColor, Color.BLUE);
array.recycle();
countString = new StringBuffer();
super.setHintTextColor(Color.LTGRAY);
// 初始化下划线画笔
paint = new Paint();
paint.setColor(lineColor);
paint.setAntiAlias(true);
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
// 初始化字符计数的画笔
textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(40);
textPaint.setColor(Color.LTGRAY);
super.setPadding(getPaddingLeft(),getPaddingTop(),getPaddingRight(),getPaddingBottom()+70);
addListener();
}
private void addListener() {
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) {
countString.delete(0, countString.length());
count = s.length();
countString.append(count);
countString.append("字");
}
});
}
@Override
protected void onDraw(Canvas canvas) {
// 下划线的高度
lineY = getScrollY()+getHeight()-getPaddingBottom()+5;
// 绘制下划线
canvas.drawRect(getScrollX(), lineY, getScrollX()+getWidth()-getPaddingRight(), lineY, paint);
// 绘制右下角的计数
canvas.drawText(countString.toString(), getScrollX()+getWidth()-getPaddingRight() - textPaint.measureText(countString.toString()), lineY + 60, textPaint);
super.onDraw(canvas);
}
}
res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyEditText">
<attr name="lineColor" format="color"/>
</declare-styleable>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="se.sx14.myedittext.MainActivity">
<se.sx14.myedittext.MyEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lineColor="#18b4ed"
android:hint="请输入内容"
android:background="@null"
/>
</LinearLayout>
