Thai (ภาษาไทย) translation by Natavit Rojcharoenpreeda (you can also view the original English article)
Introduction
ในงาน Google I/O 2015 ที่ผ่านมา Google ได้เปิดตัว Design Support Library สำหรับเหล่านักพัฒนาแอนดรอยด์ Library นี้จะช่วยทำให้การออกแบบแอพพลิเคชันของเราให้เป็นแบบ Material Design ได้ง่ายยิ่งขึ้น และเพื่อให้มันใช้งานได้ง่ายขึ้น Design Support Library นี้สามารถใช้ได้ตั้งแต่ API 7 กันเลยทีเดียว โดยสามารถ import ผ่านทาง Gradle ได้เลย
compile 'com.android.support:design:22.2.0'
1. Visual Components
สำหรับเครื่องมือหลักๆใน Design Support Library นี้ก็จะมีอยู่ 2 อย่าง คือ
- visual components
- motion components
มาดูกันดีกว่าว่ามีอะไรใหม่ใน New visual components ที่จะช่วยในเรื่องของแสงเงา ให้ดูมีมิติยิ่งขึ้น
Material Text Input
EditText
นั้นมีติดมากับ Android ตั้งแต่พึ่งเริ่มต้นเลย แล้วมันก็ใช้งานแบบง่ายๆ (simple to use) เลยไม่ได้มีอะไรเปลี่ยนแปลงไปมาก แต่ใน Design Support Library นี้ Google ก็ได้มีการนำเสนอ container view ตัวใหม่ ในชื่อว่า TextInputLayout
ใน view ตัวใหม่นี้ก็ได้เพิ่มฟังก์ชันใหม่ๆเสริมเข้าไปจาก EditText
เช่นทำให้ support พวก error messages, มีลูกเล่นการแนะนำคำต่างๆนิดหน่อย
อย่างที่เห็นในส่วนของ Code ด้านล่าง TextInputLayout
นั้นสามารถ ใช้เป็น wrapper ของ EditText
ได้เลย
<android.support.design.widget.TextInputLayout android:id="@+id/textinput" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="What is your name?" /> </android.support.design.widget.TextInputLayout>
Gianluca Segato จะมาลงลึกเกี่ยวกับส่วนประกอบของ TextInputLayout ในอีก tutorial เร็วๆนี้
Floating Action Buttons
สิ่งที่แบบว่าขาดไม่ได้เลย ถ้าพูดถึง Material Design ก็ต้องเจ้านี่แหละ Floating action button เพราะตั้งแต่เปิดตัวมา ก็มีนักพัฒนาหลายๆคนพยายามพัฒนาในรูปแบบ 3rd party libraries เพื่อให้เหมือนกับของ Google มาให้ใช้กันเยอะแยะเลย
และการมาในครั้งนี้ของ Design Support Library เราก็จะสามารถสร้าง floating action button ได้ง่ายๆด้วยการพิมเพียงไม่กี่บรรทัดเท่านั้น รวมทั้งสามารถปรับแต่งสีไอคอนได้อย่างงายดาย และก็มีให้เลือกอยู่ 2 ขนาดก็คือ standard (56dp) และ mini (40dp) ข้อดีหลักๆของมันแน่ๆเลยก็คือเจ้าปุ่มเนี่ยจะถูกพัฒนาเรื่อยๆจาก Google โดยตรงเลย
<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@drawable/ic_fab" />
Navigation Components
ในขณะที่ ViewPager กับ DrawerLayout ได้เปิดตัวมาซักพักแล้วใน v4 support library ทาง Google ก็ได้พัฒนามันเพิ่มเติม โดยให้สามาถใช้ได้กับ widgets ตัวใหม่อีก 2 อัน อันแรกก็คือ ViewPagerIndicator library by Jake Wharton หรือเรียกว่า TabLayout
ส่วนอันที่ 2 ก็คือ NavigationView
ที่ทำให้เราสามารถปรับในส่วนของ Header views ได้
TabLayout
TabLayout
สามารถเพิ่ม content ต่างๆเข้าไปได้แบบง่ายๆเลยผ่าน addTab
methods และด้านล่างนี้ก็คือตัวอย่าง
tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
แล้วก็ TabLayout
ก็สามารถนำมาประยุกต์ใช้กับ ViewPager
ก็ได้นะ สามารถทำได้โดยการใช้ setupWithViewPager()
โดยการ passing ลงไปใน ViewPager
ลงใน arg แรก และนี่ก็คืออีกหนึ่งวิธีสำหรับ ViewPager
แล้วก็อย่าลืมว่าต้อง override getPageTitle() ทุกครั้งเวลาใช้ TabLayout ด้วยกันกับ ViewPager เพื่อจะได้กำหนดชื่อของแต่ละ tab ได้
Navigation View
NavigationView
ก็เป็นอีก widget นึงที่ดึงเอาความสามารถของ DrawerLayout
มา ซึ่งมันทำให้เหล่า Devlopers สามารถปรับแต่ง เพิ่ม header อะไรต่างๆใน drawer ได้ง่ายยิ่งขึ้น
หรือพูดง่ายๆว่า มันช่วยให้สร้างเป็น section หรือ subsection (เมนูย่อยๆ) ได้ง่ายกว่าเดิม ก่อนที่จะเริ่มใช้ NavigationView
ก็ต้องเริ่มที่ DrawerLayout
ใน XML กันก่อน
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_height="match_parent" android:layout_width="match_parent" android:fitsSystemWindows="true"> <include layout="@layout/content"/> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_height="match_parent" android:layout_width="wrap_content" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header" app:menu="@menu/drawer_view"/> </android.support.v4.widget.DrawerLayout>

Enhanced Toasts
เราคงเห็นหน้าตาข้อความแบบ Toast
ใน Android มาซักพักแล้ว ทีนี้ก็เลยมีการสร้างตัวใหม่ขึ้นมาชื่อว่า Snackbar
มีความสามารถเหมือนกันเลย แต่ว่าหน้าตามันดูดีขึ้นกว่าเดิมนะ แถม Snackbar
เนี่ย นอกจากแสดงข้อความในระยะเวลาสั้นๆแล้ว มันยังสามารถใส่ action นิดๆหน่อยๆได้อีก เช่น สไลด์หรือปัดมันทิ้งเวลาไม่สนใจอะไรแบบนี้
Snackbar ก็สามารถเรียกใช้งานได้คล้ายๆกับ Toast เลย แล้วก็เนื่องจากมันเหมือนเป็น pop-up ขึ้นมาด้านล่าง ดังนั้นเราจำเป็นต้องมี view ที่สร้างไว้ในตำแหน่งด้านล่างไว้ให้มันด้วย
Snackbar.make( view, "Action", Snackbar.LENGTH_LONG ) .setAction("Action!", new View.OnClickListener() { @Override public void onClick(View v) { Log.e("App", "Action!"); } } ) .show();
2. Motion Components
วิธีการใช้งานของ User และพวกการเคลื่อนไหวต่างๆก็ถือเป็นสิ่งที่สำคัญมากอย่างหนึ่งใน Material Design เหมือนกัน และเพื่อทำให้มันใช้งานได้ง่าย Google ก็ได้ปล่อยหลายๆตัวอย่างให้ได้ลองดู หรือช่วยในการใช้งานทั่วๆไป Kerry Perez-Huanca จะไปลงลึกในรายละเอียดเกี่ยวกับมันในอีก tutorial เร็วๆนี้
Reactive Views
และในตัวอย่างที่ผ่านมา หลายๆคนอาจจะสังเกตุเห็นว่า FloatingActionButton
จะเลื่อนขึ้นเวลา Snackbar
แสดงผลขึ้นมา มันสามารถทำได้โดยใช้ CoordinatorLayout ซึ่งจะใช้มันคลุม view ที่จะถูกขยับเพื่อสร้างพื้นที่ให้กับอีก view
Improved Quick Return and Toolbars
มีหลายๆคนได้ถามเข้ามาว่าวิธีในการแสดงรูปแบบ parallax ตามที่ user เลื่อนขึ้นเลื่อนลง แบบง่ายๆต้องทำยังไง หรือถ้าคิดไม่ออกก็ลองไปดูตัวอย่างใน Play Store ก็ได้ และเพื่อลดปัญหาการเขียน Code ซ้ำซาก Google ก็ได้ปล่อย CollapsingToolBarLayout
และ AppBarLayout
ออกมา ทำให้เราสามารถควบคุม View ต่างๆให้มันโชว์ตอนกำลัง scroll หรืออะไรต่างๆได้ง่ายยิ่งขึ้น
Conclusion
หลังจากการรอมานาน Design Support Library ก็ได้มาทำหน้าที่เป็นเครื่องมือที่หลายๆคนรอคอยมานาน และพอมาใช้ร่วมกับ AppCompat library ก็จะทำให้แอพเราเป็น Material Design ได้ง่ายยิ่งขึ้น และยังสามารถใช้กับเวอร์ชันเก่าๆได้อีกด้วย
ตัวอย่างวิธีการทำงานต่างๆ สามารถเข้าไปดูเพิ่มเติมได้ที่ Google's Official reference app, CheeseSquare และ Tuts+
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post