Android EditText View Floating Hint в материальном дизайне


97

Предоставляет ли API 21 метод использования следующей функции:

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

Я пытаюсь использовать подсказки EditText.

Спасибо!



Я столкнулся с этим также во время поиска, но мне было интересно, предоставляет ли Android собственный метод.
xsorifc28

1
Это заставляет нас думать, что с Android что-то не так. В API для материального дизайна есть несколько пробелов. Другой пример - кнопка действия с плавающей запятой.
motobói

Ответы:


4

Вам необходимо добавить в файл build.gradle вашего модуля следующее:

implementation 'com.google.android.material:material:1.0.0'

И используйте com.google.android.material.textfield.TextInputLayout в своем XML:

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/my_hint">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

108

Плавающая подсказка EditText:

Добавьте ниже зависимость в gradle:

compile 'com.android.support:design:22.2.0'

В макете:

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

3
Остерегайтесь: TextInputLayout не показывает подсказку EditText до того, как пользователь сосредоточится на ней. В библиотеке поддержки дизайна существует ошибка22.2.0
Иван Чау,

1
В чем разница между использованием EditText и TextInputEditText в этом XML?
разработчик Android

2
Вновь переименованная зависимость вроде бы есть implementation 'com.google.android.material:material:1.0.0-rc01'.
rmtheis

60

Да, с 29 мая 2015 г. эта функция теперь доступна в библиотеке поддержки дизайна Android.

Эта библиотека включает поддержку

  • Плавающие этикетки
  • Кнопка плавающего действия
  • Снэк-бар
  • Панель навигации
  • и больше

3
Вы случайно не знаете об учебнике для плавающих меток с упомянутыми EditTexts, такими как OP?
AdamMc331


1
Вау, спасибо! Я просмотрю их и расскажу, как это происходит!
AdamMc331

2
Третий - это то, что я искал. Я наткнулся на TextInputLayout, но не смог найти хорошего примера (возможно, поиск неправильных терминов). Спасибо!
AdamMc331

18

Библиотеку поддержки Android можно импортировать в gradle в зависимости:

    compile 'com.android.support:design:22.2.0'

Он должен быть включен в GradlePlease! И как пример его использования:

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

Кстати, редактор может не понимать, что AutoCompleteTextView разрешен в TextInputLayout.


11

Android не предоставил собственный метод. Ни AppCompat.

Попробуйте эту библиотеку: https://github.com/rengwuxian/MaterialEditText

Это может быть то, что вы хотите.


1
Я получаю сообщение об ошибке: (1) "Цвет атрибута" уже определен "при синхронизации с градиентом, вероятно, из-за appcompat-v7. Я не могу от этого избавиться. Есть предложения?
mdzeko

MaterialEditText не определил атрибут с именем «цвет», поэтому в другом месте должно быть что-то не так.
rengwuxian

9

Импортируйте библиотеки поддержки. В файле build.gradle вашего проекта добавьте следующие строки в зависимости проекта:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
}

Используйте следующий TextInputLayout в макете пользовательского интерфейса:

<android.support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

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

Затем вызовите setHint для TextInputLayout сразу после вызова setContentView, потому что для анимации плавающей метки вам просто нужно установить подсказку с помощью метода setHint.

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

1
По крайней мере, используя 23.1.1, вам не нужно использовать явный вызов setHint(). Он работает с подсказкой, установленной EditTextв макете xml.
Ionoclast Brigham

3

Предложение @andruboy https://gist.github.com/chrisbanes/11247418 , вероятно, является вашим лучшим выбором.

https://github.com/thebnich/FloatingHintEditText работает с appcompat-v7 v21.0.0, но, поскольку v21.0.0 не поддерживает акцентные цвета с подклассами EditText, подчеркивание по FloatingHintEditTextумолчанию будет сплошным черным или белым. Кроме того, отступы не оптимизированы для стиля материала EditText, поэтому вам может потребоваться его настроить.


Спасибо. Я предполагаю, что Google также не предоставил api для создания предупреждений о редактировании текста в стиле материала, например, в google.com/design/spec/components/ ... Извините за любительские вопросы, я пытаюсь адаптироваться к материальному дизайну как можно больше поскольку я могу использовать API / библиотеки Google и пытаться выяснить все, что было предоставлено, по сравнению с любыми внешними библиотеками. Еще раз спасибо!
xsorifc28


0

Чтобы упростить использование InputTextLayout, я создал эту библиотеку, которая сокращает ваш XML-код менее чем наполовину, а также предоставляет вам возможность установить сообщение об ошибке, а также сообщение-подсказку и простой способ сделать ваш проверки. https://github.com/TeleClinic/SmartEditText

Просто добавьте

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

Тогда вы можете сделать что-то вроде этого:

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

0

Попробуйте так

введите описание изображения здесь

  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
  }

для получения дополнительной информации нажмите здесь


0

Используйте TextInputLayoutпредоставленные библиотекой компонентов материалов :

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label">

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

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

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.