Scalable custom font for your iOS app (in Burmese)

Photo by Mika Baumeister on Unsplash

Prerequisite

• Basic knowledge of Swift
• Storyboard, UIKit in general
• Adding and using custom font

What I’ll cover

• Download resources
• Starter project overview
• Set dynamic font (react to device’s content size category changes)
• Using custom font and support dynamic font scaling
• နိဂုံး

Download resources

ဒီ article အတွက် sample project ကို ဒီ link ကနေ clone လုပ်ပါ။ Initial project setup အတွက် starter branch ကို check out လုပ်ပါ။ Final code ကိုကြည့်ချင်ရင်တော့ final branch ကို check out လုပ်ပါ။

Starter project overview

အပေါ်က link ကနေ starter branch ကို checkout လုပ်ပြီး run ကြည့်ရင် အောက်က screen အတိုင်းမြင်ရပါလိမ့်မယ်။

ViewController ထဲက configureView() ဆိုတဲ့ func မှာ UI နဲ့ပတ်သက်ပြီး ပြင်ထားပါတယ်။ UIKit နဲ့ရေးနေကျဆိုရင် ဘာမှမထူးဆန်းပါဘူး။ Label တစ်ခုချင်းစီအတွက် system font တွေကို အသေရေးပေးထားတာ တွေ့ရပါလိမ့်မယ်။

Xcode ရဲ့ environment override tool ကိုသုံးပြီး ကျွန်တော်တို့ iPhone ရဲ့ content size ကို ကြီးကြည့်ပါမယ်။ iPhone မှာဆိုရင် Settings > Accessibility ကနေ Display & Text Size ကိုဝင်ပြီး Large Text ကို enable လုပ်လို့ရပါတယ်။ Starter branch မှာ dynamic type ကို increase/decrease လုပ်ကြည့်တဲ့အခါ “Order Now” button ရဲ့ font ကလွဲရင် ကျန်တဲ့ UILabel font တွေက reflect မဖြစ်ဘဲ အသေသတ်မှတ်ပေးထားတဲ့ font size အတိုင်းရှိနေတာကို တွေ့ရပါမယ်။

Set dynamic font (react to device’s content size category changes)

ဒီတော့ကာ ခုနကလို device ရဲ့ content size ကို ပြောင်းတဲ့အခါ ကိုယ့် app ရဲ့ font size က လိုက်ပြီး adjust လုပ်ပေးနိုင်ဖို့ Apple က UIFont.TextStyle ဆိုတဲ့ API ကို ပြင်ပေးထားပါတယ်။

Human Interface Design ရဲ့ typography section ကိုသွားကြည့်မယ်ဆိုရင် iOS app တွေသုံးဖို့ font style တွေနဲ့ သူတို့ရဲ့ device category တွေကို သေသေချာချာ define လုပ်ပေးထားပါတယ်။ ကျွန်တော်တို့ အသေရေးထားတဲ့ font size တွေကို dynamic type size တွေအဖြစ် ပြောင်းလိုက်ပါမယ်။

preferredFont() ဆိုတဲ့ func ကိုသုံးပြီး သက်ဆိုင်ရာ text style တွေကို ထည်ပေးလိုက်ပါတယ်။ ဒါပေမယ့် ဒါတစ်ခုတည်းနဲ့မရပါဘူး။ UIFont တွေကို content size category changes အပေါ်မူတည်ပြီး adjust လုပ်ပေးဖို့အတွက် “adjustsFontForContentSizeCategory” ဆိုတဲ့ property ကို true လုပ်ပေးရပါဉီးမယ်။ ပြီးရင်တော့ Xcode ရဲ့ environment override tool ကိုသုံးပြီး content size ကိုပြောင်းကြည့်ပါ။

ဒီတစ်ခါ ကျွန်တော်တို့တို့ရဲ့ app က device ရဲ့ content size အပေါ်မူတည်ပြီး font size တွေကို adjust လုပ်ပေးနိုင်သွားပါပြီ။

Using custom font and support dynamic font scaling

ကျွန်တော်တို့ရဲ့ app တော်တော်များများမှာ သူ့ကိုယ်ပိုင် font တွေရှိပါတယ်။ အမြဲတမ်း Apple ရဲ့ SF font တစ်မျိုးတည်းကိုပဲသုံးတာမဟုတ်ပါဘူး။ ဒီလိုဆိုရင် ကျွန်တော်တို့ app တွေရဲ့ custom font ကိုရော ခုနကလို dynamic font scaling လုပ်လို့မရဘူးလားဆိုတာ မေးစရာရှိပါတယ်။ အဖြေကတော့ ရအောင်လုပ်တတ်ရင် ရပါတယ်။ သီအိုရီတွေထိုင်ရွတ်ပြရင် နားလည်ဖို့ခက်လို့ code အရင်ပြပြီး ရှင်းပြပါ့မယ်။

CustomFontSupport ဆိုတဲ့ file အသစ်တစ်ခုယူလိုက်ပါတယ်။ ပြီးရင် ကျွန်တော်တို့ရဲ့ custom font နဲ့ UIFont.TextStyle ကို dictionary အနေနဲ့ store လုပ်လိုက်ပါတယ်။

1. UIFont ထဲမှာ playfairFont(forTextStyle:) ဆိုတဲ့ extension func တစ်ခုရေးလိုက်ပါတယ်။ ဒီ func ကနေ UIFont instance တစ်ခုကို ပြန်ပေးမှာဖြစ်ပါတယ်။
2. ကျွန်တော်တို့ရဲ့ func ထဲကို pass လုပ်ပေးလိုက်တဲ့ text style အပေါ်မူတည်ပြီး အပေါ်က dictionary ထဲကနေ သက်ဆိုင်ရာ font ကို ဆွဲထုတ်ပါတယ်။
3. ကျွန်တော်တို့ကို pass လုပ်ပေးလိုက်တဲ့ text style အတွက် UIFontMetrics instance တစ်ခု ဆောက်ပေးလိုက်ပါတယ်။
4. ပြီးရင်တော့ ခုနကဆောက်ထားတဲ့ metics အပေါ်မူတည်ပြီး ကျွန်တော်တို့ရဲ့ custom font ကို ပြန် scale လုပ်ပါတယ်။ UIFontMetrics အလုပ်လုပ်တဲ့ပုံစံက text style အပေါ်မူတည်ပြီး ကျွန်တော်တို့ရဲ့ custom font family နဲ့ size ကိုပြန် scale လုပ်တာပါ။ ကျွန်တော်တို့က step 2 မှာ dictonary ထဲကနေ text style အပေါ်မူတည်ပြီး size သတ်မှတ်ပြီးသား UIFont ကို ပြန် map လုပ်ထားတဲ့အတွက် scale font က default text size ကို အလိုလိုရရှိပြီးဖြစ်မှာပါ။ တစ်ကယ်လို့ device content size ကို အတိုးအလျှော့လုပ်မှသာ ပြန်ပြီး scale ကို တွက်ပေးမှာဖြစ်ပါတယ်။
5. နောက်ဆုံးမှာတော့ ကျွန်တော်တို့ scale လုပ်ထားပြီးဖြစ်တဲ့ font ကို ပြန်ပေးလိုက်ပါတယ်။

ပြီးရင်တော့ အပေါ်က code အတိုင်း ပြန်ခေါ်သုံးလိုက်ရင် ရပါပြီ။

အခုဆိုရင် ကျွန်တော်တို့ app က custom font နဲ့ iPhone ရဲ့ device font size အပေါ်မူတည်ပြီး font size ကို adjust လိုက်လုပ်ပေးနိုင်သွားပါပြီ။

နိဂုံး

Accessibility ဆိုတာ အင်မတန်အရေးကြီးတဲ့အချက်တစ်ချက်ဖြစ်ပြီး ကျွန်တော်တို့ developer အများစုကတော့ ဒီအချက်ကို မေ့လျှော့နေတတ်ကြပါတယ်။ Developer ကောင်းတစ်ယောက်ဟာ ကိုယ့်ရဲ့ app ကို ဘယ်လိုအသက်အရွယ် ဘယ်လို user မျိုးမဆိုသုံးနိုင်ဖို့အတွက် accessibility metrics တွေကို သိရှိနားလည်ပြီး အမြဲ support လုပ်ပေးရမှာဖြစ်ပါတယ်။ ဒီကနေ့ Xcode ရဲ့ tooling ကြောင့် accessibilty နဲ့ပတ်သက်ပြီး simulator နဲ့တင် လွယ်လွယ်ကူကူ test လုပ်လို့ရပါပြီ။ ကျွန်တော်တို့ app ရဲ့ text တွေဟာ app ရဲ့ 80% to 90% ကို နေရာယူထားပါတယ်။ တစ်ကယ်လို့ ကျွန်တော်တို့ရဲ့ app user က senior citizen တစ်ယောက်ဖြစ်ပြီး စာသေးသေးလေးတွေကို မဖတ်နိုင်လို့ သူ့ဖုန်းမှာ text size ကို large လုပ်ထားတယ်ဆိုရင် ကျွန်တော်တို့ရဲ့ app ကလည်း သူ့ရဲ့ preference ကို အလေးထားပေးတယ်ဆိုရင် သူ့အတွက် ပိုအဆင်ပြေမှာပါ။ နောက်လည်း အလျှင်းသင့်ရင်သင့်သလို accessibility နဲ့ပတ်သက်တဲ့အကြောင်းအရာတွေကို မျှဝေသွဦးပါဉီးမယ်။ အများစုက UI လှဖို့ animaiton တွေဘယ်လိုလုပ်ရမယ်ဆိုတာလောက်ကိုပဲသိချင်ကြပြီး accessibility နဲ့ပတ်သက်ပြီး ကျယ်ကျယ်ပြန့်ပြန့် ဆွေးနွေးပြောဆိုတာ မရှိသေးဘူးလို့ယူဆမိလို့ပါ။