[JAVA] Comment définir l'image pour dessiner à gauche / à droite du bouton à l'aide de la police d'icône (Iconics)

Aperçu

La police des icônes est pratique, n'est-ce pas? Les polices d'icônes vous permettent d'afficher des images d'icônes dans votre texte. En d'autres termes, vous pouvez facilement créer des icônes + des boutons de texte. Cependant, comme il est affiché comme un élément, il existe un problème en raison du fait que des tailles différentes ne peuvent pas être utilisées pour le texte et l'icône, et la ligne de base est alignée entre l'icône et le texte.

Les boutons Android peuvent afficher des icônes à l'intérieur des boutons à l'aide des attributs drawableLeft et drawableRight. Cet attribut semble résoudre le problème ci-dessus, mais il ne peut pas être utilisé tel quel car il est nécessaire de spécifier l'image.

Par conséquent, je vais vous expliquer comment convertir la police de l'icône en un vecteur dessinable et l'afficher sous forme d'icône.

Iconics est utilisé comme bibliothèque pour l'utilisation des polices d'icônes.

résultat

Si vous spécifiez l'attribut drawable_icon_font_left comme indiqué ci-dessous, l'icône sera bien affichée.

<Button
    android:text="{faw-android} android"
    />
<Button
    android:text="android"
    app:drawable_icon_font_left="@{`faw_android`}"
    />

Comment ça fonctionne

Installer Iconics et activer DataBinding

Ajoutez les paramètres suivants dans ** build.gradle **. Ici, nous utiliserons AwesomeFont comme exemple.

android {
    ...
    dataBinding {
        enabled = true
    }
}

dependencies {
    ...
    compile "com.mikepenz:iconics-core:2.8.2@aar"
    compile 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'
}

Activer les icônes

Ajoutez les paramètres suivants à l'activité et au fragment à utiliser.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));

        super.onCreate(savedInstanceState);
        DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
}

Définition de BindingAdapter

** Définissez l'attribut drawable_icon_font_left **.

Dans la méthode, il générera un Drawable à partir des caractères spécifiés. À ce moment-là, vous pouvez définir la même couleur que le texte ou définir la taille de l'icône légèrement plus grande que la taille du texte à votre convenance.

public class BindingAdapterManager {

    @BindingAdapter("drawable_icon_font_left")
    public static void setDrawableIconFontLeft(final Button button, final String icon) {
        final Context context = button.getContext();
        final IconicsDrawable iconicsDrawable = new IconicsDrawable(context)
                .icon(FontAwesome.Icon.valueOf(icon))
                .color(button.getCurrentTextColor())
                .sizePx((int)(button.getTextSize() * 1.25));
        button.setCompoundDrawables(iconicsDrawable, null, null, null);
    }
}

échantillon

J'ai un projet qui fonctionne sur Drawable-Icon-Font @ github.

Merci

Cette astuce est née lors du développement d'un "site où vous pouvez acheter et vendre du matériel photo pour smartphone Snapmart". Malheureusement, la version Android est encore en développement et n'est pas encore disponible. Si vous avez un iPhone, veuillez le télécharger et l'utiliser! Application Snapmart (iOS)