มาดู Android Design Support Library คร่าวๆกันเถอะ!

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>

Navigation drawer with a simple header image and text

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+