Android自定义键盘与密码输入框:使用BasicUI库的简单实现

1,253 阅读2分钟

一、前言


BasicUI是一些常用的Android UI组件和一些实用工具类封装,提高Android的开发效率

使用文档链接:github.com/Peakmain/Ba…

How to

  • Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
  • Step 2. Add the dependency
implementation 'com.github.Peakmain:BasicUI:+'
  • Step 3.some probleam

    如果你的gradle版本比3.5.3高,可能会出现以下几个问题:

    1、Entry name 'AndroidManifest.xml' collided

    解决办法:在gradle.properties添加以下代码

    android.useNewApkCreator=false
    

    2、如果安装失败,用adb install安装报错提示如下

    failed to install app-debug.apk: Failure [INSTALL_PARSE_FAILED_UNEXPECTED_EXCEPTION: Failed to parse /data/app/vmdl1335956833.tmp/base.apk: Corrupt XML binary file]

    解决办法:在添加依赖的build.gradle中添加以下代码

      android{
           packagingOptions {
            exclude 'AndroidManifest.xml'
         }
       }
    

二、自定义键盘

效果图

image.png

image.png

image.png

使用

        <com.peakmain.ui.widget.password.PasswordEditText
            android:id="@+id/password_edit_text"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen_50"
            android:layout_marginLeft="@dimen/dimen_17"
            android:layout_marginRight="@dimen/dimen_17"
            android:layout_marginBottom="@dimen/dimen_16"
            app:bgColor="@color/color_f1f4f6"
            app:bgCorner="@dimen/dimen_4"
            app:layout_constraintBottom_toTopOf="@id/tv_show_password"
            app:passwordColor="@color/black" />

自定义属性说明

属性名属性类型描述
ckExtraKeyString是否显示身份证信息,true表示显示
ckDecimalPlacesinteger小数点后几位
ckShowKeyBroadboolean是否显示小数点

方法说明

方法名方法返回类型描述
setOnCustomerKeyboardClickListenervoid自定义点击事件,有三个方法实现:①、click(number: String?)点击事件;②、delete():删除事件、③、dissmiss():键盘隐藏事件

示例代码

支付密码键盘
        <com.peakmain.ui.widget.password.CustomerKeyboard
            android:id="@+id/custom_key_board"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent" />

image.png

身份证键盘
        <com.peakmain.ui.widget.password.CustomerKeyboard
            android:id="@+id/custom_key_board"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            app:ckExtraKey="X"
            android:layout_height="wrap_content" />

image.png

小数点键盘
        <com.peakmain.ui.widget.password.CustomerKeyboard
            android:id="@+id/custom_key_board"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            app:ckExtraKey="."
            app:ckDecimalPlaces="3"
            android:layout_height="wrap_content" />

image.png

三、自定义密码输入框

效果图

自定义支付密码输入框.gif

属性说明

属性名属性类型描述
passwordNumberinteger密码的个数
passwordRadiusdimension密码圆点的半径
passwordColorcolor密码圆点的颜色
divisionLineColorcolor分割线的颜色
divisionLineSizedimension分割线的大小
bgColorcolor背景边框的颜色
bgSizedimension背景边框的大小
bgCornerdimension背景边框的圆角大小
bgFillColorcolor背景的填充颜色

方法说明

方法名方法返回值类型描述
addPasswordNumbervoid添加密码
deletePassWordvoid删除密码
setPasswordCompleteListenervoid设置密码输入完成事件
setPasswordVisiblevoid设置密码是否可见
isPasswordVisiblevoid判断密码是否可见

示例

  • 布局

        <com.peakmain.ui.widget.password.PasswordEditText
            android:id="@+id/password_edit_text"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen_50"
            android:layout_marginLeft="@dimen/dimen_17"
            android:layout_marginRight="@dimen/dimen_17"
            android:layout_marginBottom="@dimen/dimen_16"
            app:bgColor="@color/color_f1f4f6"
            app:bgCorner="@dimen/dimen_4"
            app:layout_constraintBottom_toTopOf="@id/tv_show_password"
            app:passwordColor="@color/black" />
  • 设置密码输入完成监听回调事件

      mEditText!!.setPasswordCompleteListener { text: String -> ToastUtils.showShort(text) }