← Back to Blog

透過SharedPreferences管理全部頁面的字體大小

2021-10-18·AndroidAndroid App DevelopmentSharedpreferencesApp DevelopmentAndroidDev

Style Theme

#前言

當今天UI和你說:"我就是想要所有海報字體白色陰影在APP上!還要有3個不同字型 普通/大/特大!" 這時,如果請UI直接出圖會容易跑版,那該怎麼辦呢? (謎之音:只能去擋需求了)

只能說神人藏在民間/網路上的鄉民。神人左思右想,最後想到個妙招解法:透過SharedPreferences管理全部頁面的字體大小。看是邪魔歪道,實則作法正統 令人驚艷,不禁拍手喊道:"長知識啦~"!

題外話,大神的GitHub可以follow看看:jasonChen0604 - Overview(github.com)

到底是什麼神奇妙招?!讓我們開始吧~

#如何透過SharedPreferences管理全部頁面的字體大小?

Step1. 先在attr宣告ㄧ個變數

這裡取名"_20"表示原本大小為20sp的字,路徑:Res/values/attrs.xml

<resources>
    <declare-styleable name="FontSize">
        <attr name="_14" format="dimension"/>
        <attr name="_16" format="dimension"/>
        <attr name="_18" format="dimension"/>
        <attr name="_20" format="dimension"/>
        <attr name="_24" format="dimension"/>
        <attr name="_28" format="dimension"/>
        <attr name="_32" format="dimension"/>
        <attr name="_56" format="dimension"/>
    </declare-styleable>
</resources>

Step2. Style設定3個themes給定不同大小

在styles.xml給定3 themes 普通 Normal /大 Big /特大字型 Very Big

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="FontSize.Normal" parent="Theme.APPName">
        <item name="_14">14sp</item>
        <item name="_16">16sp</item>
        <item name="_18">18sp</item>
        <item name="_20">20sp</item>
        <item name="_24">24sp</item>
        <item name="_28">28sp</item>
        <item name="_32">32sp</item>
        <item name="_56">56sp</item>
    </style>
    <style name="FontSize.Big" parent="Theme.APPName">
        <item name="_14">16sp</item>
        <item name="_16">18sp</item>
        <item name="_18">20sp</item>
        <item name="_20">22sp</item>
        <item name="_24">26sp</item>
        <item name="_28">30sp</item>
        <item name="_32">34sp</item>
        <item name="_56">58sp</item>
    </style>
    <style name="FontSize.VeryBig" parent="Theme.APPName">
        <item name="_14">18sp</item>
        <item name="_16">20sp</item>
        <item name="_18">22sp</item>
        <item name="_20">24sp</item>
        <item name="_24">28sp</item>
        <item name="_28">32sp</item>
        <item name="_32">36sp</item>
        <item name="_56">60sp</item>
    </style>
</resources>

Step3. 接著xml可以直接取"?_20"這個變數

將textSize帶入"?_20"

<TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textSize="?_20" />

Step4. 最後把每ㄧ頁的20sp都變成"?_20"就可以了

可以寫個 Function 給定字型大小的 Theme 範例寫於BaseActivity ,Function: setFontSize()

public void setFontSize(){
        String font_size = Pref.getStringValue(this, Constant.PREF_FONT_SIZE,"normal");
        switch (font_size){
            case "big":
                setTheme(R.style.FontSize_Big);
                break;
            case "very_big":
                setTheme(R.style.FontSize_VeryBig);
                break;
            default:
                setTheme(R.style.FontSize_Normal);
                break;
        }
    }

範例 BaseActivity 在 onCreate() 加上setFontSize();

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setFontSize();
    }

完整範例:

public class BaseActivity extends AppCompatActivity {
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//hide title bar
        Objects.requireNonNull(getSupportActionBar()).hide();
        setFontSize();
    }
    public void setFontSize(){
        String font_size = Pref.getStringValue(this, Constant.PREF_FONT_SIZE,"normal");
        switch (font_size){
            case "big":
                setTheme(R.style.FontSize_Big);
                break;
            case "very_big":
                setTheme(R.style.FontSize_VeryBig);
                break;
            default:
                setTheme(R.style.FontSize_Normal);
                break;
        }
    }
}

#Next Steps?

如果這篇文章對你有幫助,可以幫忙分享給更多人知道,也可在下方留言。

另外如果你喜歡~可以ㄧ起來為這篇文拍個10下手 : ) 你的喜歡會是我們寫作的動力。

Read on Medium →

← Back to BlogNext: Regression Testing 回歸測試是什麼?