web-dev-qa-db-fra.com

Comment faire en sorte que TextInputLayout donne un astérisque rouge pour les champs obligatoires

Est-il possible de ne mettre que l'astérisque dans l'indicateur en rouge lors de l'utilisation d'un TextInputLayout à partir de la bibliothèque de support de conception? J'ai vu des informations sur le style de l'indication entière, mais ceci est un peu plus complexe puisque seul le * doit être rouge, pas le message en entier.

L'exemple de Material Design montre cela, mais la bibliothèque de concepteurs ne semble pas avoir l'option de le styler de cette manière à l'aide d'un TextInputLayout et d'un EditText.

Référence: https://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields

Exemple (le haut, avec le focus, a l'astérisque rouge; le fond sans focus n'a pas d'astérisque rouge):

 Example of hint text with red asterisk

J'ai cherché à définir l'indication sur SpannableString (voir ici Comment obtenir un astérisque rouge dans une entrée <string> ) dans un OnFocusChangeListener (voir ici Avoir le symbole obligatoire du texte à modifier (astérisque de couleur rouge) qui est à l’intérieur de textinputlayout ), mais l’indice est un CharSequence. 

Y a-t-il un moyen de faire cela sans étendre TextInputLayout?

32

Material Design spécifie un astérisque pour les champs obligatoires qui fait partie du texte d'indication et de la même couleur (pas en rouge comme vous l'avez montré dans votre question).

En Kotlin, c'est très simple:

1.Définissez cette méthode d'extension:

fun TextInputLayout.markRequired() {
    hint = "$hint *"
}

2.Utilisez-le:

input_first_name.markRequired()

Si vous souhaitez toujours utiliser l'astérisque rouge, même si les consignes relatives à la conception des matériaux le découragent, vous pouvez utiliser AndroidX Core KTX comme suit:

fun TextInputLayout.markRequiredInRed() {
    hint = buildSpannedString {
        append(hint)
        color(Color.RED) { append(" *") } // Mind the space prefix.
    }
}
9
Louis CAD

Pourriez-vous ajouter une chaîne fractionnée De HTML?

   String grey = "Legal first name*";
   Spanned redStar;
   String html = "<string style="color:grey;">Legal first name<span style="color:red;">*</span></string>";

   if (Android.os.Build.VERSION.SDK_INT >= Android.os.Build.VERSION_CODES.N) {
   redStar = Html.fromHtml(html,Html.FROM_HTML_MODE_LEGACY);
   } else {
   redStar = Html.fromHtml(html);
   }

Et changez l'indice lorsque vous vous concentrez.

   textInput.setOnFocusChangeListener(new View.OnFocusChangeListener() {
   public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus)
        myEditText.setHint(redStar.toString);
    else
        myEditText.setHint(grey);
}
2
don
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/black</item>
</style>

changez votre couleur de thèmeAccent et voyez

2
Dhara Patel

Modifiez l'indicateur TextInputLayout en ajoutant un suffixe enveloppé au format HTML:

public void setRequired(boolean required) {

  componentField.setHint(
    TextUtils.concat(
      componentField.getHint(),
      Html.fromHtml(
        getContext().getString(
          R.string.required_asterisk))));
}

Le code astérisque doit être stocké dans Android strings.xml pour que l'échappement soit correct:

<string name = "required_asterisk"><![CDATA[<font color=\'#cc0029\'>&nbsp*</font>]]></string>
0
Zon