字体图标库介绍
优点：
- 自适应性: 图像清晰 可以无限放大而不会失真，模糊
- 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。
- 灵活性：图标字体可以用过font-size属性设置其任何大小，可以将适用于text的属性应用于这些矢量图标上，从而实现改变图标颜色、添加阴影等效果
劣势:
- 图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用
- 使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用
- 创作自已的字体图标很费时间，重构人员后期维护的成本偏高。
字体图标库 android-iconify的介绍
- iconify的github地址：https://github.com/JoanZapata/android-iconify
- iconify是一个矢量图标库，包含使用 Dave Gandy 制作的超过370中矢量字体图标，可以使Android应用开发者免于制作多种适用于不同屏幕大小尺寸的 图 片，从而提高开发者工作效率
- 适用场景
<1>iconify原作者提供了三种他自定义的控件：IconTextView、IconButton、IconToggleButton，可以直接使用这三类控件来显示iconify中提供的字体图标；
<2>在java代码中通过使用一个IconDrawable为具有setIcon（Drawable drawable）方法的控件设置该字体图标
劣势：目前在xml文件中使用图标库中的资源时，需要自己对照查阅不同图标所对应的标记，自己手敲标记，这样不仅麻烦，而且容易出错
字体图标库android-iconify的使用
通过一个小栗子 添加一个咖啡小图标 来了解具体的使用过程
1.添加依赖
dependencies {
compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2' // (v4.5)
compile 'com.joanzapata.iconify:android-iconify-entypo:2.2.2' // (v3,2015)
compile 'com.joanzapata.iconify:android-iconify-typicons:2.2.2' // (v2.0.7)
compile 'com.joanzapata.iconify:android-iconify-material:2.2.2' // (v2.0.0)
compile 'com.joanzapata.iconify:android-iconify-material-community:2.2.2' // (v1.4.57)
compile 'com.joanzapata.iconify:android-iconify-meteocons:2.2.2' // (latest)
compile 'com.joanzapata.iconify:android-iconify-weathericons:2.2.2' // (v2.0)
compile 'com.joanzapata.iconify:android-iconify-simplelineicons:2.2.2' // (v1.0.0)
compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2' // (v2.0.1)
}
可以只添加自己需要的某一个或几个库即可
dependencies {
//字体图标库
compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'
compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2'
}
2.封装集成
在现实的项目中不适合拿官方给出的使用方式直接使用 方便后期字体图标库的扩展与更换 对其使用进行封装
- 创建一个枚举类 存储全局配置类型
public enum ConfigType {
API_HOST,
APPLICATION_CONTEXT,
CONFIG_READY,
ICON
}
- 创建一个单例 配置项目所有信息
package com.rrcc.core.app;
import com.joanzapata.iconify.IconFontDescriptor;
import com.joanzapata.iconify.Iconify;
import java.util.ArrayList;
import java.util.HashMap;
/**
* Created by mac on 2019/4/16.
*/
public class Configurator {
private static final HashMap<String, Object> LATTE_CONFIG = new HashMap<>();
private static final ArrayList<IconFontDescriptor> ICONS = new ArrayList<>();
private Configurator() {
LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(), false);
}
public static Configurator getInstance(){
return Holder.INSTANCE;
}
private static class Holder{
private static final Configurator INSTANCE = new Configurator();
}
public final void configure(){
LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(),true);
initIcons();
}
final HashMap<String,Object> getLatteConfigs(){
return LATTE_CONFIG;
}
private void checkConfiguration(){
final boolean isReady = (boolean)LATTE_CONFIG.get(ConfigType.CONFIG_READY.name());
if(!isReady){
throw new RuntimeException("Config is not ready,call configure");
}
}
public final Configurator withApiHost(String host){
LATTE_CONFIG.put(ConfigType.API_HOST.name(),host);
return this;
}
/**
*字体图标库初始化
*/
public final Configurator withIcon(IconFontDescriptor descriptor) {
ICONS.add(descriptor);
return this;
}
private void initIcons() {
if (ICONS.size() > 0) {
final Iconify.IconifyInitializer initializer = Iconify.with(ICONS.get(0));
for (int i = 1; i < ICONS.size(); i++) {
initializer.with(ICONS.get(i));
}
}
}
@SuppressWarnings("unchecked")
public final <T> T getConfiguration(Enum<ConfigType> key) {
checkConfiguration();
return (T) LATTE_CONFIG.get((ConfigType) key);
}
}
- 创建一个final类 来操作配置文件的初始化
public final class Latte {
public static Configurator init(Context context){
Configurator.getInstance().getLatteConfigs().put(ConfigType.APPLICATION_CONTEXT.name(),context.getApplicationContext());
return Configurator.getInstance();
}
private static HashMap<String,Object> getConfigurations(){
return Configurator.getInstance().getLatteConfigs();
}
public static Context getAppContext(){
return (Context) Configurator.getInstance().getLatteConfigs().get(ConfigType.APPLICATION_CONTEXT.name());
}
}
- 创建Application类 初始化配置文件
public class ExampleApp extends Application {
@Override
public void onCreate() {
super.onCreate();
Latte.init(this)
.withApiHost("https://www.xxxxxx.com/")
.withIcon(new FontAwesomeModule())
.configure();
}
}
3.通过Font Awesome 官方网址查询 样式
图片的样式开源通过 Font Awesome 官方网址查询，输入其英文名称即可查到
https://fontawesome.com/icons
查询1.jpeg
查询2.jpeg
4.在布局文件中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.rrcc.latte.MainActivity">
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/icon_test0"
android:text="{fa-coffee}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="20dp"
android:textSize="30sp"
/>
</LinearLayout>
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
5.运行效果
结果.jpeg
阿里矢量图标库的封装使用
-
通过搜索关键字段 将相应的图标添加到购物车 然后下载ttf
下载.jpeg -
将ttf文件添加到assets
保存ttff.jpeg 根据 FontAwesomeModule 自定义 一 FontEcModule
public class FontEcModule implements IconFontDescriptor {
@Override
public String ttfFileName() {
return "iconfont.ttf";
}
@Override
public Icon[] characters() {
return EcIcons.values();
}
}
public enum EcIcons implements Icon{
icon_scan('\ue600'),
icon_ali_pay('\ue638'),
icon_payment_code('\ue639');
private char character;
EcIcons(char character) {
this.character = character;
}
@Override
public String key() {
return name().replace('_', '-');
}
@Override
public char character() {
return character;
}
}
- 初始化 将自定义字体添加
public class Configurator {
private static final HashMap<String, Object> LATTE_CONFIG = new HashMap<>();
private static final ArrayList<IconFontDescriptor> ICONS = new ArrayList<>();
private Configurator() {
LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(), false);
}
public static Configurator getInstance(){
return Holder.INSTANCE;
}
private static class Holder{
private static final Configurator INSTANCE = new Configurator();
}
public final void configure(){
LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(),true);
initIcons();
}
final HashMap<String,Object> getLatteConfigs(){
return LATTE_CONFIG;
}
/**
*字体图标库初始化
*/
public final Configurator withIcon(IconFontDescriptor descriptor) {
ICONS.add(descriptor);
return this;
}
private void initIcons() {
if (ICONS.size() > 0) {
final Iconify.IconifyInitializer initializer = Iconify.with(ICONS.get(0));
for (int i = 1; i < ICONS.size(); i++) {
initializer.with(ICONS.get(i));
}
}
}
}
public class ExampleApp extends Application {
@Override
public void onCreate() {
super.onCreate();
Latte.init(this)
.withApiHost("https://www.baidu.com/")
.withIcon(new FontAwesomeModule())
.withIcon(new FontEcModule())
.configure();
}
}
- 在布局中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.rrcc.latte.MainActivity">
<!--这个是使用iconify-->
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/icon_test0"
android:text="{fa-coffee}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="20dp"
android:textSize="30sp"
/>
<!--下面的三个都是使用阿里图库 使用枚举EcIcons类型 将下划线改为中划线-->
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/icon_test"
android:text="{icon-scan}"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:textSize="30sp"
/>
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/icon_test1"
android:text="{icon-ali-pay}"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:textSize="30sp"
/>
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/icon_test2"
android:text="{icon-payment-code}"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:textSize="30sp"
/>
</LinearLayout>
altuku.jpeg
