LatticeEditText 格子输入框

package com.viifo.latticeedittext

import android.content.Context
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatTextView

/**
 * 格子输入框
 */
class LatticeEditText @JvmOverloads constructor(
    context: Context, 
    attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

}

/** 可输入字符数 */
private var mSize = 0
/** 每个输入框的宽度 */
private var mWide = 0f
/** 每个输入框的高度 */
private var mHigh = 0f
/** 输入框外边距 */
private var mMarginRect = Rect()

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    // 控件宽度 = 格子数 * (单个格子的宽度 + 左右外边距)
    val width = (mSize * (mWide + mMarginRect.left + mMarginRect.right))
    // 控件高度 = 单个格子的高度 + 上下外边距
    val height = (mHigh + mMarginRect.top + mMarginRect.bottom)
    setMeasuredDimension(width.toInt(), height.toInt())
}

/**
 * 初始化属性参数
 * @param context
 * @param attrs
 */
@SuppressLint("CustomViewStyleable")
private fun initAttrs(context: Context, attrs: AttributeSet?) {
    context.obtainStyledAttributes(attrs, R.styleable.LatticeEditText).apply {
        // background
        val backgroundColor = getColor(R.styleable.LatticeEditText_android_background, ContextCompat.getColor(context, R.color.latticeEditText_background))
        // 每个字符框占的宽度 & 高度
        mSize = getInteger(R.styleable.LatticeEditText_size, 4)
        mWide = getDimension(R.styleable.LatticeEditText_input_width, context.resources.getDimension(R.dimen.latticeEditText_dp36))
        mHigh = getDimension(R.styleable.LatticeEditText_input_height, context.resources.getDimension(R.dimen.latticeEditText_dp36))
        // 外边距
        val margin = getDimension(R.styleable.LatticeEditText_android_layout_margin, context.resources.getDimension(R.dimen.latticeEditText_dp4))
        mMarginRect = Rect(
            getDimension(R.styleable.LatticeEditText_android_layout_marginLeft, margin).toInt(),
            getDimension(R.styleable.LatticeEditText_android_layout_marginTop, margin).toInt(),
            getDimension(R.styleable.LatticeEditText_android_layout_marginRight, margin).toInt(),
            getDimension(R.styleable.LatticeEditText_android_layout_marginBottom, margin).toInt()
        )
        // text
        val textSize = getDimension(R.styleable.LatticeEditText_text_size, context.resources.getDimension(R.dimen.latticeEditText_sp14))
        val textColor = getColor(R.styleable.LatticeEditText_text_color, ContextCompat.getColor(context, R.color.latticeEditText_textColor))
        val text = getString(R.styleable.LatticeEditText_android_content) ?: ""
        val repText = getString(R.styleable.LatticeEditText_replace_text)
        // border
        mBorderColor = getColor(R.styleable.LatticeEditText_border_color, ContextCompat.getColor(context, R.color.latticeEditText_borderColor))
        mBorderWidth = getDimension(R.styleable.LatticeEditText_border_width, context.resources.getDimension(R.dimen.latticeEditText_dp1))
        mBorderRadius = getDimension(R.styleable.LatticeEditText_border_radius, 0f)
        mInputMode = getInteger(R.styleable.LatticeEditText_input_mode, 0)
        // cursor
        mCursorMode = getInteger(R.styleable.LatticeEditText_cursor_mode, 1)
        mCursorColor = getColor(R.styleable.LatticeEditText_cursor_color, ContextCompat.getColor(context, R.color.latticeEditText_cursorColor))
        mCursorBackground = getColor(R.styleable.LatticeEditText_cursor_background, backgroundColor)
        mShowCursor = getBoolean(R.styleable.LatticeEditText_show_cursor, true)
        mCursorWidth = getDimension(R.styleable.LatticeEditText_cursor_width, resources.getDimension(R.dimen.latticeEditText_dp1))
        mCursorHeight = getDimension(R.styleable.LatticeEditText_cursor_height, mHigh / 2)
        mCursorOrientation = getInteger(R.styleable.LatticeEditText_cursor_orientation, ORIENTATION_VERTICAL)
        
        // ......
        
    }.recycle()
}

override fun onDraw(canvas: Canvas) {
    // 绘制背景&边框
    for (i in 0 until mSize) {
        canvas.drawRoundRect(mInputRectList[i], mBorderRadius, mBorderRadius, mBackgroundPaint)
        canvas.drawRoundRect(mBorderRectList[i], mBorderRadius, mBorderRadius, mBorderPaint)
    }
    // 绘制 box 光标
    drawBoxCursor(canvas)
    // 绘制文字, 由于每个字符大小可能不一致，所以需要每个字符都进行测量
    // mSize.coerceAtMost(mContent.length) 保险措施，避免 mInputRectList 数组越界
    for (i in 0 until mSize.coerceAtMost(mContent.length)) {
        canvas.drawText(
            mReplaceText ?: mContent[i].toString(),
            mInputRectList[i].left + mTextPoint.x,
            mInputRectList[i].top + mTextPoint.y,
            mTextPaint
        )
    }
    // 绘制 line 光标
    drawLineCursor(canvas)
}

/**
 * 绘制 box 模式光标, 即盒子背景，需在绘制文字前绘制
 * @param canvas
 */
private fun drawBoxCursor(canvas: Canvas) {
    if (mShowCursor && isFocused && mCursorMode == MODE_CURSOR_BOX && mSelection < mSize) {
        canvas.drawRoundRect(mInputRectList[mSelection], mBorderRadius, mBorderRadius, mCursorBackgroundPaint)
        canvas.drawRoundRect(mBorderRectList[mSelection], mBorderRadius, mBorderRadius, mCursorPaint)
    }
}

/**
 * 绘制 line 模式光标, 即闪烁竖线，需在绘制文字后绘制光标
 * @param canvas
 */
private fun drawLineCursor(canvas: Canvas) {
    if (mShowCursor && isFocused && mCursorMode == MODE_CURSOR_LINE) {
        if (mInputMode == MODE_INPUT_LINE && mCursorOrientation == ORIENTATION_HORIZONTAL && mSelection < mSize) {
            // 横线光标
            canvas.drawRoundRect(mBorderRectList[mSelection], mBorderRadius, mBorderRadius, mCursorPaint)
        } else {
            // 竖线光标
            if (mIsTwink && mSelection < mSize) {
                val x = mInputRectList[mSelection].left + mWide / 2 + mCursorOffset
                canvas.drawLine(
                    x,
                    mInputRectList[mSelection].top + (mHigh - mCursorHeight) / 2,
                    x,
                    mInputRectList[mSelection].top + mHigh - (mHigh - mCursorHeight) / 2, mCursorPaint
                )
            }
            // 间隔刷新光标
            if (System.currentTimeMillis() - mPrevRefreshTime >= defaultRefreshTime) {
                mPrevRefreshTime = System.currentTimeMillis()
                mIsTwink = !mIsTwink
            }
            // 间隔 500ms 重绘
            postInvalidateDelayed(500)
        }
    }
}