Android EditTextビューのマテリアルデザインのフローティングヒント


96

API 21は、次の機能を使用するメソッドを提供していますか?

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

EditTextヒントをフロートにしようとしています。

ありがとう!



私も検索中にこれに遭遇しましたが、Androidがネイティブメソッドを提供しているかどうか疑問に思いました。
xsorifc28 2014年

1
これにより、Androidに問題があると考えられます。マテリアルデザインのAPIには欠けているギャップがいくつかあります。もう1つの例は、フロートアクションボタンです。
motobói

回答:


3

次のコードをモジュールのbuild.gradleファイルに追加する必要があります。

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

そして、XMLでcom.google.android.material.textfield.TextInputLayoutを使用します。

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

1
このXMLでEditTextとTextInputEditTextを使用することの違いは何ですか?
アンドロイド開発者

2
新しく名前が変更された依存関係はのようimplementation 'com.google.android.material:material:1.0.0-rc01'です。
rmtheis 2018

60

はい、2015年5月29日現在、この機能はAndroid Design Support Libraryで提供されています

このライブラリには、

  • フローティングラベル
  • フローティングアクションボタン
  • スナックバー
  • ナビゲーションドロワー
  • もっと

3
OPのようなEditTextsを使用したフローティングラベルのチュートリアルを知っていますか?
AdamMc331 2015


1
わあ、ありがとう!私はこれらを見て、それがどうなるかをあなたに知らせます!
AdamMc331 2015

2
三番目は私が探していたものでした。私はTextInputLayoutに出会いましたが、良い例を見つけることができませんでした(おそらくすべての間違った用語を検索しています)。ありがとう!
AdamMc331 2015

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
おそらくappcompat-v7が原因で、gradle同期で「(1)属性「色」はすでに定義されています」というエラーが表示されます。私はそれを取り除くことができません。何か提案はありますか?
mdzeko 2015

MaterialEditTextは「color」という名前の属性を定義していないため、他の場所で何か問題があるはずです。
rengwuxian 2015年

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

UIレイアウトで次の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メソッドを使用してヒントを設定するだけなので、setContentView呼び出しの直後にTextInputLayoutでsetHintを呼び出します。

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

1
少なくとも23.1.1を使用すると、への明示的な呼び出しを使用する必要はありませんsetHint()EditTextレイアウトxmlで設定されたヒントと連動します。
イオノクラストブリガム2016

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.com/design/spec/components/のようなマテリアルスタイルの編集テキスト警告を作成するためのAPIを提供していないと思います。 アマチュアの質問で申し訳ありませんが、マテリアルデザインにできるだけ適応しようとしています私はgoogleのapi / librariesを使用して、外部ライブラリと比較して提供されているすべてのものを理解しようとすることができます。再度、感謝します!
xsorifc28 2014年


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

Material Components LibraryTextInputLayout提供するものを使用します

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

ここに画像の説明を入力してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.