Saturday, September 10, 2016

Material Design (1)

Meterial design ဆိုတာကေတာ့ Android application ေတြ၊ Web page ေတြ ဖန္တီးတဲ့ အခါမွာ အသံုးျပဳတဲ့ ဒီဇိုင္း ပံုစံ ျဖစ္ပါတယ္။ ဒီ design ကို သံုးတဲ့ အခါမွာ လိုက္နာသင့္တဲ့ အခ်က္ေတြကို Google က လမ္းၫႊန္ခ်က္ Guideline ေတြ ခ်မွတ္ေပးထားပါတယ္။ ေအာက္က Link မွာ နမူနာ ၾကည့္ႏိုင္ပါတယ္။

https://material.google.com/

https://developer.android.com/training/material/theme.html#fig3

သေဘာတရား အက်ဥ္းခ်ဳပ္
==================

၁။ အသံုးျပဳတဲ့ View ေတြ၊  component ေတြဟာ 3D ျဖစ္ရမယ္။ ေအာက္ခံေပၚမွာ အရိပ္ကေလး က်ေနရမယ္။

၂။ အစိုင္အခဲပံုစံ solid ျဖစ္ရမယ္။ တခုနဲ႔ တခု ထိုးေဖာက္ မသြားရဘူး။

၃။ ေဖာ္ႏိုင္၊ ေဖ်ာက္ႏိုင္ရမယ္။

၄။ ဘယ္ညာ ထက္ေအာက္ ေရြးလ်ားမႈကို ျပဳလုပ္ႏိုင္ရမယ္။

၅။ အရြယ္အစား ႀကီးလာတာ၊ ေသးသြားတာမ်ိဳး လုပ္ႏိုင္ရမယ္။

Google က ဒီ component ေတြရဲ့ အေရာင္ေတြက ဘယ္လိုအေရာင္ေတြ ျဖစ္သင့္တယ္၊ icon ေတြရဲ့ အ႐ြယ္အစားက ဘယ္လို ျဖစ္သင့္တယ္၊ margin ေတြက ဘယ္ေလာက္ ျဖစ္သင့္တယ္၊ တခုနဲ႔ တခု အကြာအေ၀း ဘယ္ေလာက္ ျဖစ္သင့္တယ္၊ အေပၚကို ၾကြေနတဲ့ အရိပ္ အေနအထားက ဘယ္လို ျဖစ္သင့္တယ္၊ Application ရဲ့ theme ေတြက ဘယ္လို ျဖစ္သင့္တယ္၊ စာလံုးေတြရဲ့ အ႐ြယ္အစားနဲ႔ အေရာင္ေတြက ဘယ္လို ျဖစ္သင့္တယ္၊ animation ေတြက ဘယ္လို ပံုစံ ျဖစ္သင့္တယ္  စသည္ျဖင့္ အေသးစိတ္ လမ္းၫႊန္ခ်က္ေတြကို ေဖာ္ျပေပးထားပါတယ္။

Android programmer က ဒီအခ်က္ေတြကို အတိအက် လိုက္နာၿပီး ဒီဇိုင္း ေရးဆြဲသြားမယ္ ဆိုရင္ လွပၿပီး ဆြဲေဆာင္မႈ  ရွိတဲ့ application ေတြကို ဖန္တီးႏိုင္မွာ ျဖစ္ပါတယ္။

ဒီလို ဒီဇိုင္း သတ္မွတ္ခ်က္ေတြကို Android 5.0 (Lollipop) မွာ စတင္ ထည့္သြင္းေပးခဲ့ပါတယ္။ Programmer က Layout ေတြ၊ View ေတြ၊ Animation ေတြ ထည့္သြင္းလိုက္တဲ့အခါ Android SDK က ဒီသတ္မွတ္ခ်က္ေတြ အတိုင္း Material design နဲ႔ အလိုအေလ်ာက္ ပံုေဖာ္ ေပးသြားပါတယ္။

Android 5.0 မတိုုင္မီ SDK ကို အသံုးျပဳသူေတြအတြက္ Material design ကို ထည့္သြင္း အသံုးျပဳႏိုင္ဖို႔အတြက္ Backward compatible ျဖစ္ႏိုင္ဖို႔အတြက္လဲ android.support.design ဆိုတဲ့ Library ကိုဖန္တီး ျဖန္႔ေ၀ေပးခဲ့ပါတယ္။

အခု Tutorial series ကေတာ့ Android 5.0  ထက္ နိမ့္တဲ့ android devive အသံုးျပဳေနသူေတြ အတြက္ပါ Matetial design ပံုစံ ေပၚေစဖို႔အတြက္ android.support.design library ကိုသံုးၿပီး AIDE ေပၚမွာ ေရးသားဖန္တီးနည္းေတြကို ျပေပးသြားမွာ ျဖစ္ပါတယ္။

Material design ရဲ့ သိသာလြယ္တဲ့ ပံုစံမ်ား
==========

1. Activity ထိပ္က Toolbar
2. Toolbar ဘယ္ဘက္စြန္း က Home button
3. ထူးျခားတဲ့ Theme အေရာင္ေတြ
4. Text ေတြရဲ့ အရြယ္အစား နဲ႔ အေရာင္
5. Navigation drawer
6. Ripple button
7. ထူးျခားတဲ့ CheckBox
8. Floating Action Button
9. Swipe refresh
10. SnackBar
11. ထူးျခားတဲ့ Progress bar/circle
12. ထူးျခားတဲ့ Dialog box ပံုစံ
13. RecyclerView
14. CardView
15. Switches

အမ်ားႀကီးရွိပါေသးတယ္။









No comments:

Post a Comment