NightRain.png
效果
九宫格输入框
实现
- 绘制宫格分割线
这里我们用一个RectF类型的数组来装载数据。在onSizeChanged方法中获取到控件尺寸，经过计算，将81个位置合适的矩形保存到数组中。 - 绘制点击效果
在onTouchEvent方法中监听手指离开事件，当手指离开，获取到当前点击区域的RectF,并将状态同样保存到一个数组中。 - 绘制输入内容
输入内容利用onTextChanged方法获取，同样保存到一个数组中。 - PS
控件中没有考虑UI重建数据保存问题，使用中要注意这点~~~
这三个数组中数据一一对应，在onDraw中，根据三个数组中数据内容绘制界面。完成我们的自定义View。
源码
/**
* 自定义九宫格输入框
* attrs: customTableLineColor 宫格分割线颜色
* attrs: customTableLineWidth 宫格分割线宽度
* attrs: customTablePressColor 宫格选中时背景颜色
* attrs: customTableSpace 大宫格间隔
* attrs: customTableTextColor 宫格输入文字颜色
* attrs: customTableTextSize 宫格输入文字大小
* attrs: customTableAngle 宫格圆角尺寸
* 默认值请查看 {@link CustomEditText#initAttrs(Context, AttributeSet)}
*/
public class CustomEditText extends AppCompatEditText {
private static final String TAG = "CustomEditText";
//宫格位置
private final RectF[] mTableList = new RectF[81];
//宫格状态
private final Boolean[] mTableState = new Boolean[81];
//宫格数据
private final Integer[] mTableListNumber = new Integer[81];
//绘制宫格画笔
private Paint mPaint;
//绘制宫格背景画笔
private Paint mBackgroundPaint;
//绘制文字画笔
private TextPaint mTextPaint;
//手指离开屏幕X轴坐标
private float mTouchX;
//手指离开屏幕Y轴坐标
private float mTouchY;
//表格内文字尺寸
private float mTextSize;
//表格内文字颜色
private int mTextColor;
//表格分割线颜色
private int mTableLineColor;
//选中对应宫格背景颜色
private int mTablePressColor;
//表格分割线宽度
private float mTableLineWidht;
//大宫格间隔
private float mTableSpace;
//宫格圆角尺寸
private float mTableAngle;
public CustomEditText(Context context) {
this(context, null);
}
public CustomEditText(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.editTextStyle);
}
public CustomEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttrs(context, attrs);
initSet();
initPaint();
}
/**
* 初始化自定义属性
*/
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomEditText);
mTextColor = typedArray.getColor(R.styleable.CustomEditText_customTableTextColor, Color.parseColor("#000000"));
mTableLineColor = typedArray.getColor(R.styleable.CustomEditText_customTableLineColor, Color.parseColor("#000000"));
mTablePressColor = typedArray.getColor(R.styleable.CustomEditText_customTablePressColor, Color.parseColor("#DDDDDD"));
mTextSize = typedArray.getDimension(R.styleable.CustomEditText_customTableTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
mTableLineWidht = typedArray.getDimension(R.styleable.CustomEditText_customTableLineWidth, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()));
mTableSpace = typedArray.getDimension(R.styleable.CustomEditText_customTableSpace, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
mTableSpace = typedArray.getDimension(R.styleable.CustomEditText_customTableSpace, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
mTableAngle = typedArray.getDimension(R.styleable.CustomEditText_customTableAngle, 0);
typedArray.recycle();
}
/**
* 初始化画笔
*/
private void initPaint() {
mBackgroundPaint = new Paint();
mBackgroundPaint.setAntiAlias(true);
mBackgroundPaint.setStyle(Paint.Style.FILL);
mBackgroundPaint.setColor(mTablePressColor);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(mTableLineColor);
mPaint.setStrokeWidth(mTableLineWidht);
mPaint.setStyle(Paint.Style.STROKE);
mTextPaint = new TextPaint();
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
/**
* 初始化EditText基础设置
*/
private void initSet() {
//隐藏光标
setCursorVisible(false);
//设置输入类型
setInputType(InputType.TYPE_CLASS_NUMBER);
//限制输入一行
setSingleLine(true);
}
@Override
protected void onDraw(Canvas canvas) {
for (int i = 0; i < mTableList.length; i++) {
RectF rectF = mTableList[i];
if (mTableState[i]) {
//绘宫格制背景
canvas.drawRoundRect(rectF, mTableAngle, mTableAngle, mBackgroundPaint);
}
//绘制宫格分割线
canvas.drawRoundRect(rectF, mTableAngle, mTableAngle, mPaint);
Integer integer = mTableListNumber[i];
if (integer != 0) {
//测量文字尺寸
Rect measureTextSize = measureTextSize(integer + "");
//绘制输入内容
canvas.drawText(integer + "", rectF.centerX(), rectF.centerY() + measureTextSize.height() / 2.0F, mTextPaint);
}
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {//手指离开
mTouchX = event.getX();
mTouchY = event.getY();
//检查输入内容和状态是否对应
for (int i = 0; i < mTableListNumber.length; i++) {
Integer integer = mTableListNumber[i];
if (integer == 0) {
//背景应该为透明
if (mTableState[i]) {
mTableState[i] = false;
}
}
}
//设置选中宫格
for (int i = 0; i < mTableList.length; i++) {
if (mTableList[i].contains(mTouchX, mTouchY)) {
mTableState[i] = true;
invalidate();
break;
}
}
}
if (event.getAction() == MotionEvent.ACTION_DOWN) {
performClick();
}
return super.onTouchEvent(event);
}
@Override
public boolean performClick() {
return super.performClick();
}
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
String trim = text.toString().trim();
if (!TextUtils.isEmpty(trim) && TextUtils.isDigitsOnly(trim)) {
//保存输入内容
if (trim.length() > 1) {
trim = trim.substring(trim.length() - 1, trim.length());
}
for (int i = 0; i < mTableList.length; i++) {
if (mTableList[i].contains(mTouchX, mTouchY)) {
mTableListNumber[i] = Integer.parseInt(trim);
//修改宫格背景状态
mTableState[i] = true;
//清空默认EditText输入内容
CustomEditText.this.setText("");
break;
}
}
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//初始化宫格位置数据
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int paddingTop = getPaddingTop();
int measuredWidth = getMeasuredWidth();
//表格实际显示的宽度
int tableWidht = (int) (measuredWidth - mTableSpace * 2 - paddingLeft - paddingRight);
//每个表格的宽度
float singleTableWidth = tableWidht / 3.0F;
for (int i = 0; i < 9; i++) {
float top;
float left;
float bottom;
float right;
left = paddingLeft + (singleTableWidth * (i % 3)) + (mTableSpace * (i % 3));
right = left + singleTableWidth;
top = paddingTop + (singleTableWidth * (i / 3)) + (mTableSpace * (i / 3));
bottom = top + singleTableWidth;
//最大九个宫格的矩形
RectF rectF = new RectF(left, top, right, bottom);
float width = rectF.width();
float singleTableWidthMin = width / 3.0F;
for (int j = 0; j < 9; j++) {
float topMin;
float leftMin;
float bottomMin;
float rightMin;
leftMin = singleTableWidthMin * (j % 3) + rectF.left;
rightMin = leftMin + singleTableWidthMin;
topMin = singleTableWidthMin * (j / 3) + rectF.top;
bottomMin = topMin + singleTableWidthMin;
//每个小宫格的矩形
RectF rectFMin = new RectF(leftMin, topMin, rightMin, bottomMin);
for (int k = 0; k < mTableList.length; k++) {
if (mTableList[k] == null) {
mTableList[k] = rectFMin;
mTableListNumber[k] = 0;
mTableState[k] = false;
break;
}
}
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//强制控件为正方形
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
/**
* 测量文字的尺寸
*
* @return 一个汉字的矩阵
*/
private Rect measureTextSize(String content) {
Rect mRect = null;
if (!TextUtils.isEmpty(content)) {
if (mTextPaint != null) {
mRect = new Rect();
mTextPaint.getTextBounds(content, 0, content.length(), mRect);
}
}
return mRect;
}
}
- 自定义属性
<resources>
<declare-styleable name="CustomEditText">
<attr name="customTableTextSize" format="dimension" />
<attr name="customTableTextColor" format="color" />
<attr name="customTableLineColor" format="color" />
<attr name="customTableLineWidth" format="dimension" />
<attr name="customTableSpace" format="dimension" />
<attr name="customTablePressColor" format="color"/>
<attr name="customTableAngle" format="dimension"/>
</declare-styleable>
</resources>
