安卓仿支付宝/微信密码输入框-(最low代码实现)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34536167/article/details/79680443

1、效果图

这里写图片描述

2、DialogActivity

public class DialogActivity extends AppCompatActivity {

    private List<String> list;

    private TextView tvPass1, tvPass2, tvPass3, tvPass4, tvPass5, tvPass6;
    private String pass1, pass2, pass3, pass4, pass5, pass6, cont;

    private Dialog mDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dialog);

        findViewById(R.id.dailog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //初始化dialog
                initDialog();
            }
        });
    }

    /**
     * 初始化dialog
     */
    private void initDialog() {

        if (list == null) {
            list = new ArrayList<>();
        }
        //防止多次点击出现重复数据
        list.clear();
        mDialog = new Dialog(this, R.style.AlertDialogStyle);
        //关联布局
        LinearLayout view = (LinearLayout) LayoutInflater.from(this).inflate(
                R.layout.layout_dailog, null);
        //将布局添加到dialog中
        mDialog.setContentView(view);
        //初始化控件(注意view点出否者空指针)
        view.findViewById(R.id.dialog_cancle).setOnClickListener(onClickListener);
        view.findViewById(R.id.dialog_submit).setOnClickListener(onClickListener);
        GridView gvKeybord = view.findViewById(R.id.gv_keybord);
        tvPass1 = (TextView) view.findViewById(R.id.tv_pass1);
        tvPass2 = (TextView) view.findViewById(R.id.tv_pass2);
        tvPass3 = (TextView) view.findViewById(R.id.tv_pass3);
        tvPass4 = (TextView) view.findViewById(R.id.tv_pass4);
        tvPass5 = (TextView) view.findViewById(R.id.tv_pass5);
        tvPass6 = (TextView) view.findViewById(R.id.tv_pass6);

        //适配器(上下文、数据源)
        DialogAdapter adapter = new DialogAdapter(this, setDialogData(list));
        gvKeybord.setAdapter(adapter);
        //GridView点击事件
        gvKeybord.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                //获取文本内容
                getTextContent();
                if (position == 9) {
                    //单键删除事件
                    setTextDeletet();
                } else if (position == 10) {
                    //普通数字点击事件
                    setTextNumber(position);
                } else if (position == 11) {
                    //删除全部事件
                    setTextDeletetAll();
                } else {
                    //0数字点击事件
                    setTextNumber(position + 1);
                }
            }
        });
        //应用Window
        Window mWindow = mDialog.getWindow();
        //底部显示
        mWindow.setGravity(Gravity.BOTTOM);
        //mWindow.setLayout(WindowManager.LayoutParams.MATCH_PARENT,WindowManager.LayoutParams.WRAP_CONTENT);
        // 添加动画
        //mWindow.setWindowAnimations(R.style.AlertDialogStyle);
        // 获取对话框当前的参数值
        WindowManager.LayoutParams lp = mWindow.getAttributes();
        //透明度
        lp.alpha = 9f;
        //宽度
        lp.width = WindowManager.LayoutParams.MATCH_PARENT;
        //高度
        lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
        //边距
        //mWindow.getDecorView().setPadding(0, 0, 0, 0);
        mWindow.setAttributes(lp);
        //点击外部不可取消
        mDialog.setCanceledOnTouchOutside(false);
        //mDialog.setCancelable(false);
        //显示
        mDialog.show();
    }

    /**
     * 普通数字点击与0点击事件
     *
     * @param position
     */
    private void setTextNumber(int position) {
        if (TextUtils.isEmpty(pass1) && cont.length() == 0) {
            tvPass1.setText(position == 10 ? "0" : position + "");
        } else if (TextUtils.isEmpty(pass2) && cont.length() == 1) {
            tvPass2.setText(position == 10 ? "0" : position + "");
        } else if (TextUtils.isEmpty(pass3) && cont.length() == 2) {
            tvPass3.setText(position == 10 ? "0" : position + "");
        } else if (TextUtils.isEmpty(pass4) && cont.length() == 3) {
            tvPass4.setText(position == 10 ? "0" : position + "");
        } else if (TextUtils.isEmpty(pass5) && cont.length() == 4) {
            tvPass5.setText(position == 10 ? "0" : position + "");
        } else if (TextUtils.isEmpty(pass6) && cont.length() == 5) {
            tvPass6.setText(position == 10 ? "0" : position + "");
        }
    }

    /**
     * 单键删除事件
     */
    private void setTextDeletet() {
        if (!TextUtils.isEmpty(pass1) && cont.length() == 1) {
            tvPass1.setText("");
        } else if (!TextUtils.isEmpty(pass2) && cont.length() == 2) {
            tvPass2.setText("");
        } else if (!TextUtils.isEmpty(pass3) && cont.length() == 3) {
            tvPass3.setText("");
        } else if (!TextUtils.isEmpty(pass4) && cont.length() == 4) {
            tvPass4.setText("");
        } else if (!TextUtils.isEmpty(pass5) && cont.length() == 5) {
            tvPass5.setText("");
        } else if (!TextUtils.isEmpty(pass6) && cont.length() == 6) {
            tvPass6.setText("");
        }
    }

    /**
     * 删除全部事件
     */
    private void setTextDeletetAll() {
        tvPass1.setText("");
        tvPass2.setText("");
        tvPass3.setText("");
        tvPass4.setText("");
        tvPass5.setText("");
        tvPass6.setText("");
    }

    /**
     * 获取文本内容
     */
    private void getTextContent() {
        pass1 = tvPass1.getText().toString();
        pass2 = tvPass2.getText().toString();
        pass3 = tvPass3.getText().toString();
        pass4 = tvPass4.getText().toString();
        pass5 = tvPass5.getText().toString();
        pass6 = tvPass6.getText().toString();
        cont = pass1 + pass2 + pass3 + pass4 + pass5 + pass6;
    }

    private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.dialog_cancle:
                    if (mDialog != null) {
                        mDialog.dismiss();
                    }
                    break;
                case R.id.dialog_submit:
                    getTextContent();
                    Toast.makeText(DialogActivity.this, cont, Toast.LENGTH_LONG).show();
                    break;
            }
        }
    };

    /**
     * 初始化数据源
     */
    private List<String> setDialogData(List<String> list) {

        for (int i = 0; i < 9; i++) {
            list.add(i + 1 + "");
        }
        list.add("<<");
        list.add("0");
        list.add("X");

        return list;
    }
}

3、对应的activity布局 -activity_dialog.xml

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

    <Button
        android:text="弹窗"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/dailog"/>

</LinearLayout>

4、对应的dialog布局与style

4.1、AlertDialogStyle:

<style name="AlertDialogStyle" parent="@android:style/Theme.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

4.2、TextView style -number_style

<style name="number_style">
        <!-- Customize your theme here. -->
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:inputType">numberPassword</item>
        <item name="android:textSize">25sp</item>
    </style>

4.3、View style -line_style

 <style name="line_style">
        <item name="android:layout_width">0.5dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">#9b9b9b</item>
    </style>

4.4、Dialog布局 - layout_dailog.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp">

            <!-- 取消按钮 -->
            <TextView
                android:id="@+id/dialog_cancle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:text="取消" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="输入密码"
                android:textColor="#898181"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/dialog_submit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:text="确定" />
        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#9b9b9b" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="25dp"
            android:background="@drawable/shape_edit"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_pass1"
                style="@style/number_style" />

            <View style="@style/line_style" />

            <TextView
                android:id="@+id/tv_pass2"
                style="@style/number_style" />

            <View style="@style/line_style" />

            <TextView
                android:id="@+id/tv_pass3"
                style="@style/number_style" />

            <View style="@style/line_style" />

            <TextView
                android:id="@+id/tv_pass4"
                style="@style/number_style" />

            <View style="@style/line_style" />

            <TextView
                android:id="@+id/tv_pass5"
                style="@style/number_style" />

            <View style="@style/line_style" />

            <TextView
                android:id="@+id/tv_pass6"
                style="@style/number_style" />
        </LinearLayout>
    </LinearLayout>

    <!-- 输入键盘 -->
    <GridView
        android:id="@+id/gv_keybord"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#eeeeee"
        android:horizontalSpacing="2dp"
        android:listSelector="@null"
        android:numColumns="3"
        android:verticalSpacing="2dp" />
    <!-- android:listSelector="@null"取消系统自带的按下效果,
    否则模拟键盘外围会有黑边 -->

</LinearLayout>

5、适配器 -DialogAdapter

public class DialogAdapter extends CommonAdapter<String> {

    public DialogAdapter(Context context, List<String> list) {
        super(context, R.layout.layout_dialog_item, list);
    }

    @Override
    public void convert(ViewHolder holder, String item, int postion) {
        //标题
        holder.setText(R.id.item_number,item);

    }
}

注意:其中CommonAdapter参考以前文章

对应的item布局 -layout_dialog_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="#ffffff">

    <TextView
        android:id="@+id/item_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" />

</LinearLayout>

猜你喜欢

转载自blog.csdn.net/qq_34536167/article/details/79680443