Android
TextInputLayout
Ricerca…
introduzione
È stato introdotto TextInputLayout per visualizzare l'etichetta mobile su EditText. EditText deve essere inserito da TextInputLayout per visualizzare l'etichetta mobile.
Osservazioni
TextInputLayout
è un layout che racchiude un EditText
(o un discendente) per mostrare un'etichetta mobile quando il suggerimento è nascosto a causa dell'inserimento del testo da parte dell'utente. Addizionalmente, TextInputLayout
consente di visualizzare un messaggio di errore sotto EditText
.
Assicurati che la seguente dipendenza venga aggiunta al file build.gradle
dell'app in dipendenze:
compile 'com.android.support:design:25.3.1'
Utilizzo di base
È l'utilizzo di base di TextInputLayout
.
Assicurati di aggiungere la dipendenza nel file build.gradle
come descritto nella sezione commenti.
Esempio:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/username"/>
</android.support.design.widget.TextInputLayout>
Gestione degli errori
È possibile utilizzare TextInputLayout
per visualizzare i messaggi di errore in base alle linee guida sulla progettazione dei materiali utilizzando i metodi setError
e setErrorEnabled
.
Per mostrare l'errore sotto l'uso di EditText:
TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setErrorEnabled(true);
til.setError("You need to enter a name");
Per abilitare l'errore in TextInputLayout
puoi utilizzare app:errorEnabled="true"
in xml o til.setErrorEnabled(true);
come mostrato sopra.
Otterrai:
Aggiungere il conteggio dei caratteri
TextInputLayout ha un contatore di caratteri per un EditText definito al suo interno.
Il contatore verrà visualizzato sotto EditText.
Basta usare i setCounterEnabled()
e setCounterMaxLength
:
TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setCounterEnabled(true);
til.setCounterMaxLength(15);
oppure l' app:counterEnabled
e app:counterMaxLength
attributi in xml.
<android.support.design.widget.TextInputLayout
app:counterEnabled="true"
app:counterMaxLength="15">
<EditText/>
</android.support.design.widget.TextInputLayout>
Commuta password
Con un tipo di password di input, puoi anche abilitare un'icona che può mostrare o nascondere l'intero testo utilizzando l'attributo passwordToggleEnabled
.
Puoi anche personalizzare lo stesso valore predefinito utilizzando questi attributi:
-
passwordToggleDrawable
: per cambiare l'icona occhio predefinita -
passwordToggleTint
: per applicare una tinta alla visibilità della password, è possibile disegnare. -
passwordToggleTintMode
: per specificare la modalità di fusione utilizzata per applicare la tinta di sfondo.
Esempio:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleContentDescription="@string/description"
app:passwordToggleDrawable="@drawable/another_toggle_drawable"
app:passwordToggleEnabled="true">
<EditText/>
</android.support.design.widget.TextInputLayout>
TextInputEditText
TextInputEditText
è un EditText
con una correzione aggiuntiva per visualizzare un suggerimento nell'IME durante la modalità 'estrai' .
La modalità Estrai è la modalità a cui passa l'editor della tastiera quando si fa clic su un EditText quando lo spazio è troppo piccolo (ad esempio l'orizzontale su uno smartphone).
In questo caso, usando un EditText
mentre stai modificando il testo puoi vedere che l'IME non ti dà un suggerimento su ciò che stai modificando
TextInputEditText
corregge questo problema fornendo testo di suggerimento mentre l'IME del dispositivo dell'utente si trova in modalità Estrai.
Esempio:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Description"
>
<android.support.design.widget.TextInputEditText
android:id="@+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
Personalizzazione dell'aspetto di TextInputLayout
È possibile personalizzare l'aspetto di TextInputLayout
e del relativo EditText
incorporato definendo gli stili personalizzati nel proprio styles.xml
. Gli stili definiti possono essere aggiunti come stili o temi al tuo TextInputLayout
.
Esempio per personalizzare l'aspetto del suggerimento:
styles.xml
:
<!--Floating label text style-->
<style name="MyHintStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">@color/black</item>
</style>
<!--Input field style-->
<style name="MyEditText" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@color/indigo</item>
<item name="colorControlActivated">@color/pink</item>
</style>
Per applicare lo stile, aggiornare TextInputLayout e EditText come segue
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="@style/MyHintStyle">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/Title"
android:theme="@style/MyEditText" />
</android.support.design.widget.TextInputLayout>
Esempio per personalizzare il colore dell'accento di TextInputLayout
. Il colore dell'accento influisce sul colore della linea di base di EditText
e sul colore del testo per il testo suggerimento mobile:
styles.xml
:
<style name="TextInputLayoutWithPrimaryColor" parent="Widget.Design.TextInputLayout">
<item name="colorAccent">@color/primary</item>
</style>
file di layout:
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/TextInputLayoutWithPrimaryColor">
<android.support.design.widget.TextInputEditText
android:id="@+id/textInputEditText_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>