美文网首页
验证码输入框 下划线样式 盒子样式

验证码输入框 下划线样式 盒子样式

作者: 英勇的骑士_d175 | 来源:发表于2020-12-21 16:33 被阅读0次

    "# VerifyCodeInputView"
    github地址: https://github.com/546554574/VerifyCodeInputView

    验证码的输入组件,包含盒子样式和下划线样式,属性可自定义!话不多说,上图 img01 (1).jpg

    img01 (2).jpg

    使用:

    step1

     implementation 'cn.toune:verifyCodeInputView:1.0.1'
    

    step2

     
    <com.toune.verifycodeinputview.DLVerifyCodeInputView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:inputStyle="line"    //下划线样式
        app:textColor="#00ff00"  //文本颜色
        app:textSize="13sp" //文本字体大小
        app:lineWidth="10dp" //下划线的线长,默认按照总宽度根据输入框数量平分
        app:lineHeight="3dp" //下划线的线宽
        app:lineSelectColor="@color/design_default_color_primary_variant"//输入数字之后下划线的颜色
        app:lineDefColor="@color/design_default_color_secondary_variant" //没有输入数字(默认状态)下划线的颜色
        app:lineVerPadding="15dp" //文本和下划线的间距
        app:lineHorPadding="15dp" //每一个输入框的间距(包含下划线)
        app:num="6"//输入框数量
        />
    
        <com.toune.verifycodeinputview.DLVerifyCodeInputView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:inputStyle="box" //盒子样式
            app:boxLineWidth="3dp" //线宽
            app:textColor="#ff0000" //文本颜色
            app:textSize="13sp" //文本大小
            app:boxLineColor="@color/black" //线的颜色
            app:num="6" //输入框数量
            />
    
    

    step3

     var dlVerifyCodeInputView = findViewById<DLVerifyCodeInputView>(R.id.dlVerifyCodeInputView)
            dlVerifyCodeInputView.finishListener = object :DLVerifyCodeInputView.FinishListener{
                override fun finish(code: String) {
                    //输入完成之后调用,code为输入内容
                }
            }
    

    说明:

    觉得好用麻烦star

    相关文章

      网友评论

          本文标题:验证码输入框 下划线样式 盒子样式

          本文链接:https://www.haomeiwen.com/subject/rnornktx.html