Android 在菜单项中使用 font-awesome 字体作为图标

Posted

技术标签:

【中文标题】Android 在菜单项中使用 font-awesome 字体作为图标【英文标题】:Android use font-awesome font as icon in menu item 【发布时间】:2017-03-16 10:46:00 【问题描述】:

我刚刚学习安卓,很抱歉我缺乏这方面的知识。我主要作为 Web 开发人员工作,我们一直使用 Font Awesome,所以我试图让它与 android 一起使用。我首先发现我可以使用很棒的字体here。通过更深入的搜索,我发现了如何在标题here 的操作菜单栏中放置一个很棒的字体图标。通过设置标题而不是图标和标题,我错过了在有空间时拥有备份文本的能力。

我想知道是否可以将图标设置为令人敬畏的字体而不是标题,并且只为标题设置正常的描述性文本。当我对菜单项执行 setIcon 方法时,它需要一个可绘制或可绘制的资源 ID。我可以将其转换为可绘制对象吗?保持图标字体很棒并同时拥有图标和标题的最佳方法是什么?任何帮助或指导表示赞赏。

所以我的主要活动中有以下代码:

public class MainActivity extends AppCompatActivity 

   @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);

        // https://***.com/a/32780748/2066736
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setLogo(R.drawable.redbird_webkit_onwht);
        getSupportActionBar().setDisplayUseLogoEnabled(true);

        setContentView(R.layout.activity_main);
    

    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main_menu, menu);

        setFontAwesomeMenuItem(menu, R.string.icon_calendar, R.id.action_calendar);
        setFontAwesomeMenuItem(menu, R.string.icon_search, R.id.action_search);
        setFontAwesomeMenuItem(menu, R.string.icon_plus, R.id.action_new_post);

        // menu.add(0, MENU_ITEM_LOGOUT, 102, R.string.logout);

        return true;
    

    private void setFontAwesomeMenuItem (Menu menu, int rIdString, int rIdIdOfElement) 
        SpannableString s = new SpannableString(getString(rIdString));
        s.setSpan(new TypefaceSpan(this, "fontawesome-webfont.ttf"), 0, s.length(),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        menu.findItem(rIdIdOfElement).setTitle(s);
    

我从here 获得了以下 TypefaceSpan 类:

/**
 * Style a @link Spannable with a custom @link Typeface.
 *
 * @author Tristan Waddington
 * copied from https://***.com/a/15181195/2066736
 */
public class TypefaceSpan extends MetricAffectingSpan 
    /** An <code>LruCache</code> for previously loaded typefaces. */
    private static LruCache<String, Typeface> sTypefaceCache =
            new LruCache<String, Typeface>(12);

    private Typeface mTypeface;

    /**
     * Load the @link Typeface and apply to a @link Spannable.
     */
    public TypefaceSpan(Context context, String typefaceName) 
        mTypeface = sTypefaceCache.get(typefaceName);

        if (mTypeface == null) 
            mTypeface = Typeface.createFromAsset(context.getApplicationContext()
                    .getAssets(), String.format("fonts/%s", typefaceName));

            // Cache the loaded Typeface
            sTypefaceCache.put(typefaceName, mTypeface);
        
    

    @Override
    public void updateMeasureState(TextPaint p) 
        p.setTypeface(mTypeface);

        // Note: This flag is required for proper typeface rendering
        p.setFlags(p.getFlags() | Paint.SUBPIXEL_TEXT_FLAG);
    

    @Override
    public void updateDrawState(TextPaint tp) 
        tp.setTypeface(mTypeface);

        // Note: This flag is required for proper typeface rendering
        tp.setFlags(tp.getFlags() | Paint.SUBPIXEL_TEXT_FLAG);
    

【问题讨论】:

【参考方案1】:

回答迟了,但对于未来的访问者来说,有一个很棒的库,可以在 android 中使用 font awesome ,名为 iconify,由 JoanZapata 编写。你可以找到它here

在库被正确初始化后,您可以使用 ActionBar 菜单项执行以下操作:

<menu xmlns:android="http://schemas.android.com/apk/res/android"

   <item
       android:id="@+id/item_menu
       showAsAction="always"
       android:title="@string/title"/>

</menu>

从java代码你只需要做这样的事情:

 menu.findItem(R.id.item_menu).setIcon(
    new IconDrawable(this, FontAwesomeIcons.fa_share)
    .colorRes(R.color.ab_icon)
    .actionBarSize());

希望这会对某人有所帮助:) 如果您有任何问题,请询问:)

【讨论】:

我收到此错误:无法找到与图标 fa-barcode 关联的模块,您是否在应用程序中注册了您尝试使用 Iconify.with(...) 的模块?我该如何解决这个问题?除了在 build.gradle 中 compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2' 行之外,我还需要添加任何内容吗? @Vincy 是的。您需要初始化库 Iconify.with(new FontAwesomeModule())...,如文档中所示,就在 public class MyApplication extends Application ... 块下方。创建扩展应用程序的类这里是如何扩展应用程序类intertech.com/Blog/androids-application-class 的示例。重要的是在清单中注册它:android:name="YourApplicationClassName" inside tag 感谢 Karol Zyglowicz 的快速回复。它就像一个魅力!我错过了 Iconify.with(new FontAwesomeModule())... 部分,当我添加它的那一刻,我在月球上!哈哈!非常感谢!!! 现在,我需要它的颜色,这是我在代码中所做的,但它绘制为黑色... menu.findItem(R.id.menuBarcodeScanner).setIcon(new IconDrawable(这个,FontAwesomeIcons.fa_barcode) .colorRes(R.color.white) .actionBarSize() .color(R.color.white) );我做错了什么或错过了什么? 您是否在您的colors.xml 中声明了您的&lt;color name="white"&gt;#ffffff&lt;/color&gt;?这应该可以工作,因为图标正在显示,所以它可能是您的代码相关错误。也许你在styles.xml 或其他东西中覆盖了这个......我无法远程找到错误:(【参考方案2】:

请检查:

TextDrawable faIcon = new TextDrawable(this);
faIcon.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 20);
faIcon.setTextAlign(Layout.Alignment.ALIGN_CENTER);
faIcon.setTypeface(FontAwesomeManager.getTypeface(this, FontAwesomeManager.FONTAWESOME));
faIcon.setText(getResources().getText(R.string.fa_android));
Menu menu = (Menu) findViewById(R.id.menu);
MenuItem menuItem = menu.findItem(R.id.menu_item);
menuItem.setIcon(faIcon);

你可以从here获取TextDrawable类

Source

【讨论】:

这很好,因为不需要导入其他库 + 不仅适用于 Fontawesome,而且适用于我的定制字体,比如我定制的 icomoon 字体。

以上是关于Android 在菜单项中使用 font-awesome 字体作为图标的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 4,在导航菜单项中使用多个下拉按钮

如何在android中的标签上使用滑动菜单?

Android:获取对菜单项的视图引用

如何使用c#从其他形式的菜单项中显示月历上的当前日期

Wheelnav.js 库的菜单项中的 Unicode 实体(在引擎盖下使用 raphael.js)[SVG]

下拉菜单项中的 jquery 滑块导致太多事件