Text fields

Text Fields

摘自 google material design 文档

Text fields 允许用户输入文本，选择文本（剪切，复制，粘贴），通过自动补全检索查询数据。

如何添加?

I. 在你的 build.grade 文件末尾添加 appcompat 库。

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}

II. 让你的 activity 继承自 android.support.v7.app.AppCompatActivity。

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在任意的 layout.xml 文件内声明你的 EditText 。

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Hint text" />

如何设置样式?

I. 在你的 styles.xml 文件内声明自定义样式。

<style name="MyEditText" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

II. 在你的 EditText 声明里设置 android:theme 的属性值为你自定义的样式。

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Hint text"
    android:theme="@style/MyEditText" />

Single-line text field

摘自 google material design 文档

Single-line text fields，当输入光标到达输入框右边缘时，文本框的内容会自动滚动到左边。

要让你的 EditText 为单行，需要添加 android:singleLine 属性，并且设置其值为 true 。

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:hint="Hint text" />

Multi-line text field

摘自 google material design 文档

Multi-line text fields，当光标达到输入框边缘时，文本框会为溢出的文字自动增加一行，以使文本可以垂直滚动。

要让你的 EditText 为多行，需要添加 android:inputType 属性，并且设置其值为 textMultiLine 。

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textMultiLine"
    android:hint="Hint text" />

Full-width text field

摘自 google material design 文档

Full-width text fields（和父布局等宽）适用于更深入复杂的工作。

I. 在你的 styles.xml 中声明你自定义的样式。

<style name="FullWidthEditText" parent="Widget.AppCompat.EditText">
    <item name="android:padding">20dp</item>
    <item name="android:background">@null</item>
    <item name="android:textSize">@dimen/abc_text_size_subhead_material</item>
</style>

II. 在你的 EditText 声明里设置 style 属性值为你自定义的样式。

<EditText
    style="@style/FullWidthEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Subject" />

Floating labels

摘自 google material design 文档

当用户在输入框输入字符时，行内的浮动标签会自动移动，浮动在输入框的上方。

如何添加？

I. 在你的 build.gradle 文件里添加最新版本的 appcompat 和 design 库。

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. 让你的 activity 继承 android.support.v7.app.AppCompatActivity 。

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在任意的 layout.xml 里声明你的 EditText ，并用 TextInputLayout 包裹。

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title" />

</android.support.design.widget.TextInputLayout>

备注

控件 TextInputLayout 和 EditText 都具有 android:hint 属性，你可以使用它们中的任意一个。

如何设置样式？

I. 在你的 styles.xml 里声明你自定义的样式。

<!--Floating label text style-->
<style name="MyHintText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">@color/pink</item>
</style>

<!--Input field style-->
<style name="MyEditText" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

II. 设置上面定义的样式给你的 TextInputLayout 的 app:hintTextAppearance 属性 和 EditText 的 android:theme 属性。

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintText">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>

User input errors

摘自 google material design 文档

(添加了这个属性）一旦检测到输入错误，就会帮助用户去解决它。如果检测到输入错误，就禁止提交表单；（或者）如果提交表单之后检测到错误，可以清楚地解释错误并提示如何去解决。

如何添加？

I. 在你的 build.gradle 文件里添加最新版本的 appcompat 和 design 库。

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. 让你的 activity 继承自 android.support.v7.app.AppCompatActivity 。

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在任意的 layout.xml 声明你的 EditText ，并用 TextInputLayout 包裹它。

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/First_name" />

</android.support.design.widget.TextInputLayout>

IV. 要展示或者隐藏 error 需要用到 TextInputLayout 的 setError 方法。

TextInputLayout inputLayout = (TextInputLayout) findViewById(R.id.inputLayout);
inputLayout.setError("First name is required"); // show error
inputLayout.setError(null); // hide error

备注

在 TextInputLayout 里声明 app:errorEnabled="true" 属性需要在 EditText 下面给错误提示标签预留空间。

如何设置样式？

I. 在 styles.xml 声明你自定义样式。

<!--Error label text style-->
<style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">@color/pink</item>
</style>

<!--Input field style-->
<style name="MyEditText" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

II. 设置上面定义的样式给你的 TextInputLayout 的 app:errorTextAppearance 属性 和 EditText 的 android:theme 属性。

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorTextAppearance="@style/MyHintText"
    app:errorEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>

Character counter

From google material design documentation.

Use a character counter in fields where a character restriction is in place.

How to add?

I. In your build.gradle add latest appcompat and design libraries.

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. Make your activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {
    ...
}

III. Declare your EditText inside any layout.xml file and wrap it with TextInputLayout. Add app:counterEnabled attribute and set its value to true. To restrict maximum characters count set some integer value to app:counterMaxLength attribute.

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="140">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint text" />

</android.support.design.widget.TextInputLayout>

How to style?

To define a custom style for the overflow.

I. Define the text style.

<!--Overflow label text style-->
<style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">@color/deep_orange</item>
</style>

II. Apply this styles to your TextInputLayout via app:counterOverflowTextAppearance attribute.

app:counterOverflowTextAppearance="@style/MyOverflowText"

Password toggle

From google material design documentation.

When the visibility icon is displayed with a text field, it indicates whether or not that field’s input is visible. A text field’s visibility may be toggled on or off using the icon.

How to add?

I. In your build.gradle add latest appcompat and design libraries.

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. Make your activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {
    ...
}

III. Declare your EditText inside any layout.xml file and wrat it with TextInputLayout. Add app:passwordToggleEnabled and set its value to true.

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password" />

</android.support.design.widget.TextInputLayout>

Note

Declare app:passwordToggleContentDescription attribute inside TextInputLayout for accessibility purposes.

How to style?

To change the color of the password toggle icon, use the app:passwordToggleTint attribute:

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorAccent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password" />

</android.support.design.widget.TextInputLayout>

Moreover, you can specify the blending mode with the app:passwordToggleTintMode attribute.

Icon

To change the password toggle icon, use the app:passwordToggleDrawable attribute:

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleDrawable="@drawable/ic_lock">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password" />

</android.support.design.widget.TextInputLayout>

Use a StateListDrawable with the android:state_checked attribute to use separate drawables for each toggle state. Moreover, choose an AnimatedStateListDrawable to animate the drawables between states.

翻译水平有限，欢迎批评指正

原文作者: Volodymyr Yatsykiv 原文链接: Text Fields