【AndroidUI设计】icon矢量图标应用（低内存高复用）

• 描述：使用静态资源图片，点击按钮切换图片，这是可行的。但如果一个界面使用了十多张静态资源图片，且当前用户手机内存空间不足呢？申请内存 > 所剩内存，不满足内存堆，就会直接卡出程序。
• 难度：中级
• 技术：映射原理
• 注意：任何商用的软件，一定要注意icon图标授权规则，保护原创者的辛苦劳动。
• 优点：

a（100张icon图标）和b（100张静态图片）进行对比
(1) 内存a（50kb左右） < 内存b（1mb以上）
(2) 授权价格a < 授权价格b
(3) 设计成本a < 设计成本b
(4) 使用效率a（图标填充和边的颜色都可以通过setBackgroundColor()修改） > 使用效率b
(5) 使用icon图标，动态修改图标时，节省流量
(6) icon有固定的仓库网站，而image需要自己找，且不兼容ui界面的布局设计

• 效果展示
  

一、下载地址

Icomoon (https://icomoon.io/app/#/select)

IconFont-阿里巴巴矢量图标库 (https://www.iconfont.cn/collections)

二、下载图标（以Icomoon为例）

三、使用图标

1、文件目录

2、映射文件

• XpqIcoMoon.java

import androidx.annotation.StringDef;

@StringDef({  //采用映射将这些文字图片显示
        XpqIcoMoon.FAVORITES,
        XpqIcoMoon.RECORDING,
        XpqIcoMoon.WALLET,
        XpqIcoMoon.ORDER,
        XpqIcoMoon.SET,
})
public @interface XpqIcoMoon {
	// \ue901等 可以直接通过复制ttf文件的图标直接获取，也可以通过下载的html文件获取
    String FAVORITES = "\ue901";  //收藏  星星

    String RECORDING = "\ue907";  //记录  云

    String WALLET = "\ue906";     //钱包  夹层包

    String ORDER = "\ue91B";      //订单  报纸

    String SET = "\ue903";        //设置  齿轮
}

• XpqIcoMoonUtils.java

import android.content.Context;
import android.graphics.Typeface;
import android.widget.TextView;

public class XpqIcoMoonUtils {
    public static Typeface IOC;

    public static Typeface getIOC(final Context context) {
        if (IOC == null)
            IOC = getTypeface(context,"ico.ttf");
        return IOC;
    }

    public static void setIOC(final TextView... textViews) {
        if (textViews == null || textViews.length == 0)
            return;
        Typeface typeface = getIOC(textViews[0].getContext());
        for (TextView textView : textViews)
            textView.setTypeface(typeface);
    }

    private static Typeface getTypeface(final Context context,final String name) {
        return Typeface.createFromAsset(context.getAssets(),name);
    }
}

3、使用图标

• UI界面布局(activity_main.xml)

    <LinearLayout
        android:id="@+id/inter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/fragment_tx"
        android:orientation="horizontal"
        android:textSize="30dp">

        <Button
            android:id="@+id/XPQ_FAVORITES"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_weight="1"
            android:background="#00FFFFFF" />

        <Button
            android:id="@+id/XPQ_RECORDING"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_weight="1"
            android:background="#00FFFFFF" />

        <Button
            android:id="@+id/XPQ_ORDER"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_weight="1"
            android:background="#00FFFFFF"/>

        <Button
            android:id="@+id/XPQ_WALLET"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_weight="1"
            android:background="#00FFFFFF"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/inters"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/fragment_tx"
        android:layout_marginTop="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/FAVORITES"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="收藏"
            android:gravity="center"
            android:textSize="15dp" />

        <TextView
            android:id="@+id/RECORDING"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:gravity="center"
            android:text="历史" />

        <TextView
            android:id="@+id/ORDER"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:gravity="center"
            android:text="订单" />

        <TextView
            android:id="@+id/WALLET"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:gravity="center"
            android:text="钱包" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/inters">

    </LinearLayout>

    <TextView
        android:id="@+id/frag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home_ys"
        android:textSize="30dp"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="20dp"
        android:textColor="#60D03A"/>

    <Button
        android:id="@+id/tuichu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home_ys"
        android:background="#1AFFFFFF"
        android:text="退出登陆"/>

• 编写代码(MainActivity.java)

    @Override
	protected void onCreate(Bundle savedInstanceState) {
        	super.onCreate(savedInstanceState);
        	setContentView(R.layout.activity_main);
        	//icomoon文字图标的显示
        	IcoMoonUtil();
	}

    private void IcoMoonUtil() {
        Button favorites = root.findViewById(R.id.XPQ_FAVORITES);
        Button recording = root.findViewById(R.id.XPQ_RECORDING);
        Button wallet = root.findViewById(R.id.XPQ_WALLET);
        Button order = root.findViewById(R.id.XPQ_ORDER);
        Button frag = root.findViewById(R.id.frag);
        favorites.setText(XpqIcoMoon.FAVORITES);
        recording.setText(XpqIcoMoon.RECORDING);
        wallet.setText(XpqIcoMoon.WALLET);
        order.setText(XpqIcoMoon.ORDER);
        frag.setText(XpqIcoMoon.SET);
        XpqIcoMoonUtils.setIOC(favorites,recording,wallet,order,frag);
    }