返回顶部
首页 > 资讯 > 移动开发 >Android自定义九宫格输入框
  • 459
分享到

Android自定义九宫格输入框

2024-04-02 19:04:59 459人浏览 独家记忆
摘要

本文实例为大家分享了Android自定义九宫格输入框的具体代码,供大家参考,具体内容如下 效果 实现 绘制宫格分割线 这里我们用一个RectF类型的数组来装载数据。在onSizeC

本文实例为大家分享了Android自定义九宫格输入框的具体代码,供大家参考,具体内容如下

效果

实现

  • 绘制宫格分割线

这里我们用一个RectF类型的数组来装载数据。在onSizeChanged方法中获取到控件尺寸,经过计算,将81个位置合适的矩形保存到数组中。

  • 绘制点击效果

onTouchEvent方法中监听手指离开事件,当手指离开,获取到当前点击区域的RectF,并将状态同样保存到一个数组中。

  • 绘制输入内容

输入内容利用onTextChanged方法获取,同样保存到一个数组中。

  • PS

控件中没有考虑UI重建数据保存问题,使用中要注意这点~~~

这三个数组中数据一一对应,在onDraw中,根据三个数组中数据内容绘制界面。完成我们的自定义View。

源码


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);
    }

    
    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);
    }

    
    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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Android自定义九宫格输入框

本文链接: https://lsjlt.com/news/152830.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Android自定义九宫格输入框
    本文实例为大家分享了Android自定义九宫格输入框的具体代码,供大家参考,具体内容如下 效果 实现 绘制宫格分割线 这里我们用一个RectF类型的数组来装载数据。在onSizeC...
    99+
    2024-04-02
  • Android自定义控件实现九宫格解锁
    关于九宫格解锁,我看了不少博客,但是都感觉很复杂,可能我的功夫还不到,所以很多东西我不了解,但是我还是打算写一个自己的九宫格。我相信我的九宫格大家都能很快的理解,当然如果需要实现更复...
    99+
    2024-04-02
  • IOS自定义UIButton九宫格效果
    此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少。因此,主要利用UIButton阐述的; 实列不复杂,就两三个步骤完成: 一、定义宽度与高度(self.vie...
    99+
    2022-05-28
    IOS 九宫格
  • 轻松实现Android自定义九宫格图案解锁
    Android实现九宫格图案解锁,自带将图案转化成数字密码的功能,代码如下: LockPatternView.java package com.jackie.lockpatt...
    99+
    2022-06-06
    解锁 Android
  • Android自定义ViewGroup实现朋友圈九宫格控件
    目录一、简介 1.1、效果图如下1.2、主要功能如下二、使用 2.1、自定义属性如下2.2、布局中使用自定义NineImageLayout2.3、Adapter方式绑定数据和UI2....
    99+
    2024-04-02
  • Android自定义控件实现九宫格解锁功能
    最终Android九宫格解锁效果如下进行定义实体point点public class Point { private float x; private float y; //正常模式 public static final int NORM...
    99+
    2023-05-31
    android 九宫格 解锁
  • Android自定义View实现九宫格图形解锁(Kotlin版)
    本文实例为大家分享了Android自定义View实现九宫格图形解锁的具体代码,供大家参考,具体内容如下 效果: 代码: package com.example.kotlin_t...
    99+
    2024-04-02
  • Android自定义view实现滑动解锁九宫格控件
    目录前言需求效果图前言 上一篇文章用贝塞尔曲线画了一个看起来不错的小红点功能,技术上没什么难度,主要就是数学上的计算。这篇文章也差不多,模仿了一个常用的滑动解锁的九宫格控件。 需求 ...
    99+
    2023-02-09
    Android滑动解锁九宫格 Android滑动解锁 Android九宫格控件
  • 使用Android自定义控件实现滑动解锁九宫格
    本文概述:  滑动解锁九宫格的分析: 1、需要自定义控件; 2、需要重写事件onTouchEvent(); 3、需要给九个点设置序号和坐标,这里用Map类就行;...
    99+
    2022-06-06
    解锁 Android
  • Android如何自定义ViewGroup实现朋友圈九宫格控件
    本篇内容介绍了“Android如何自定义ViewGroup实现朋友圈九宫格控件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!目录一、简介1、...
    99+
    2023-06-20
  • Android自定义View验证码输入框
    本文实例为大家分享了Android自定义View验证码输入框的具体代码,供大家参考,具体内容如下 验证码输入框 1.先看下样式 2.直接上代码 public class M...
    99+
    2022-06-06
    view 输入 输入框 Android
  • Android自制九宫格解锁控件
    本文实例为大家分享了Android自制九宫格解锁控件的具体代码,供大家参考,具体内容如下 前两天从网上学习了下如何自定义一个九宫格解锁的控件,于是自己根据逻辑写了一遍,自定义控件的代...
    99+
    2024-04-02
  • Android Compose自定义TextField如何实现自定义的输入框
    这篇文章主要介绍Android Compose自定义TextField如何实现自定义的输入框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!简单自定义BasicTextField示例代码 var&n...
    99+
    2023-06-29
  • Android自定义view实现输入框效果
    本文实例为大家分享了Android自定义view实现输入框的具体代码,供大家参考,具体内容如下 自定义输入框的View package com.fenghongzhang.day...
    99+
    2024-04-02
  • Android自定义view实现TextView方形输入框
    本文实例为大家分享了Android自定义view实现TextView方形输入框的具体代码,供大家参考,具体内容如下 先奉上最终效果图 实现思路分析: 1、 使用一个LinearLa...
    99+
    2024-04-02
  • Android怎么实现自定义密码输入框
    本篇内容主要讲解“Android怎么实现自定义密码输入框”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android怎么实现自定义密码输入框”吧!一、实现效果及方案预期效果图:如上图所示,要实现...
    99+
    2023-06-25
  • Android 自定义EditText输入框带清空按钮
    Android 自定义EditText输入框带清空按钮当用户输入字符后 EditText会自动在输入框的内部右侧出现删除按钮重写EditText达到简化布局的效果效果图:继承EditTextpackage com.example.myedi...
    99+
    2023-05-31
    android edittext 清空按钮
  • Android如何自定义输入文本对话框?
    文章目录 0.引言1.创建示例工程2.输入文本对话框布局和功能设计3.主程序调用输入文本对话框 0.引言   笔者研究的课题涉及到安卓软件开发,在开发过程中,发现普通的显示消息对话框一般可...
    99+
    2023-10-26
    android java android studio
  • AndroidCompose自定义TextField实现自定义的输入框
    目录概览简单自定义BasicTextField示例实现自定义样式的BasicTextField使用BasicTextField自定义百度输入框概览 众所周知Compose中默认的Te...
    99+
    2024-04-02
  • Android自定义验证码输入框的方法实例
    目录实践过程总结实践过程 前面我们学完了EditText和TextView两个组件,但是,光学不练没意思。 所以今天我们趁热打铁,利用两个组件实现个自定义验证码输入框。 思路前瞻:...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作