Различные метки и подсказки для TextInputLayout

Я хочу сделать EditTextLayout, но я хочу другой текст для метки и подсказки.

например: текст метки - "номер телефона" , а текст подсказки - "+6281342134".

это возможно?

мой код:

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

        <android.support.design.widget.TextInputEditText
            android:id="@+id/phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="+6281342134"
            android:inputType="phone" />
    </android.support.design.widget.TextInputLayout>
9
android android-textinputlayout

5 ответов

Я принял аналогичный подход к Rehan

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


editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            inputLayout.setHint("We did it!");
        } else {
            inputLayout.setHint("Testing 123");
        }
    }
});

анимация была достаточно хороша для меня без отключения анимации:

Example

24

вот как я это делаю без кода (только XML), позволяя одновременно метку и заполнитель, как в руководящих принципах Material Design.

макет XML:

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="My Label Text">
  <android.support.design.widget.TextInputEditText
    android:id="@android:id/input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@drawable/hint_selector"
    android:hint="Placeholder Text"/>
</android.support.design.widget.TextInputLayout>

селектор цвета XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="?android:textColorHint" />
  <item android:color="@android:color/transparent" />
</selector>

ключ здесь - просто сделать его прозрачным по умолчанию и показывать только текст-заполнитель, когда он имеет фокус. Нет необходимости менять цвет, так как это будет уважать любую пользовательскую тему на месте, а также светлые и темные темы.

5

вы можете просто сделать это таким образом:

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="+6281342134"
        android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>

но это приведет к перекрытию обеих подсказок, т. е. Номер Телефона и +6281342134. Поэтому вам нужно реализовать OnFocusChangeListener для этого. (Не очень хорошее решение, но оно будет работать на вас).

В вашем макете добавьте подсказку в TextInputLayout только. Я установил hintAnimationEnabled to false потому что я думаю, что анимация не будет выглядеть гладкой с различными оттенками.

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number"
    app:hintAnimationEnabled="false">

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

в вашем java Файл, Создать OnFocusChangeListener:

private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            ((EditText)v).setHint("+6281342134");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

и установите его на свой EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);
4

перейдите в режим редактирования xml-текста и добавьте это в edittext:

android:label="Phone Number"
android:hint="+6281342134"
0

если вы хотите label и hint в пределах EditText , вы можете установить эти свойства для EditText

android:label="Phone Number"
android:hint="+6281342134"

но , если вы хотите label для отображения в качестве другого текстового контейнера можно использовать следующий вид heirarchy.

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/phoneLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textSize="22sp" 
            andrioid:text="phone number"/>

       <EditText
            android:id="@+id/phoneText"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:textSize="22sp"
            android:hint="+6281342134" />

    </LinearLayout>
-1