開始動手就成功了一半，來看一個九宮格輸入框
實現過程
繪製宮格分割線
用一個RectF類型的數組來裝載數據。在onSizeChanged方法中獲取到控件尺寸，通過計算，將81個位置合適的矩形保存到數組中。git
繪製點擊效果
在onTouchEvent方法中監聽手指離開事件，當手指離開，獲取到當前點擊區域的RectF,並將狀態一樣保存到一個數組中。canvas
繪製輸入內容
輸入內容利用onTextChanged方法獲取，一樣保存到一個數組中。這裏須要注意一下，由於咱們是基於EditText來自定義，每次輸入EditText都會從新計算控件尺寸，因此咱們每次保存數據後要將EditText置位。數組
效果圖
源碼
/**
* 自定義九宮格輸入框
* 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)) {
//保存輸入內容
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="integer"/>
</declare-styleable>
</resources>
複製代碼
相關文章
- 1. 手寫一個九宮格
- 2. 九宮格鍵盤輸入
- 3. 九宮格輸入法
- 4. 好的開始,成功一半
- 5. 看懂這八張圖，學好java你就成功了一半！
- 6. 5-13 九宮格輸入法 (15分)
- 7. 7-9 九宮格輸入法
- 8. 7-9 九宮格輸入法 （15 分）
- 9. MUI 九宮格改造成六宮格
- 10. 如何用PPT做九宮格圖片？來了解一下吧
- 更多相關文章...
- • ionic 表單和輸入框 - ionic 教程
- • 第一個MyBatis程序 - MyBatis教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 手寫一個九宮格
- 2. 九宮格鍵盤輸入
- 3. 九宮格輸入法
- 4. 好的開始,成功一半
- 5. 看懂這八張圖，學好java你就成功了一半！
- 6. 5-13 九宮格輸入法 (15分)
- 7. 7-9 九宮格輸入法
- 8. 7-9 九宮格輸入法 （15 分）
- 9. MUI 九宮格改造成六宮格
- 10. 如何用PPT做九宮格圖片？來了解一下吧