web-dev-qa-db-ja.com

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>
androidandroid-textinputlayout
24
mutokenji

私はレーハンに同様のアプローチをとりました

<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

42
starkej2

マテリアルデザインガイドラインのように、ラベルとプレースホルダーの両方を同時に許可しながら、コードなし（XMLのみ）でこれを行う方法を次に示します。

レイアウト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>

ここで重要なのは、デフォルトで透明にするだけで、フォーカスがあるときにのみプレースホルダーテキストを表示することです。色を変更する必要もありません。これは、任意のカスタムテーマ、および明るいテーマと暗いテーマを尊重するためです。

20
ShortFuse

あなたは単にこの方法でそれを行うことができます：

<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>

ただし、これにより、両方のヒント、つまりPhone Numberと+ 6281342134が重複します。そのため、OnFocusChangeListenerを実装する必要があります。 （あまり良い解決策ではありませんが、うまくいきます）。

レイアウトで、TextInputLayoutのみにヒントを追加します。 hintAnimationEnabledを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
Rehan

Xmlテキスト編集モードに入り、これをedittextに追加します。

Android:label="Phone Number"
Android:hint="+6281342134"
0
Robert