一、前言:
开发新的个人项目常常受到缺少图标的困扰,今天就手把手教你如何打造专属自己的图标库。
二、建立图标库:
1、打开 iconfont
2、登陆 (没有账号可以注册一个)
3、点击图标库-->选择图标库
4、点击选择任意图库,进入这个页面,在任意icon上悬浮鼠标
- 1.添加入库:就是把图标选中到临时的仓库
- 2.收藏 :添加至收藏库中,可以通过下图找到
- 3.下载:以图片的形式下载(可以设置要下载图片的格式、大小、颜色)
5、打开临时收藏库 ,会出现下面三个功能选项
会出现下面三个功能选项:
- 1、添加至项目:将临时库添加到自己图标库中
- 2、下载素材:批量下载功能(同单个下载一样)
- 3、下载代码:稍后详细介绍功能
选择 添加至项目,新建一个demo的工程:
建立完成之后:
至此,建立个人的图标库工作已经完成。如何使用呢?
三、使用个人图标库:
1、从个人库中选择需要在项目中使用到的图标
2、选择批量加入购物车,选择需要的图标
3、选择下载代码
- 1、下载完成之后,解压得到
- 2、去除无用的部分(未画红色的部分),得到
4、在android中使用
- 1、将精简后的代码拷贝到assets目录下,
- 2、自定义IconFontTextView
public class IconFontTextView extends TextView {
public IconFontTextView(Context context) {
super(context);
initIconFont(context);
}
public IconFontTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initIconFont(context);
}
public IconFontTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initIconFont(context);
}
private void initIconFont(Context context) {
Typeface iconfont = Typeface.createFromAsset(context.getAssets(), "icon_font/iconfont.ttf");
setTypeface(iconfont);
}
}
3、复制 Values下面的strings 粘贴到当前文件夹 命名为 string-icon-font
4、打开 demo_unicode.html这文件,将画红线的值拷进去。
- 5、在XML文件中引用
<com.wd.fmm.leisure.view.IconFontTextView
android:textSize="@dimen/activity_homepage_buttom_icon_size"
android:gravity="center"
android:text="@string/icon_font_home"
android:textColor="@color/colorAccent"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="@color/colorAccent"
android:text="首页"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
完整布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fl_root"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/incloud_divice_line"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="52dp">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<com.wd.fmm.leisure.view.IconFontTextView
android:textSize="@dimen/activity_homepage_buttom_icon_size"
android:gravity="center"
android:text="@string/icon_font_home"
android:textColor="@color/colorAccent"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="@color/colorAccent"
android:text="@string/homepage_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<com.wd.fmm.leisure.view.IconFontTextView
android:textSize="@dimen/activity_homepage_buttom_icon_size"
android:gravity="center"
android:text="@string/icon_font_hot"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="@string/homepage_hot"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<com.wd.fmm.leisure.view.IconFontTextView
android:textSize="@dimen/activity_homepage_buttom_icon_size"
android:gravity="center"
android:text="@string/icon_font_my"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="@string/homepage_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<com.wd.fmm.leisure.view.IconFontTextView
android:textSize="@dimen/activity_homepage_buttom_icon_size"
android:gravity="center"
android:text="@string/icon_font_settings"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="@string/homepage_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>