-
1 打开链接 www.iconfont.cn/plus/home/index ，进入阿里巴巴矢量图标库，选择我们喜欢的图标点击购物车图标，添加入库。
-
2 选择好后，进入购物车，点击添加至项目。
-
3 点击右边图标，添加一个新项目 animal，完成选择下载到本地
-
4 解压下载完成得文件，得到下图目录的文件
-
5 在项目中使用 android - iconics开源库 github.com/mikepenz/Android-Iconics 由于我们是直接使用的自己的icon，所以我们只需引用
compile"com.mikepenz:iconics-core:2.8.4@aar" -
6 在项目中新建 assets文件夹，将 ttf 格式的字体文件拷贝进其中
-
7 在MyApplication中进行初始化和注册
public class MyApplication extends Application
{
@Override
public void onCreate()
{
super.onCreate();
Iconics.init(getApplicationContext());
Iconics.registerFont(new MyIconFont());
}
- 8 创建MyIconFont类，实现ITypeface接口，并实现其中的13个方法
public class MyIconFont implements ITypeface
{
// 字体库的名字，在assets目录下
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;
}
// icon名字的前缀
@Override
public String getMappingPrefix()
{
return "lbw";
}
@Override
public String getFontName()
{
return "MyIconFont";
}
@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 "字库作者";
}
@Override
public String getUrl()
{
return "字库URL下载地址";
}
@Override
public String getDescription()
{
return "字库简介";
}
@Override
public String getLicense()
{
return "字库许可证";
}
@Override
public String getLicenseUrl()
{
return "许可证地址";
}
@Override
public Typeface getTypeface(Context context)
{
if (typeface == null)
{
try
{
// 创建一个typeface，从asstes目录中读取
typeface = Typeface.createFromAsset(context.getAssets(), TTF_FILE);
} catch (Exception e)
{
return null;
}
}
return typeface;
}
public enum Icon implements IIcon
{
// 对应编码的获取方法下面有讲到
lbw_number_0('\ue621'),
lbw_number_1('\ue622'),
lbw_number_2('\ue62e'),
lbw_number_3('\ue600'),
lbw_number_4('\ue630'),
lbw_number_5('\ue69b'),
lbw_number_6('\ue70e'),
lbw_number_7('\ue601'),
lbw_number_8('\ue69e'),
lbw_number_9('\ue62a');
char character;
Icon(char character)
{
this.character = character;
}
public String getFormattedName()
{
return "{" + name() + "}";
}
public char getCharacter()
{
return character;
}
public String getName()
{
return name();
}
private static ITypeface typeface;
public ITypeface getTypeface()
{
if (typeface == null)
{
typeface = new MyIconFont();
}
return typeface;
}
}
}
- 9 enum Icon中，各图标对应的Unicode获得方式，在下载解压的字体包文件中，找到后缀为.css的文件，用editplus打开它，就能看到我们下载的图标名字，以及对应的编码
- 10 在需要使用的activity和fragment中，添加如下代码和重写attachBaseContext 方法
@Override
protected void onCreate(Bundle savedInstanceState)
{
// 添加如下代码
LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
// 重写此方法
@Override
protected void attachBaseContext(Context newBase)
{
super.attachBaseContext(IconicsContextWrapper.wrap(newBase));
}
- 11 在xml布局文件中使用
<Button
android:layout_width="120dp"
android:layout_height="60dp"
android:text="{lbw-number-7} Button"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ico_color="@color/colorPrimary"
app:ico_icon="lbw-number-2"
app:ico_size="48dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:text="{lbw-number-6}双击666"
android:textColor="@android:color/black"
android:textSize="50sp"/>
- 12 在代码中使用
- 获取到对应的drawable，在imageview中使用
IconicsDrawable iconicsDrawable = new IconicsDrawable(this)
.icon(MyIconFont.Icon.lbw_number_0)
.color(Color.YELLOW)
.sizeDp(50);
ImageView iv_font = (ImageView) findViewById(R.id.image_myfont);
iv_font.setImageDrawable(iconicsDrawable);
- 在textview中使用
TextView tv_font = (TextView) findViewById(R.id.text_font);
tv_font.setText("{lbw-number-6}{lbw-number-6}{lbw-number-6}");
tv_font.setTextSize(100);
tv_font.setTextColor(Color.YELLOW);
- 注意要点
- 在布局文件中使用的时候，会提示如下红线警告
可以不用管它，运行是没有问题的，如果看着不开心，可以在根布局加上 ```
tools:ignore="MissingPrefix"
网友评论