如何在原生Android应用程序中使用“Font Awesome”中的图标和符号
我试图在我的应用程序中使用Font Awesome ,我可以使用Typeface.createFromAsset()
来集成字体,但是我也想使用这个字体提供的图标,但是到目前为止我还没有做到那。
这种特殊的字体包含Unicode专用区(PUA)内的图标,用于媒体播放器控件,文件系统访问,箭头等。
有没有人在Android上使用包含图标和符号的字体,这可能吗?
字体真棒似乎在我的Android应用程序工作正常。 我做了以下几点:
- 复制
fontawesome-webfont.ttf
到我的assests文件夹 - find我想要的图标的字符实体,使用此页面: http : //fortawesome.github.io/Font-Awesome/cheatsheet/
-
在strings.xml中为每个图标创build一个条目。 例如,对于一个心脏:
<string name="icon_heart"></string>
-
在我的xml布局的视图中引用了所述条目:
<Button android:id="@+id/like" style="?android:attr/buttonStyleSmall" ... android:text="@string/icon_heart" />
-
在我的onCreate方法中加载字体并将其设置为适当的视图:
Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" ); ... Button button = (Button)findViewById( R.id.like ); button.setTypeface(font);
试试IcoMoon: http ://icomoon.io
- select你想要的图标
- 为每个图标分配字符
- 下载字体
说,你select了播放图标,分配字母“P”,并将文件icomoon.ttf
下载到您的资产文件夹。 这是你如何显示图标:
XML:
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="48sp" android:text="P" />
Java的:
Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf"); textView.setTypeface(typeface);
我已经谈论了制作漂亮的Android应用程序,其中包括使用图标字体的说明,以及添加渐变使图标更漂亮: http : //www.sqisland.com/talks/beautiful-android
图标字体说明从幻灯片34开始: http : //www.sqisland.com/talks/beautiful-android/#34
也许来不及,但我有相同的需要,所以我已经发布了这个https://github.com/liltof/font-awsome-for-android这是一个android准备xml版本的字体真棒可用就像基思科文说;
希望它能帮助别人。
有这样一个小而有用的图书馆 :
dependencies { compile 'com.shamanland:fonticon:0.1.9' }
在Google Play上获取演示。
您可以在布局中轻松添加基于字体的图标:
<com.shamanland.fonticon.FontIconView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/ic_android" android:textSize="@dimen/icon_size" android:textColor="@color/icon_color" />
你可以从xml中将字体图标充气为Drawable
:
<?xml version="1.0" encoding="utf-8"?> <font-icon xmlns:android="http://schemas.android.com/apk/res-auto" android:text="@string/ic_android" android:textSize="@dimen/big_icon_size" android:textColor="@color/green_170" />
Java代码:
Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);
链接:
- 项目页面
- Github回购
我用于Font Awesome的一个库是这样的:
https://github.com/Bearded-Hen/Android-Bootstrap
特别,
https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text
文档很容易理解。
首先,在build.gradle中添加所需的依赖关系:
dependencies { compile 'com.beardedhen:androidbootstrap:1.2.3' }
其次,你可以在你的XML中添加这个:
<com.beardedhen.androidbootstrap.FontAwesomeText android:layout_width="wrap_content" android:layout_height="wrap_content" fontawesometext:fa_icon="fa-github" android:layout_margin="10dp" android:textSize="32sp" />
但是如果你想使用上面的代码示例,请确保你在根布局中添加了这个:
xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"
FontView库允许您在应用程序中使用普通/统一字体字符作为图标/graphics。 它可以通过资源或networking位置加载字体。
这个库的好处是:
1 - it takes care of remote resources for you 2 - scales the font size in dynamically sized views 3 - allows the font to easily be styled.
https://github.com/shellum/fontView
例:
Layout:
<com.finalhack.fontview.FontView android:id="@+id/someActionIcon" android:layout_width="80dp" android:layout_height="80dp" />
Java:
fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE); fontView.addForegroundColor(Color.RED); fontView.addBackgroundColor(Color.WHITE);
如果你想要编程的setText没有添加string到string.xml
在这里看到它的hex代码:
http://fortawesome.github.io/Font-Awesome/cheatsheet/
replace&#xf066; 到0xf066
Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf"); textView.setTypeface(typeface); textView.setText(new String(new char[]{0xf006 }));
以上是很好的例子,效果很好:
Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" ); Button button = (Button)findViewById( R.id.like ); button.setTypeface(font);
但! >这将工作,如果你从xml中设置的button中的string:
<string name="icon_heart"></string> button.setText(getString(R.string.icon_heart));
如果你需要dynamic添加它可以使用这个:
String iconHeart = ""; String valHexStr = iconHeart.replace("&#x", "").replace(";", ""); long valLong = Long.parseLong(valHexStr,16); button.setText(getString((char)valLong+"");
我在C#(Xamarin)中创build了这个辅助类,以编程方式设置文本属性。 这对我来说工作得很好:
internal static class FontAwesomeManager { private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf"); private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string> { {FontAwesomeIcon.Bars, "\uf0c9"}, {FontAwesomeIcon.Calendar, "\uf073"}, {FontAwesomeIcon.Child, "\uf1ae"}, {FontAwesomeIcon.Cog, "\uf013"}, {FontAwesomeIcon.Eye, "\uf06e"}, {FontAwesomeIcon.Filter, "\uf0b0"}, {FontAwesomeIcon.Link, "\uf0c1"}, {FontAwesomeIcon.ListOrderedList, "\uf0cb"}, {FontAwesomeIcon.PencilSquareOutline, "\uf044"}, {FontAwesomeIcon.Picture, "\uf03e"}, {FontAwesomeIcon.PlayCircleOutline, "\uf01d"}, {FontAwesomeIcon.SignOut, "\uf08b"}, {FontAwesomeIcon.Sliders, "\uf1de"} }; public static void Awesomify(this TextView view, FontAwesomeIcon icon) { var iconString = IconMap[icon]; view.Text = iconString; view.SetTypeface(AwesomeFont, TypefaceStyle.Normal); } } enum FontAwesomeIcon { Bars, Calendar, Child, Cog, Eye, Filter, Link, ListOrderedList, PencilSquareOutline, Picture, PlayCircleOutline, SignOut, Sliders }
应该很容易转换到Java,我想。 希望它可以帮助别人!
还有一个很好的解决scheme,你可以直接使用你的布局xml文件,不需要使用setTypeface
。
这是Joan Zapata的Iconify 。 你可以在这里阅读Iconify v2中的新function。 它包括9个不同的字体库,你可以简单地通过添加依赖到你的build.gradle文件。
在布局xml文件中,可以在这些小部件之间进行select:
com.joanzapata.iconify.widget.IconTextview com.joanzapata.iconify.widget.IconButton com.joanzapata.iconify.widget.IconToggleButton
我晚了一点,但我写了一个自定义视图,让你这样做,默认情况下,它设置为entypo,但你可以修改它使用任何iconfont:检查它在这里:github.com/MarsVard/IconView
/ /编辑库是旧的,不再支持…新的一个在这里https://github.com/MarsVard/IonIconView
如果你只需要几个字体真棒图标,你也可以使用http://fa2png.io生成正常的像素图像。; 但是,如果你经常添加新的图标/button,我会推荐.ttf版本,因为它更灵活。
如果有人想知道如何在程序中添加它,你必须这样做。
button_info.setText(R.string.icon_heart); button_info.append(" Hallo"); //<<--- This is the tricky part
由于所有的答案都很好,但我不想使用一个库,每个解决scheme只有一行java代码,使得我的Activities
和Fragments
变得非常混乱。 所以我写了TextView
类如下:
public class FontAwesomeTextView extends TextView { private static final String TAG = "TextViewFontAwesome"; public FontAwesomeTextView(Context context) { super(context); init(); } public FontAwesomeTextView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private void setCustomFont(Context ctx, AttributeSet attrs) { TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus); String customFont = a.getString(R.styleable.TextViewPlus_customFont); setCustomFont(ctx, customFont); a.recycle(); } private void init() { if (!isInEditMode()) { Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf"); setTypeface(tf); } } public boolean setCustomFont(Context ctx, String asset) { Typeface typeface = null; try { typeface = Typeface.createFromAsset(ctx.getAssets(), asset); } catch (Exception e) { Log.e(TAG, "Unable to load typeface: "+e.getMessage()); return false; } setTypeface(typeface); return true; } }
你应该做的是将字体ttf
文件复制到assets
文件夹。并使用此备忘单来查找每个图标string。
希望这可以帮助。