Текстовые поля материалов Android

В этом уроке мы реализуем текстовые поля, используя новую библиотеку компонентов дизайна материалов. Мы уже реализовали здесь TextInputLayout.

Текстовые поля материала

TextInputLayout предоставляет реализацию для текстовых полей Материала. Нам просто нужно использовать TextInputEditText! Прежде всего, импортируйте новую зависимость компонентов материала. Также установите тему MaterialComponent в Activity.

implementation 'com.google.android.material:material:1.1.0-alpha09'

По умолчанию текстовое поле ввода имеет заполненный фон, чтобы привлечь внимание пользователей. Теперь давайте создадим текстовое поле по умолчанию:

 <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

В следующих нескольких разделах мы по-разному настроим текстовые поля.

Стандартные и плотные текстовые поля

Текстовые поля имеют два типа вариантов высоты:

Стандартный. Используется по умолчанию, если ничего другого нет.
Dense — @style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense

Плотное текстовое поле немного короче по высоте.

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box dense"
            app:boxBackgroundColor="#20D81B60">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

По умолчанию используется стиль FilledBox.Standard. app:boxBackgroundColor используется для установки цвета заполненного поля. Вот как это выглядит на экране:

Текстовые поля рамки контура

Примените следующий стиль к TextInputLayout, чтобы получить выделенные текстовые поля:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Подобно FilledBox, он также имеет два варианта высоты — Standard и Dense. Для установки радиуса угла используются следующие атрибуты:

boxCornerRadiusTopStart
boxCornerRadiusTopEnd
boxCornerRadiusBottomStart
boxCornerRadiusBottomEnd

boxStrokeColor используется для установки цвета обводки контура. Вот как это выглядит:

Конец режимов значков

Двигаясь вперед, теперь давайте установим конечные режимы значков. В основном это значки, установленные справа от текстового поля. В настоящее время доступны три типа встроенных значков:

пароль_переключатель
очистить_текст
настраиваемый

Вышеуказанные атрибуты говорят сами за себя. Мы можем установить собственный оттенок значков для этих значков, используя атрибут endIconTint. Для пользовательского значка мы используем атрибут endIconDrawable.

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle"
            app:endIconTint="@color/colorAccent">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Clear text"
            app:endIconMode="clear_text"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Custom end icon"
            app:endIconCheckable="true"
            android:id="@+id/custom_end_icon"
            app:endIconDrawable="@android:drawable/ic_input_add"
            app:endIconMode="custom"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

Вот как это выглядит на экране:

Для пользовательского значка мы можем использовать обратный вызов setEndIconOnClickListener для прослушивания кликов и других действий.

Формованные текстовые поля

ShapeAppearance — мощный стиль. Это позволяет нам настроить форму текстового поля. У нас есть две встроенные формы - вырезанная и круглая.

<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

    <style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

Установка вышеуказанных стилей в атрибутах shapeAppearance дает нам следующее:

Это подводит итог текстовым полям компонентов материала на данный момент. В приведенном ниже исходном коде вы найдете все вышеуказанные концепции.

AndroidMaterialTextFields

Ссылка на проект на гитхабе