对于SVG,安卓可以试用vector可以引入到drawable里,就可以直接相当于图片使用,但是这样做会造成颜色控制困难,导致效率并不高。所以可以直接将值封装成字体包的形式,直接设置textColor就好了。想变红就不会变绿。
Iconfont目的在使用SVG的时候引入字体包,如果再项目中引用纯色图片,使用SVG会达到一个高效的目的,长话短说,直接开始说,怎么用。
这里,讲解的是阿里巴巴矢量库里的iconfont。
百度搜索—-iconfont 会出来阿里巴巴矢量库的链接哦,注册,登录,然后创建项目。
好,我们上传了我们需要的SVG后,并且下载了生成好的压缩包,我们预览一下。
现在对我们有用的,是ttf文件,还有unicode.html文件,这2个,一个是主文件,另外一个,知识为了让你去知道,内部字体的编码,以及编码之前的命名。我们现在打开unicode.html,我使用的是editplus。直接查看的源代码,你也可以用记事本打开。
如果直接使用的话,你也可以参考阿里巴巴的文档,是相当简单的。并且也是很好用的。
下面的链接指向阿里巴巴的帮助文档
http://www.iconfont.cn/plus/help/detail?helptype=code
如果你有更多的需求。比如将之以drawble的形式导出,或者在imageview中使用字体包,或者使用一些三方的字体包的话。那么可以考虑引入下关于svg的插件。这里介绍的是Android-Iconics
https://github.com/mikepenz/Android-Iconics
这里有英文的文档及项目的demo。如果你嫌看英文文档累。那么,你就慢慢的听我说吧。
如果你不需要google这些标准的iconfont,而直接使用自己的icon。。那么你只需要引入
compile ‘com.mikepenz:iconics-core:2.8.1@aar’ 就够了
首先把ttf文件放到下图的位置
然后上我的配置文件吧
public class MyIcon implements ITypeface {
private static final String TTF_FILE = "iconfont.ttf";
private static Typeface typeface = null;
private static HashMap<String, Character> mChars;
@Override
public IIcon getIcon(String key) {
return Icon.valueOf(key);
}
@Override
public HashMap<String, Character> getCharacters() {
if (mChars == null) {
HashMap<String, Character> aChars = new HashMap<String, Character>();
for (Icon v : Icon.values()) {
aChars.put(v.name(), v.character);
}
mChars = aChars;
}
return mChars;
}
@Override
public String getMappingPrefix() {
return "con";
}
@Override
public String getFontName() {
return "MyIcon";
}
@Override
public String getVersion() {
return "1.0.0";
}
@Override
public int getIconCount() {
return mChars.size();
}
@Override
public Collection<String> getIcons() {
Collection<String> icons = new LinkedList<String>();
for (Icon value : Icon.values()) {
icons.add(value.name());
}
return icons;
}
@Override
public String getAuthor() {
return "ZRF";
}
@Override
public String getUrl() {
return "";
}
@Override
public String getDescription() {
return "";
}
@Override
public String getLicense() {
return "";
}
@Override
public String getLicenseUrl() {
return "";
}
@Override
public Typeface getTypeface(Context ctx) {
if (typeface == null) {
try {
typeface = Typeface.createFromAsset(ctx.getAssets(), "fonts/" + TTF_FILE);
} catch (Exception e) {
return null;
}
}
return typeface;
}
public enum Icon implements IIcon {
//这里是我自己的命名,最好基于unicode里面原来的名字,这样会使对应方便
//括号里就是unicode字体编码。其实就是将一些平时不用的字体,换成这些纯色图
//甚至你可以把它看作是你自己写的文字,而不是图片。
con_aadetail_icon_write('\ue62a'),
con_dyn_login_cross('\ue629'),
con_dyn_login_logo('\ue628'),
con_dyn_detail_close('\ue627'),
con_article_portrait('\ue626'),
con_faceless_checkBox_normal('\ue625'),
con_faceless_checkBox_checked('\ue624'),
con_recordvideo_btn_closelight('\ue623'),
con_video_btn_trypaly_preview('\ue622'),
con_videoclass_notes_playtime('\ue621'),
con_videoclass_notes_notetime('\ue620'),
con_videoclass_coursename_stop('\ue61f'),
con_videoclass_coursename_play('\ue61e'),
con_recordvideo_btn_lightopen('\ue61d'),
con_recordvideo_btn_turncamera('\ue61c'),
con_recordvideo_delete('\ue61b'),
con_recordvideo_btn_start('\ue61a'),
con_public_video_btn_directory('\ue619'),
con_icon_warning('\ue618'),
con_public_audio_btn_audition('\ue617'),
con_state_icon_warmprompt48('\ue616'),
con_public_video_btn_stop('\ue615'),
con_public_video_btn_playnext('\ue614'),
con_public_video_btn_play('\ue613'),
con_public_vedio_btn_stop('\ue612'),
con_public_vedio_btn_play('\ue611'),
con_public_op_btn_minwindow('\ue610'),
con_public_op_btn_maxwindow('\ue60f'),
con_public_nav_btn_share('\ue60e'),
con_public_nav_btn_collected('\ue60d'),
con_public_nav_btn_collect('\ue60c'),
con_public_nav_btn_back('\ue60b'),
con_public_answer_replynumber('\ue60a'),
con_personal_btn_set('\ue609'),
con_personal_btn_service('\ue608'),
con_personal_btn_purse('\ue607'),
con_personal_btn_need('\ue606'),
con_personal_btn_message('\ue605'),
con_personal_btn_flock('\ue604'),
con_personal_btn_dynamic('\ue603'),
con_personal_btn_course('\ue602'),
con_personal_btn_classroom('\ue601'),
con_personal_btn_channel('\ue600');
char character;
Icon(char character) {
this.character = character;
}
public String getFormattedName() {
return "{" + name() + "}";
}
public char getCharacter() {
return character;
}
public String getName() {
return name();
}
// remember the typeface so we can use it later
private static ITypeface typeface;
public ITypeface getTypeface() {
if (typeface == null) {
typeface = new MyIcon();
}
return typeface;
}
}
}`
你需要在你的项目的application中引用他
@Override
public void onCreate() {
super.onCreate();
//register custom fonts like this (or also provide a font definition file)
Iconics.registerFont(new MyIcon());
}
将下面这段代码记录在你的activity的基类中,以便你能够在imageview跟textview中正常的使用iconic。但是,如果使用imageview的时候,会产生一些问题。比如你必须知道app:后面跟的属性是什么名字,因为是缺失的并不提示的。
@Override
protected void attachBaseContext(Context newBase) {
super.attachBaseContext(IconicsContextWrapper.wrap(newBase));
}
这是在你在activity中注册了context事件。才可以直接使用系统的控件。但是会报出属性缺失异常。比如你觉得不好看,你可以在根布局上加上
tools:ignore="MissingPrefix"
这样他就会忽略没有的属性,不会报错,我建议就让他红着。
如果你没有在activity中注册context。你可以在用到iconfont的地方使用他内部的控件。这也是我建议的,比如下方这样,都是通俗易懂,而且studio能够提示,跟平时的imageview并没有什么不同。唯一的区别就是图片没办法预览。这是唯一的弊端。
普通的imageview中使用
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:ico_color="@color/md_red_A200"
app:ico_icon="gmd-plus-circle"
app:ico_size="48dp" />
//other possible attributes
//app:ico_background_color="@android:color/transparent"
//app:ico_color="@color/md_red_100"
//app:ico_contour_color="@android:color/transparent"
//app:ico_contour_width="0dp"
//app:ico_corner_radius="0dp"
//app:ico_icon="gmd-plus-circle"
//app:ico_offset_x="0dp"
//app:ico_offset_y="0dp"
//app:ico_padding="0dp"
//app:ico_size="48dp"
相应的库里自定义imageview使用
<com.mikepenz.iconics.view.IconicsImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:iiv_background_color=""
app:iiv_color=""
app:iiv_contour_color=""
app:iiv_contour_width=""
app:iiv_corner_radius=""
app:iiv_icon=""
app:iiv_padding=""
app:iiv_size=""
app:paddingEnd=""
app:paddingStart=""
app:theme=""/>
如果你要在textview中引用,或者iconictextview
<com.mikepenz.iconics.view.IconicsTextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="abv{faw-adjust}cdd{con_aadetail_icon_write}"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="16dp"
/>
你必须 {这里是图片} 以这样的形式来引入你的图片。textColor就是这张图的颜色,这也是最简单,也挺好用的,个人比较推荐。在textview中也是一样用法。如果你使用textview没有效果,请注意是否注册。
当然,你也可以在button等中引入他,并且可以在代码中获取到相应的drawable。或者你可以直接在项目中。设置text,他一样会显示为图片。相当便利。类似与这样
new IconicsDrawable(this)
.icon(FontAwesome.Icon.faw_android)
.color(Color.RED)
.sizeDp(24)
你可以像你平时给textview设置文字一样设置图片。并且随意改变他的颜色
textview.setText("{con_aadetail_icon_write}");
textview.setTextColor(R.color.colorPrimary);
还有更多用法,可以参考官方demo。如果需要。过几天我上我的demo。现在没有整理出来。