MaterialEditText

  • 文字输入框 (EditText)
  • ★★★★★
  • 2015-04-20 14:47
  • 453 kb
  • Android Studio

介绍:

AppCompat v21使得在app中实现Material风格的文字输入框变得更加容易,但是限制很多,如果你尝试过,肯定懂我在说什么。因此作者写了这个MaterialEditText,实现Google Material Design 中的多种效果。比较实用的是字数限制,带清除按钮等功能。

运行效果:

使用说明:

随着 Material Design 的到来, AppCompat v21 中也提供了 Material Design 的控件外观支持,其中包括 EditText 。但 AppCompat 中的 EditText 实在有点难用,因为它是通过 colorAccent 来自动为控件着色的,并没有提供设置颜色的api,因此需要通过为控件定制theme的方式来实现自定义控件颜色。 另外,除了外观上的变化, AppCompat 没有提供任何 Google Material Design Spec 中提到的特性。于是我便做了这个库: MaterialEditText 。


特性和使用方式:

  • 基本使用

在布局文件中把 EditText 替换为 com.rengwuxian.materialedittext.MaterialEditText 就行了。MaterialEditText 是直接继承的 EditText ,没有加入一些 Wrapper Layout , 因此多数情况下你不需要修改 java 文件。

<com.rengwuxian.materialedittext.MaterialEditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="Basic"/>

Basic

  • 自定义颜色

Base Color 被用作背景线的颜色、主字体的颜色(透明度被重置为87%)和提示字体的颜色(透明度被重置为26%)。你可以使用 app:met_baseColor(xml) 或者 setBaseColor()(java) 来指定 Base Color 。Base Color 的默认值为纯黑。

  app:met_baseColor="#0056d3"

BaseColor

Primary Color 被用作激活状态的输入框背景色、高亮的Floating Label色和底部省略号的颜色。你可以使用 app:met_primaryColor (xml) 或者 setPrimaryColor()(java) 来指定 Primary Color。如果没有设置Primary Color,默认将使用 Base Color 来替代。

app:met_baseColor="#0056d3"app:met_primaryColor="#982360"

PrimaryColor

  • Floating Label

Floating Label 有三种模式: none , normal , highlight 。 你可以使用 app:met_floatingLabel (xml) 或者 setFloatingLabel() (java) 来设置 Floating Label 的模式。

normal:

  app:met_floatingLabel="normal"

FloatingLabel

highlight:

  app:met_floatingLabel="highlight"

HighlightFloatingLabel

自定义 floating label 的文字:

  app:met_floatingLabelText="XXX"

![CustomFloatingLabelText]./images/MaterialEditText/custom_floating_label_text.png)

  • 底部省略号

当设置显示底部省略号后,控件会在文字向左滚动时在底部左侧显示一个三个点的省略号,点击省略号将自动把光标置于字符串的开始处。你可以通过 app:met_singleLineEllipsis=true (xml) 或者 setSingleLineEllipsis() (java) 来设置它。这个属性将自动设置 android:singleLine 为 true。

注意:底部省略号会自动增大控件底部的高度。

  app:met_singleLineEllipsis="true"

SingLineEllipsis

  • 字符数限制

设置字符数限制后,控件右下角会显示已输入字符数和最大字符数的角标,并在超过限制后显示警告色(默认为红色)。 你可以通过 app:maxCharacters (xml) 或者 setMaxCharacters() (java) 来设置字符数,通过 app:errorColor 或者 setErrorColor() (java) 来自定义警告色。
使用 app:met_maxCharacters (xml) 或者 setMaxCharacters() (java) 来设置最多字数,使用 app:met_minCharacters (xml) 或者 setMinCharacters() (java) 来设置最少字数. 当字数不符合限制要求的时候,底部的线和显示字数的角标都会变红(你也可以使用 app:met_errorColor 或者 setErrorColor() 来自定义 error color)。

注意:字符数角标会自动增大控件底部的高度。

  app:met_minCharacters="5"
  app:met_maxCharacters="10"

默认 error color:

MaxCharacters

自定义 error color:

  app:met_maxCharacters="10"
  app:met_errorColor="#ddaa00"

CustomErrorColor

  • Helper Text 和 Error Text

    HelperTextAndErrorText

    helper text:

    app:met_helperText="Integer"

    error text:

    在 java代码中调用原生的 setError(CharSequence error) 就可以实现.

    正则表达式检查:

    validationEditText.isValid("\\d+");

    带有报错字符串的正则表达式检查:

    validationEditText.validate("\\d+", "Only Integer Valid!");
  • 自定义 accent typeface

    floating label, error/helper text, character counter 的typeface.

    app:met_accentTypeface="fonts/Roboto-LightItalic.ttf"

    CustomAccentTypeface

  • Hide Underline

    app:met_hideUnderline="true"

    HideUnderLine

  • 字符串检查

    检查后,如果有错,将自动调用 setError() 方法来提示错误。

    单一条件检查:

    et.validateWith(new RegexpValidator("Only Integer Valid!", "\\d+"));

    复合条件检查:

    et.addValidator(new CustomValidator1()).addValidator(new CustomValidator2()).addValidator(new RegexpValidator("Only Integer Valid!", "\\d+"));

全部参数

通用颜色

met_baseColor: 底部横线和所有文字在无焦点状态的基础色。默认为黑色。

met_primaryColor: 底部横线和 Floating label 的高亮色(如果 met_floatingLabel 设置为 highlight 的话)。默认使用 baseColor。

met_textColor: 和自带的 android:textColor 作用相同。换用这个就好。

met_textColorHint: 和自带的 android:textColorHint 作用相同。换用这个就好。

met_underlineColor: 自定义底部横线的颜色。

Floating label

met_floatingLabel: Floating label 应该怎样被展示。选项有:none, normal, highlight。 默认是 none.

met_floatingLabelText: 自定义 floating label 的文字。

met_floatingLabelTextSize: Floating label 的字体大小。默认为 12sp。

met_floatingLabelTextColor: Floating label 的字体颜色。默认为半透明的 baseColor.

met_floatingLabelPadding: Floating label 和主文字区域的间隔。

met_floatingLabelAnimating: 是否使用动画来显示和消失 floating label 。默认为 true 。

met_floatingLabelAlwaysShown: 是否总是显示 Floating label 。默认为 false 。

字数限制

met_minCharacters: 限制的最少字数。默认为0。

met_maxCharacters: 限制的最大字数。0为无限制。默认为0.

Helper/Error text

met_helperText: 底部的 helper text。

met_helperTextAlwaysShown: 是否总是显示 helper text, 而不仅仅是在获得焦点状态时。默认为 false。

met_helperTextColor: Helper text 的字体颜色。

met_errorColor: Error text 的字体颜色。

met_bottomTextSize: 底部文字(Helper/Error text)的字体大小。默认为12sp。

met_minBottomTextLines:底部为文字预留的行数,不管是否有 Helper/Error text 正在显示。

字体(Typeface)

met_typeface: 主文字的字体.

met_accentTypeface: 辅助文字的字体.

Material Design 风格的左右图标

met_iconLeft: 左边的图标.

met_iconRight: 右边的图标.

met_iconPadding: 图标和主区域之间的padding。默认为16dp, 遵守 Google's Material Design Spec 中的建议.

Others

met_hideUnderline: 是否隐藏底部横线。默认为 false。

met_autoValidate: 是否自动检查字符串。默认为 false。

met_singleLineEllipsis: 是否在文字超长时显示底部的省略号。默认为 false。

met_clearButton: 是否显示用来清空文字的 Clear button 。默认为 false。