最新消息:文章中包含代码时,请遵守代码高亮规范!

Android格子输入框实现【原创】

Android 李, 泰愚 610浏览 0评论

记录一个项目中需要实现的格子输入框  如图所示

要求大致是待输入的格子背景为带点白色遮罩的黑色背景,其余输入框则是纯黑色背景,总共最多输入位8位。个人觉得要点在于输入控件的选择,以及控制键盘输入与删除两种情况下,背景切换以及数字的显示。经前辈提点,选择的方案是用8个TextView和EditText组合使用,EditView被TextView遮盖,且通过属性的设置,隐藏起来,当用户输入时,通过给EditView设置监听,取输入的字符,让TextView一一显示出来。

首先时布局文件的代码,如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_corner_up_dialog_deposit"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/rlayout_title"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:text="手动输入"
            android:textColor="#000000"
            android:textSize="16sp" />

        <TextView
            android:layout_marginTop="5dp"
            android:id="@+id/tv_003"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_001"
            android:layout_gravity="center_horizontal"
            android:text="请您手动输入"
            android:textColor="#000000"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv_002"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_001"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:text="请输入正确的ID:"
            android:textColor="#000000"
            android:textSize="14sp" />

        <FrameLayout
            android:id="@+id/flayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:maxLength="8"
                android:inputType="number"
                android:textSize="0sp"
                android:longClickable="false"
                android:textIsSelectable="false"
                android:id="@+id/edit_num"
                android:background="@null"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <LinearLayout
                android:id="@+id/llayout_ma"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="9dp"
                android:layout_marginRight="9dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="40dp"
                android:layout_below="@+id/tv_002"
                android:gravity="center_vertical"
                android:orientation="horizontal">


                <TextView
                    android:id="@+id/tv_code_1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_lightcolour"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />


                <TextView
                    android:id="@+id/tv_code_2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_4"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_5"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_6"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_7"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />

                <TextView
                    android:id="@+id/tv_code_8"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1"
                    android:background="@mipmap/block_icon_dark"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:textSize="30sp"
                    android:visibility="visible" />
            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

    <LinearLayout
        android:padding="20dp"
        android:background="@drawable/shape_corner_down_dialog_deposit"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_cancel"
            android:padding="10dp"
            android:text="取消"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="40dp"
            android:background="@drawable/shape_corner_dialog_input_car_num_btn_white"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_sure"
            android:text="立即用车"
            android:background="@drawable/shape_corner_dialog_input_car_num_btn_yellow"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

主要是FrameLayout中的EditView和TextView,其余则是弹窗需要的控件和一些样式,图片背景等。

控制弹窗的代码为:

//装弹窗上的8个textview的list,用于遍历操作
private List<TextView> textViews = new ArrayList<>();

/**
 * 显示弹窗
 */
private void showInputDialog() {
    //弹窗布局文件转换
    View view = View.inflate(MainActivity.this, R.layout.dialog_input, null);
    final Dialog dialog = new Dialog(MainActivity.this, R.style.MyDialogStyleBottom);
    dialog.setContentView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

    //取到布局中的控件
    final EditText editText = (EditText) view.findViewById(R.id.edit_num);
    final TextView code_1 = (TextView) view.findViewById(R.id.tv_code_1);
    final TextView code_2 = (TextView) view.findViewById(R.id.tv_code_2);
    final TextView code_3 = (TextView) view.findViewById(R.id.tv_code_3);
    final TextView code_4 = (TextView) view.findViewById(R.id.tv_code_4);
    final TextView code_5 = (TextView) view.findViewById(R.id.tv_code_5);
    final TextView code_6 = (TextView) view.findViewById(R.id.tv_code_6);
    final TextView code_7 = (TextView) view.findViewById(R.id.tv_code_7);
    final TextView code_8 = (TextView) view.findViewById(R.id.tv_code_8);
    Button cancel = (Button) view.findViewById(R.id.btn_cancel);
    Button sumbit = (Button) view.findViewById(R.id.btn_sure);
    View flayout = view.findViewById(R.id.flayout);

    flayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            editText.setSelection(editText.getText().toString().length());
            InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
            imm.showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT);
        }
    });

    cancel.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });

    sumbit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(editText.getText().toString().length() < 8) {
                Toast.makeText(getApplicationContext(), "错误", Toast.LENGTH_LONG);
            } else {
                dialog.dismiss();
                //做点击确定按钮要做的逻辑
            }

        }
    });

    textViews.clear();
    textViews.add(code_1);
    textViews.add(code_2);
    textViews.add(code_3);
    textViews.add(code_4);
    textViews.add(code_5);
    textViews.add(code_6);
    textViews.add(code_7);
    textViews.add(code_8);

    editText.addTextChangedListener(watcher);

    WindowManager m = getWindowManager();
    Display d = m.getDefaultDisplay();  //为获取屏幕宽、高
    WindowManager.LayoutParams p = dialog.getWindow().getAttributes();  //获取对话框当前的参数值
    p.width = (int) (d.getWidth() * 0.8);    //宽度设置为屏幕的0.75
    dialog.getWindow().setAttributes(p);     //设置生效

    dialog.setOnShowListener(new DialogInterface.OnShowListener(){
        public void onShow(DialogInterface dialog){
            editText.setText("");
            InputMethodManager imm= (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
            imm.showSoftInput(editText,InputMethodManager.SHOW_IMPLICIT);
        }
    });

    dialog.show();
}

//edittext监听
private TextWatcher watcher = 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) {
        if(count == 0) {
            int index = 0;
            for(int i = s.length() - 1; i >= 0; i--) {
                textViews.get(i).setText(String.valueOf(s.charAt(i)));
                textViews.get(i).setBackgroundResource(R.mipmap.block_icon_dark);
                index++;
            }
            if(index <=7) {
                textViews.get(index).setBackgroundResource(R.mipmap.block_icon_lightcolour);
                textViews.get(index).setText("");
                for (int j = index + 1; j < 8; j++) {
                    textViews.get(j).setBackgroundResource(R.mipmap.block_icon_dark);
                }
            }
        } else {
            int index = 0;
            for(int i = 0; i < s.length(); i++) {
                textViews.get(i).setText(String.valueOf(s.charAt(i)));
                textViews.get(i).setBackgroundResource(R.mipmap.block_icon_dark);
                index++;
            }
            if(index <=7) {
                textViews.get(index).setBackgroundResource(R.mipmap.block_icon_lightcolour);
            }

        }
    }

    @Override
    public void afterTextChanged(Editable s) {

    }
};

在显示弹窗的方法里,要点时装8个TextView的List,用于在TextWatcher里进行遍历从而进行一些列操作,要注意的一点是对List一定要有clear操作,否则会一直添加数据,从而导致,对TextView的操作有误,要保证List中只有显示的八个TextView。

而在TextWatch中,要点也就是对上述的List进行循环遍历。重写的onTextChanged方法,是在EditView文本有变化时执行的,参数count为0时表示删除,反之则为输入。以count值区分输入和删除两种用户操作。遍历时用charAt取出EditView中一个个字符,逐个填入对应编号的TextView中,且进行背景切换操作,待输入的TextView背景为全黑色,要注意的时需要判断是否有下一个,当最后一个格子填入数据后,则不用对下一个待输入框进行切换背景操作,否则也会出现下标越界的报错。

其他的则是一些其余控件点击事件的屏蔽,输入法软键盘的弹出,EditView进行属性设置让其“假隐藏”,诸如在布局文件里添加背景为null,textSize为0sp等。

这是脑海里第一个出现的方法,也许会有更好的实现,比如循环遍历的代码是否能有优化等等,有空再想想有没有更好的实现方法。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/21911.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者rick的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!