Ключевые свойства Material Design EditText в Android
Опубликовано: 1 Декабря, 2021
В предыдущей статье Material Design EditText в Android с примерами обсуждалось, как реализовать EditText материального дизайна и чем они отличаются от обычного EditText. В этой статье обсуждалось, как настроить текстовые поля редактирования MDC с их ключевыми свойствами. Взгляните на следующее изображение, чтобы получить представление о ключевых свойствах текстовых полей редактирования MDC.
Настройка MDC EditText с помощью ключевых свойств
Ключевое свойство 1: цвет и ширина обводки рамки
- Вызовите следующий код внутри файла activity_main.xml.
- Атрибуты, которые необходимо сконцентрировать, - это boxStrokeColor, boxStrokeWidth, boxStrokeWidthFocused . Внутри TextInputLayout.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" tools:context = ".MainActivity" tools:ignore = "HardcodedText" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Filled EditText" /> <!--this is the material design filled EditText with helper text--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/filled_edit_text" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Something" app:boxStrokeColor = "@android:color/black" app:boxStrokeWidth = "3dp" app:boxStrokeWidthFocused = "7dp" app:helperText = "Enter in text format only" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </ com.google.android.material.textfield.TextInputLayout > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Outlined EditText" /> <!--this is the material design outlined EditText with helper text--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/outline_edit_text" style = "@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Something" app:boxStrokeColor = "@android:color/black" app:boxStrokeWidth = "3dp" app:boxStrokeWidthFocused = "7dp" app:helperText = "Enter in text format only" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </ com.google.android.material.textfield.TextInputLayout > </ LinearLayout > |
Выходной интерфейс: запуск в эмуляторе
Ключевое свойство 2: добавление режима конечного значка и режима значка запуска
Для MDC EditTexts существует 4 типа режимов конечных значков. Это:
- чистый текст.
- переключение пароля.
- обычай.
- выпадающее меню.
Note: For password toggle, the input type is required for the MDC EditText.
- Для начального значка необходим векторный значок. Так что импортируйте векторную иконку, щелкнув правой кнопкой мыши на drawable -> new -> Vector asset. Затем выберите нужные векторные иконки.
- Обратитесь к следующему изображению, если не удается найти диалоговое окно векторного ресурса в Android Studio.
- Вызовите следующий код в файл activity_main.xml.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" tools:context = ".MainActivity" tools:ignore = "HardcodedText" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Filled EditText" /> <!--this is the material design filled EditText with helper text--> <!--the attribute endIconMode will make the end icon mode according to the EditText context--> <!--the startIconDrawable attribute sets the icon at the start of the EditText--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/filled_edit_text" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Something" app:endIconMode = "clear_text" app:helperText = "Enter in text format only" app:startIconDrawable = "@drawable/ic_text_fields_black_24dp" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </ com.google.android.material.textfield.TextInputLayout > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Outlined EditText" /> <!--this is the material design outlined EditText with helper text--> <!--the attribute endIconMode will make the end icon mode according to the EditText context--> <!--the startIconDrawable attribute sets the icon at the start of the EditText--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/outline_edit_text" style = "@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Password" app:endIconMode = "password_toggle" app:helperText = "Enter in text format only" app:startIconDrawable = "@drawable/ic_vpn_key_black_24dp" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" android:inputType = "textPassword" /> </ com.google.android.material.textfield.TextInputLayout > </ LinearLayout > |
Выходной интерфейс: запуск в эмуляторе
Ключевое свойство 3: вспомогательный текст
- Это небольшой текст, который можно вызвать, чтобы сообщить пользователю, какой тип данных следует ввести в EditText.
- Вызовите следующее внутри файла activity_main.xml. Комментарии добавляются внутри кода для лучшего понимания.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" tools:context = ".MainActivity" tools:ignore = "HardcodedText" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Filled EditText" /> <!--this is the material design filled EditText with helper text--> <!--the attribute helperText sets the helper text below the EditText box--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/filled_edit_text" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Height" app:helperText = "Height should be in-terms of feet (ft.)" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </ com.google.android.material.textfield.TextInputLayout > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "64dp" android:text = "Material Design Outlined EditText" /> <!--this is the material design outlined EditText with helper text--> <!--the attribute helperText sets the helper text below the EditText box--> < com.google.android.material.textfield.TextInputLayout android:id = "@+id/outline_edit_text" style = "@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:hint = "Enter Password" app:helperText = "Password must be a number" > < com.google.android.material.textfield.TextInputEditText android:layout_width = "match_parent" android:layout_height = "wrap_content" android:inputType = "numberPassword" /> </ com.google.android.material.textfield.TextInputLayout > </ LinearLayout > |
Выходной интерфейс: запуск в эмуляторе
Хотите более динамичную и конкурентную среду для изучения основ Android?
Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!