Android nirvana SVG and use custom font library IconFont

Android nirvana SVG and use custom font library IconFont

Brief introduction

Google adds support for SVG vector graphics in Android 5.X in.

What is SVG

1. It refers to a Scalable Vector Graphics SVG (Scalable Vector Graphics)
2. SVG is used to define a vector graphics-based network
3. SVG uses XML format definition graphics
4. SVG image under magnification or changing the size of its image quality will not be lost
5. SVG is a standard World Wide Web Consortium
6. SVG standards such as the W3C DOM and XSL or the like as a whole

Feature

• Larger image N times, the picture will not blur, zoom without distortion

The difference between Bitmap and SVG

Bitmap (bitmap) image is expressed by storing the color information on each pixel, the SVG is a drawing standards. And Bitmap contrast, svg most important feature is an enlarged without distortion, and Bitmap need to design multiple sets of icons for different resolutions, and vector graphics do not.

SVG learning -VectorDrawable use
svg vector drawing and converted to Android resources available VectorDrawable
how to convert SVG into VectorDrawable XML resources
svg convert VectorDrawable tool

Currently looking for so many tools, xml into VectorDrawable tool did not find, at present only through to VectorDrawable Android SVG tool to SVG icons into xml file VectorDrawable after copying the xml file to a folder drawable AS .

Each SVG image needs to be generated in the AS drawable inside such a xml file, so that only one set, but too many files, so just want to fit in a PNG font inside.

Android icons used iconfont

1. Select an icon from iconfont to use the platform, and downloaded to the local; copy font files to the directory assets
2. Open the downloaded file, and open demo.html in the directory, find the icon corresponding HTML entity character code
3. Open the res / values ​​/ string.xml, add a string value:<string name="icon_erweima">&#xe642;</string>
4. Open activity_main.xml, add a string value to TextView:

5. To specify the text TextView

   Typeface typeface=Typeface.createFromAsset(getAssets(),"iconfont.ttf");
TextView textView= (TextView) findViewById(R.id.text_icon);
textView.setTypeface(typeface);

step

1. Log on to Ali iconfont icon icon library, select the desired, add storage

String value of the name of the node string.xml file, you need to pay attention to the semicolon ";" is also copied over

Note icon middle name can not use the bars "-" and use the underscore "_"

Custom font library

Although the above reducing the size of APP, although it can be encapsulated, but is still very troublesome. God has been big on GitHub encapsulates such a library Android-Iconics , since it only needs to be added in the AS can be used; to use icons in this icon library can be used in different sizes, color, resolution scene.

* Despite the existence of such a iconfont library, but in itself this library there are many problems, and explains in practical GitHub, and there are many bug, there are many pits, the actual development need more verification, or authors consult the library's Mike Penz , and the author has repeatedly and more developers to interact in here
*

The use of open source libraries on Android-Iconics described, can be found here shocked! Icon extremely simple to use? Android-Iconics open source library presentation , using Android-Iconics open source library , IconFont in Android to use , interpret these users although not all right, but can also refer to broaden their mind.

Precautions:

1. 使用Android-Iconics 需要注意该开源库一共提供我们了12个依赖库，每一个依赖库的图标icon前缀都和依赖库一一对应。如果找不到，或者报错，很有可能是icon前缀拼写错误或者是你自定义的依赖库。

   • Google Material Design Icons
     “gmd”
     ORIGINAL by Google compile 'com.mikepenz:google-material-typeface:+.original@aar'

   • Material Design Iconic Font
     “gmi”
     Google Material Iconic compile 'com.mikepenz:material-design-iconic-typeface:+@aar'

   • Fontawesome
     “faw”
     compile 'com.mikepenz:fontawesome-typeface:+@aar'

   • Meteocons
     “met”
     compile 'com.mikepenz:meteocons-typeface:+@aar'

   • Octicons
     “oct”
     compile 'com.mikepenz:octicons-typeface:+@aar'

   • Community Material
     “cmd”
     compile 'com.mikepenz:community-material-typeface:+@aar'

   • Weather Icons
     “wic”
     compile 'com.mikepenz:weather-icons-typeface:+@aar'

   • Typeicons
     “typ”
     compile 'com.mikepenz:typeicons-typeface:+@aar'

   • Entypo
     “ent”
     compile 'com.mikepenz:entypo-typeface:+@aar'

   • Devicon
     “dev”
     compile 'com.mikepenz:devicon-typeface:+@aar'

   • Foundation Icons
     “fou”
     compile 'com.mikepenz:foundation-icons-typeface:+@aar'

   • Ionicons
     “ion”
     compile 'com.mikepenz:ionicons-typeface:+@aar'

2、添加依赖库后，在普通控件上使用图标，一定要在onCreate方法里面且在super.onCreate()之前加上LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));

3、图标库可以作为一个drawable也可以在XML文件使用占位符赋值。引用时一定要和依赖库中对应的字体库中枚举类icon中的图标名一致，比如依赖了Ionicons ，这个图标库引用时就要和Ionicons这个类中枚举类icon的图标名一致。图标名可以通过Ionicons 这个网站，点击图标就可以获得图标名，如下图

自定义字体库

以上综述，也是对自定义字体库的注解，
1. 将从阿里图标网上的图标添加到购物车，后添加到一个项目，下载到本地的文件中的ttf格式字体文件复制到AS的assets文件下
2. 需要建立自己的自定义字体库类比如public class MyIconFont implements ITypeface ，实现这个接口ITypeface，重写其中的方法，以及创建枚举类public enum Icon implements IIcon 可以将依赖库Ionicons 中的Ionicons这个类中重写的方法以及枚举类和其他需要的复制过去，但是记得修改以及复制过去导致的包的问题。

实现ITypeface接口需要重写的方法中重要的是getMappingPrefix()、getIcons()、getTypeface()这3个方法

3、 创建好自己的字体类MyIconFont，后需要创建一个MyApplication继承于Application这个类并且在清单文件添加这个MyApplication

4、下图是需要注意的地方

自建字体类中的枚举类中的注意点

自建字体类中的注意点

项目demo下载地址这里