Skip to content

EditText

xuexiangjys edited this page Apr 26, 2022 · 15 revisions

Android输入框组件。包括MaterialEditText、密码输入框、带清除按钮的输入框以及自动校验的输入框。

MaterialEditText

遵循谷歌Material Design设计风格的输入框,功能强大,支持清除按钮、长度校验、悬浮提示、出错提示、样式自定义、自定义校验规则,自动校验等。

  • 演示效果

  • 使用案例
<com.xuexiang.xui.widget.edittext.materialedittext.MaterialEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Floating Label"
        app:met_floatingLabel="normal" />
        
<com.xuexiang.xui.widget.edittext.materialedittext.MaterialEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Custom Floating Label Text"
        app:met_floatingLabel="normal"
        app:met_floatingLabelText="Label" />
  • 属性表: (MaterialEditText)
属性名 类型 默认值 备注
met_baseColor color Color.BLACK 线和文字的基础颜色
met_primaryColor color ?colorPrimary 高亮样式的颜色
met_floatingLabel enum none(normal,highlight) 悬浮提示文字的样式
met_errorColor color #e7492E 出现错误时文字的颜色
met_minCharacters integer 0 最少文字的限制(0代表无限)
met_maxCharacters integer 0 最多文字的限制(0代表无限)
met_allowEmpty boolean true 是否允许输入为空
met_errorEmpty string "输入不能为空" 为空的错误提示
met_singleLineEllipsis boolean false 底部文字是否显示单行,显示不全的省略号
met_helperText string / 在底部的辅助文字
met_helperTextColor color -1 辅助文字的颜色
met_floatingLabelText string / 自定义悬浮提示的文字
met_floatingLabelPadding dimension 8dp 输入框文字与悬浮提示文字的间距
met_hideUnderline boolean false 隐藏底线
met_underlineColor color -1 输入框底线的颜色
met_autoValidate boolean false 是否自动校验
met_iconLeft reference -1 左侧图标资源
met_iconRight reference -1 右侧图标资源
met_iconPadding dimension 8dp 图标与输入区域的距离
met_clearButton boolean false 是否使用清除按钮
met_passWordButton boolean false 是否使用显示密码按钮
met_isAsteriskStyle boolean false 密码输入框文字的样式是否是“*”
met_floatingLabelTextSize dimension 12sp 悬浮提示文字的大小
met_floatingLabelTextColor color -1 悬浮提示文字的颜色
met_bottomTextSize dimension 12sp 底部提示文字的大小
met_floatingLabelAlwaysShown boolean false 悬浮提示一直显示(而不是通过动画显示/消失)
met_helperTextAlwaysShown boolean false 是否一直显示辅助性文字(错误提示),无论是否在焦点
met_floatingLabelAnimating boolean false 是否使用动画显示悬浮提示
met_textColor color / 输入文字的颜色
met_textColorHint color / 提示文字的颜色
met_validateOnFocusLost boolean false 是否失去焦点后自动校验
met_checkCharactersCountAtBeginning boolean true 是否在文字显示的时候开始计算文字的数量
met_regexp string / 校验的正则表达式
met_errorMessage string / 校验不通过的提示信息

ClearEditText

轻量级的带清除功能的输入框。

  • 演示效果

  • 使用案例
<com.xuexiang.xui.widget.edittext.ClearEditText
    android:id="@+id/clearEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp" />

<com.xuexiang.xui.widget.edittext.ClearEditText
    android:id="@+id/clearEditText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cet_clearIcon="@drawable/icon_clear"
    app:cet_clearIconSize="@dimen/default_clear_icon_size"
    android:layout_margin="5dp" />
  • 属性表: (ClearEditText)
属性名 类型 默认值 备注
cet_clearIcon reference / 清除按钮的图片资源
cet_clearIconSize dimension 0 清除按钮的图片尺寸

PasswordEditText

支持密码显示隐藏的输入框。

  • 演示效果

  • 使用案例
<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_marginTop="16dp"
    android:gravity="start"
    android:textAlignment="viewStart">

    <com.xuexiang.xui.widget.edittext.PasswordEditText
        android:id="@+id/input_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:hint="输入密码"
        android:inputType="textPassword"
        android:textAlignment="viewStart"
        app:pet_enableIconAlpha="true" />
</android.support.design.widget.TextInputLayout>

<com.xuexiang.xui.widget.edittext.PasswordEditText
    android:id="@+id/input_password2"
    fontPath="fonts/Roboto-Thin.ttf"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_marginTop="8dp"
    android:gravity="start"
    android:hint="重复密码"
    android:inputType="textPassword"
    android:textAlignment="viewStart"
    app:pet_enableIconAlpha="true"
    app:pet_hoverShowsPw="true" />
  • 属性表: (PasswordEditText)
属性名 类型 默认值 备注
pet_iconShow integer R.drawable.icon_visibility_24dp 显示密码的图标资源
pet_iconHide integer R.drawable.icon_visibility_off_24dp 隐藏密码的图标资源
pet_hoverShowsPw boolean false 是否触摸显示密码
pet_nonMonospaceFont boolean false 是否使用系统默认字体
pet_enableIconAlpha boolean true 图标是否设置透明度
pet_isAsteriskStyle boolean false 密码输入框文字的样式是否是“*”

ValidatorEditText

可自动验证的输入框,支持自定义校验规则。可支持自定义错误提示。

  • 演示效果

  • 使用案例
<com.xuexiang.xui.widget.edittext.ValidatorEditText
    style="@style/EditText.Normal"
    android:layout_width="300dp"
    android:layout_margin="10dp"
    android:singleLine="true"
    app:vet_tipPosition="top"
    app:vet_regexp="@string/regexp_number_only"
    app:vet_errorMessage="@string/tip_number_only_error_message"/>
  • 属性表: (ValidatorEditText)
属性名 类型 默认值 备注
vet_regexp string / 校验的正则表达式
vet_errorMessage string / 校验不通过的提示信息
vet_autoValidate boolean false 是否自动校验
vet_showErrorIcon boolean true 是否显示出错图标
vet_errorIcon reference R.drawable.ic_default_tip_btn 出错提示的图片资源
vet_errorIconSize dimension 0 出错提示的图片尺寸
vet_tipPosition enum right(left,top,bottom) 出错提示显示的位置

MultiLineEditText

多行计数输入框。

  • 演示效果

  • 使用案例
<com.xuexiang.xui.widget.edittext.MultiLineEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp" />
  • 属性表: (MultiLineEditText)
属性名 类型 默认值 备注
mlet_maxCount integer 240 最大输入文字的数目
mlet_ignoreCnOrEn boolean true 是否忽略中英文的差异
mlet_hintText string / 输入框提示文字
mlet_hintTextColor color R.attr.xui_config_color_hint_text 输入框提示文字的颜色
mlet_contentPadding dimension 10dp 输入框的padding
mlet_contentBackground reference / 输入框背景
mlet_contentText string / 输入框的内容
mlet_contentTextSize dimension 14sp 输入框文字的大小
mlet_contentTextColor color R.attr.xui_config_color_input_text 输入框文字的颜色
mlet_contentViewHeight dimension 140dp 输入框的高度
mlet_showSurplusNumber boolean false 统计数字显示剩余数目
mlet_isFixHeight boolean true 输入框的高度是否是固定高度

VerifyCodeEditText

用于手机验证码验证和支付密码验证的输入框组件。

  • 演示效果

  • 使用案例
<com.xuexiang.xui.widget.edittext.verify.VerifyCodeEditText
    android:id="@+id/vcet_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="26dp"
    android:layout_marginRight="10dp"
    app:vcet_is_pwd="true"
    app:vcet_number="6"
    app:vcet_pwd_radius="10dp"
    app:vcet_text_color="#000000"
    app:vcet_width="50dp" />
  • 属性表: (VerifyCodeEditText)
属性名 类型 默认值 备注
vcet_number integer 4 输入框的数量
vcet_width dimension 21dp 每一个输入框的宽度
vcet_is_divide_equally boolean false 平分每个输入框的宽度。如果为true,vcet_width值将失效
vcet_divider reference / 输入框之间的分割线
vcet_text_color color Color.BLACK 输入框文字颜色
vcet_text_size dimension 16sp 输入框文字大小
vcet_bg_focus reference / 输入框获取焦点时背景
vcet_bg_normal reference / 输入框没有焦点时背景
vcet_is_pwd boolean false 是否是密码模式
vcet_pwd_radius dimension 5dp 密码模式时,圆的半径