[JAVA] So stellen Sie das Bild mithilfe der Symbolschriftart (Symbole) links / rechts von der Schaltfläche auf zeichnbar ein

Überblick

Die Schriftart eines Symbols ist praktisch, nicht wahr? Mit Symbolschriftarten können Sie Symbolbilder in Ihrem Text anzeigen. Mit anderen Worten, Sie können ganz einfach Symbole + Textschaltflächen erstellen. Da es jedoch als ein Element angezeigt wird, besteht das Problem, dass für Text und Symbol keine unterschiedlichen Größen verwendet werden können und die Grundlinie zwischen Symbol und Text ausgerichtet ist.

Android-Schaltflächen können mithilfe der Attribute drawableLeft und drawableRight Symbole in den Schaltflächen anzeigen. Dieses Attribut scheint das obige Problem zu lösen, kann jedoch nicht so verwendet werden, wie es ist, da das Bild angegeben werden muss.

Daher werde ich erklären, wie die Symbolschrift in einen zeichnbaren Vektor konvertiert und als Symbol angezeigt wird.

Iconics wird als Bibliothek für die Verwendung von Icon-Schriftarten verwendet.

Ergebnis

Wenn Sie das Attribut drawable_icon_font_left wie unten gezeigt angeben, wird das Symbol gut angezeigt.

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

Wie es funktioniert

Iconics installieren und dataBinding aktivieren

Fügen Sie die folgenden Einstellungen in ** build.gradle ** hinzu. Hier verwenden wir AwesomeFont als Beispiel.

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

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

Aktivieren Sie Iconics

Fügen Sie der zu verwendenden Aktivität und dem Fragment die folgenden Einstellungen hinzu.

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);
    }
}

BindingAdapter-Definition

** Definieren Sie das Attribut drawable_icon_font_left **.

Innerhalb der Methode wird aus den angegebenen Zeichen ein Drawable generiert. Zu diesem Zeitpunkt können Sie die gleiche Farbe wie der Text festlegen oder die Symbolgröße etwas größer als die Textgröße nach Ihren Wünschen einstellen.

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);
    }
}

Stichprobe

Ich habe ein Projekt, das unter Drawable-Icon-Font @ github funktioniert.

Vielen Dank

Diese Tipps entstanden während der Entwicklung einer "Website, auf der Sie Fotomaterial für Smartphones Snapmart kaufen und verkaufen können". Leider befindet sich die Android-Version noch in der Entwicklung und ist noch nicht verfügbar. Wenn Sie ein iPhone haben, laden Sie es bitte herunter und verwenden Sie es! Snapmart App (iOS)