安卓android中小圖標使用優化(svg矢量圖與iconfiy)

在開發安卓中會遇到各類各樣的小圖片(icon),裁剪繁瑣,拉伸容易失真,png圖片積累到必定量的時候,使包的體積變大,svg圖與iconfiy這個第三方庫能夠解決以上的問題,但只試用於icon,背景圖片等還須要本身進行優化;java

  • android如何使用svg圖,
    下面的文章說的比較詳細:Android使用矢量圖

    svg是xml文件通常是kb級別,佔用內存小;
    svg矢量圖只能在api>21,android5.0之後進行使用,往前也能兼容,不過api<15就不能兼容了,textview的使用矢量圖須要本身填坑;雖然如此,根據奧卡姆剃刀原理,安卓原生api中提供了大量的矢量圖可使用,若是對風格要求不嚴,直接能夠在img標籤下引用原生的drawable矢量圖.國內外的icon網站基本都有svg圖下載,代碼轉換一下就能夠直接使用了.android

    根據我的使用svg經驗,通常從資源網站下載的很小不超過kb級的小圖片,ps一下直接能用的,就不必使用svg跟iconfiy了,svg須要各類適配各類轉換各類坑,並且文件大小不必定比png小,iconfiy雖然體積小,但畢竟多引入了一個包,一個包的大小至少200k以上。git

  • iconfiy的使用思路是用自定義的textview代替imgview,因此體積會更小:

    具體使用方法見:github官網說明github

dependencies {api

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)

}less

@Override
public void onCreate() {
    super.onCreate();
    Iconify
        .with(new FontAwesomeModule())//經常使用
        //如下的類似基本能夠不用
        .with(new EntypoModule())
        .with(new TypiconsModule())
        .with(new MaterialModule())
        .with(new MaterialCommunityModule())
        .with(new MeteoconsModule())
        .with(new WeathericonsModule())//若是有天氣需求就加上這個庫
        .with(new SimpleLineIconsModule())
        .with(new IoniconsModule());
}

}ionic

  • iconfiy的優勢是體積小,使用方便,缺點是你須要知道對應的圖片資源標識符如 {fa-smile-o},圖片很差搜索,資源標識符更很差找到.沒有圖片資源,不知道如何引用字體,如無米之炊.
    如下按照iconfiy的依賴,分別找到ttf的下載資源與圖片的搜索地址,你們能夠根據項目的需求、本身愛好分別加載不一樣庫;

iconify基本把國外的icon網站資源一網打盡.
iconify資源網址ide


iconify資源不是很全,能夠到他依賴的icon資源網站進行圖片搜索:
android-iconify-entypo
entypo ttf下載地址
entypo圖片搜索地址
android-iconify-fontawesome
fontawesome圖片搜索地址
fontawesome ttf下載地址
android-iconify-ionicons
ionicons ttf下載與圖片搜索地址
android-iconify-material
material ttf資源下載地址
material圖片搜索地址
android-iconify-material-community
material-community下載與搜索地址
android-iconify-meteocons
meteocons資源
android-iconify-sample
iconify-sample下載與搜索地址
android-iconify-simplelineicons
simplelineicons ttf下載
simplelineicons 圖片搜索
android-iconify-typicons
typicons ttf下載與圖片搜索地址
android-iconify-weathericons
weathericons ttf下載與圖片搜索地址svg

iconfiy官網說明中的
Icon options(字體後樣式變化),與Show an icon where you need a?Drawable(在代碼中的應用)也是頗有用的,須要本身進行發揮;字體

  • 注意:在開發時,若是直接從源碼粘貼字體標誌須要把'_'替換成'-':如
    注意1
    特別注意:在低版本的iconfiy中weathericons有問題,由於做者沒有在WeathericonsIcons.java這個類中

的key()中替換成'-':
@Overridepublic String key() {??? return name().replace('_', '_');}
圖片描述
若是直接從資源網站找到則不需進行替換,直接黏貼通常可使用,可是會有搜索出來的圖片沒法使用的狀況,
這時就須要自定義iconfiy了;

  • 自定義:支付寶支付等圖標等國內特點的圖片國外的資源通常沒有,這時就須要本身阿里的圖庫中自定義字體了,比較不錯的文章有(再也不進行贅述):
    阿里圖庫的自定義icon
    Fontello的自定義

  • IconToggleButton??也比較有意思,有興趣能夠試試:

    <com.joanzapata.iconify.widget.IconToggleButton
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textOff="{fa-smile-o 20sp spin}"
           android:textOn="{icon-indemnity}"/>
           
         
         
         
         public class MainActivity extends AppCompatActivity {
            @Override
           protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           final IconToggleButton tb  = findViewById(R.id.toggleBt);
           findViewById(R.id.toggleBt).setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                   if (tb.isChecked()){
                       //邏輯1
                   }else {
                       //邏輯2
                   }
               }
           });
       }

}

相關文章
相關標籤/搜索