天天看點
傳回

還在為android圖示适配煩惱？字型圖示你值得擁有

既然說的是字型圖示，那麼肯定和android字型有關系。是以，我們先回顧一下基礎知識Android 字型設定-Typeface，老司機請略過該部分

一、Android 字型設定-Typeface

控件的字型設定的兩種方式

常用的字型類型名稱還有：

Typeface.DEFAULT //正常字型類型

Typeface.DEFAULT_BOLD //黑體字型類型

Typeface.MONOSPACE //等寬字型類型

Typeface.SANS_SERIF //sans serif字型類型

常用的字型風格名稱還有：

Typeface.BOLD //粗體

Typeface.BOLD_ITALIC //粗斜體

Typeface.ITALIC //斜體

Typeface.NORMAL //正常

  1. 在xml中設定。

    使用android:typeFace來設定：

    Android:typeface=”sans”

  2. 在Java程式中： 
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );

String familyName = “宋體”;
Typeface font = Typeface.create(familyName,Typeface.BOLD);
p.setTypeface(font);

使用外部字型

1.首先吧要使用的字型檔案拷貝到assets下的fonts目錄下。

2.代碼如下：

private void mySetTypeFace() {
        // TODO Auto-generated method stub
        //從assert中擷取有資源，獲得app的assert，采用getAserts()，通過給出在assert/下面的相對路徑。在實際使用中，字型庫可能存在于SD卡上，可以采用createFromFile()來替代createFromAsset。
        Typeface face = Typeface.createFromAsset(getAssets(), "fonts/HanYi.ttf");
        //title是之間定義的控件
        title.setTypeface(face);
    }

然後根據上面的基礎知識，我們封裝一個使用自定義字型的TextView ： IconFontTextView ，具體代碼如下：

public class IconFontTextView extends TextView {

    public IconFontTextView(Context context) {
        super(context);
        init(context);
    }

    public IconFontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public IconFontTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public IconFontTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }

    private void init(Context context) {
        setTypeface(getTypeFace(context));
    }

    private static Typeface tf;

    public static Typeface getTypeFace(Context ctx) {
        if (tf == null) {
            tf = Typeface.createFromAsset(ctx.getAssets(), "fonts/icomoon.ttf");//icomoon字型是在icomoon生成的字型，具體參考下文
        }
        return tf;
    }
}

二、圖示字型

說了這麼多終于要進入了我們今天的重頭戲，就是使用圖示字型來替換我們當然圖示，這裡安利一個網站icomoon，對于如何使用，這裡就不費筆墨了，請移步部落格如何靈活利用免費開源圖示字型-IcoMoon篇。

至于字型生成原理及使用技巧,請參考iconfont原理,對于SVG這裡不做讨論~~有興趣的讀者自行查閱。

明白了如何使用，選擇或者上傳自己需要的圖示，并下載下傳後，拿到裡面的字型icomoon.ttf。複制到拷貝到assets下的fonts目錄下（main目錄底下）,結合剛剛封裝的IconFontTextView，如下使用：

<com.example.philos.myandroidblogdemo.iconfont.IconFontTextView
    android:id="@+id/icon_vip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:text="@string/icon_font_VIPicon"
    android:textColor="@color/color_F4_93_00"
    android:textSize="16sp"
    android:visibility="gone"/>
//打開icomoon中下載下傳檔案中demo.html，就可以到項目中使用的所有字型圖示的值，可以定義到valus檔案夾底下的fonts.xml(注意\ue中間加u進行轉義)
<string name = "icon_font_blog" translatable="false">\ue999</string>

三、巧妙解決ellipsize的bug

過程中碰到了一個問題，不知道大家是怎麼解決，先看個對比效果

還在為android圖示适配煩惱？字型圖示你值得擁有

上面的代碼展示的是第一行，明顯圖示都不見了。這是由于text太長省略的時候，android:ellipsize直接把imagvew擠壓出了父view的邊界。這個是為什麼呢？可能是google的一個bug，不知道有人知道原因的嗎？可以肯定的是計算的時候先計算了父布局，然後是左側的item_namey，是以優先顯示，然後圖示就被擠出去了。

那麼解決思路也有了，我們隻要先計算圖示就可以。

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/item_name"
                android:text="我是很長的一串字元串，我很長很長，問你怕了沒？"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#FF333333"
                android:textSize="16sp" />

            <ImageView
                android:id="@+id/img_un_auth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:src="@mipmap/ic_launcher_round"
                android:visibility="visible"/>

            <com.example.philos.myandroidblogdemo.iconfont.IconFontTextView
                android:id="@+id/icon_auth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:scaleType="center"
                android:text="@string/icon_font_blog"
                android:textColor="#1695E3"
                android:textSize="16sp"
                android:visibility="visible" />

            <com.example.philos.myandroidblogdemo.iconfont.IconFontTextView
                android:id="@+id/icon_vip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="center"
                android:text="@string/icon_font_camera"
                android:textColor="#FFF49300"
                android:textSize="16sp"
                android:visibility="visible" />
        </LinearLayout>

你是不是也想到了！利用相對布局的 android:layout_toLeftOf=”@+id/ll_icon” ，這樣就是 item_name相對與 ll_icon，于是優先計算的是 ll_icon，這樣就沒有問題了

<RelativeLayout
            android:layout_marginTop="25dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical|left"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/item_name1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/ll_icon"
                android:ellipsize="end"
                android:gravity="left|center_vertical"
                android:singleLine="true"
                android:layout_marginRight="5dp"
                android:text="我還是很長的一串字元串，我很長很長，問你怕了沒？"
                android:textColor="#333333"
                android:textSize="16sp" />

            <LinearLayout
                android:id="@+id/ll_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/img_un_auth1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher_round"
                    android:visibility="visible" />


                <com.example.philos.myandroidblogdemo.iconfont.IconFontTextView
                    android:id="@+id/icon_auth1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:scaleType="center"
                    android:text="@string/icon_font_blog"
                    android:textColor="#1695E3"
                    android:textSize="16sp"
                    android:visibility="visible" />

                <com.example.philos.myandroidblogdemo.iconfont.IconFontTextView
                    android:id="@+id/icon_vip1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:scaleType="center"
                    android:text="@string/icon_font_camera"
                    android:textColor="#FFF49300"
                    android:textSize="16sp"
                    android:visibility="visible" />
            </LinearLayout>

        </RelativeLayout>

參考

ICON-FONT圖示字型的四類制作方法

Android基礎 Android進階 android 字型 iconfont
上一篇: 雲計算之不務正業-廣播工程[捂臉]#品質第一誠信為本
下一篇: 【機率論】随機變量及其分布離散型随機變量随機變量的分布函數連續型随機變量及其機率密度

繼續閱讀