Android-Iconics使用自定义的矢量图标库字体

2017-05-12 本文已影响0人过眼云烟梦

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"

Android-Iconics使用自定义的矢量图标库字体

猜你喜欢

热点阅读