Перегляд Android EditText Плаваюча підказка в дизайні матеріалів


96

Чи надає API 21 спосіб використовувати таку функцію:

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

Я намагаюся змінити підказки EditText.

Дякую!



Я також натрапив на це під час пошуку, але цікавився, чи не надає Android власний метод.
xsorifc28,

1
Це змушує нас думати, що з Android щось не так. Існує кілька прогалин в API для дизайну матеріалів. Інший приклад - кнопка Float Action.
motobói

Відповіді:


3

Вам потрібно додати наступне у файл модуля 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) "Колір атрибута" вже визначений "при синхронізації gradle, можливо, через 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.