ตั้งแต่ Google ได้เปิดตัว Android 5.0 Lollipop และ Material Design ออกมา จะเห็นว่า App ของ Google ส่วนใหญ่ จะใช้ Hamburger icon (ไอค่อนรูปขีด 3 ขีด) และมีการทำ Animation กับ Icon บน Action Bar เมื่อมีการลาก Navigation Drawer ออกมาจากด้านข้าง
ซึ่งก็มี Developer ทำ Library ออกมาให้ใช้งานกันมากมาย ไม่ว่าจะเป็น LDrawer, DrawerArrowDrawable หรือ Material Menu แต่ว่า… ใน Support Library ของ Google เอง ก็มีให้ใช้งานอยู่แล้ว
เรามาดูกันว่า จะทำ Animation แบบนี้ ด้วย Support Library ได้อย่างไร…
สำหรับใครที่นึกไม่ออกว่า Animation เป็นแบบไหน ดูรูปตัวอย่างนี้ครับ
รูปจาก https://github.com/ChrisRenke/DrawerArrowDrawable
บทความนี้จะใช้ Android Studio 1.1 Stable แต่ได้ทดสอบกับ Android Studio 1.2 Preview 3 แล้ว ให้ผลเหมือนกัน
List of contents
- Create new project with Navigation Drawer Activity
- Update ActionBarDrawerToggle Class
- ActionBarDrawerToggle with Toolbar
Create new project with Navigation Drawer Activity
ก่อนอื่นก็… สร้าง Project ใหม่บน Android Studio…
เลือก Minimum SDK เป็น API 14 (หรือ API ที่ต่ำกว่า 21) เพื่อให้ Project ที่สร้าง เรียกใช้งาน Support AppCompat v7 ด้วย
แล้วเลือก Navigation Drawer Activity
กำหนดชื่อต่าง ๆ ให้เรียบร้อย
รอสักครู่ ให้ Android Studio ทำการสร้าง Project และรอ Sync Gradle ให้เรียบร้อย สังเกตุที่ build.gradle ของ Module app ว่ามีการใช้งาน Dependencies Support AppCompat v7 แล้วหรือยัง
|
1 2 3 4 |
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.0.0' } |
เรียบร้อยแล้ว รันเลยคร๊าบบบบบบ รันเลยยยยยยย…
รูปด้านล่าง ผมทดสอบบน Android 5.0 และ 4.3 สำหรับ Version ก่อน 5.0 นั้น สามารถแสดงผล Action Bar แบบ Material ได้เพราะใช้ Theme Material จาก Support AppCompat v7 นั่นเอง แต่จะแสดงผล Hamburger icon ต่างกันเล็กน้อยตอนลาก Navigation Drawer ออกมา Icon จะเลื่อนตำแหน่งไปทางซ้ายนิดนึง แบบเดียวกับที่ใช้บน Theme Holo
จะเห็นว่า ได้ Hamburger icon มาแล้วววววววว… จบ…………….
เฮ้ย~!! เด๋วนะ.. อย่าเพิ่งด่าพ๊มมมม มีต่อ ๆๆๆๆ
จะเห็นว่า Hamburger icon นั้น มันดูสั้น ๆ แล้วเวลาลาก Navigation Drawer ออกมา (หรือแตะที่ Icon) ก็ไม่เห็นจะมี Animation อะไรเลย…
ก็เพราะว่า Template ที่ Android Studio ที่สร้างมาให้นั้น ยังใช้ Class ActionBarDrawerToggle จาก Support Library v4 อยู่ ซึ่ง Deprecated ไปแล้ว
ที่มี Support Library v4 มาให้ เพราะ Support AppCompat v7 ใช้งานมันอยู่ด้วย Gradle มันก็ดูดมาให้ด้วย สบ๊ายยยยย Eclipse+ADT ทำอะไรแบบนี้ไม่ได้นะ
ตรงนี้ผมแอบผิดหวังเล็กน้อย เห็นจุดนี้มาตั้งแต่ก่อน Android Studio 1.0 ออก และคิดว่าจะแก้ไขให้ใน Version ต่อ ๆ ไป จนถึงตอนนี้ Android Studio 1.2 Preview 3 แล้ว ก็ยังไม่แก้ไข
ถ้าลองไปส่องดูใน Android Developer Reference ในส่วนของ ActionBarDrawerToggle จาก Support Library v4 นั้น แจ้งไว้เช่นกันว่า Deprecated แล้วเช่นกัน แต่มีคำแนะนำให้เปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 แทน
Update ActionBarDrawerToggle Class
สำหรับการเปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 ให้เปิดไฟล์ NavigationDrawerFragment.java ขึ้นมา แล้วเปลี่ยนตรง Import จาก v4 เป็น v7 ดังนี้
|
1 2 |
//import android.support.v4.app.ActionBarDrawerToggle; import android.support.v7.app.ActionBarDrawerToggle; |
เมื่อเปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 แล้ว จะพบ Error ดังรูปด้านล่าง ฟ้องว่า Parameter ตัวที่ 3 ไม่ถูกต้อง เนื่องจาก Parameter ตัวที่ 3 ต้องการ Toolbar แต่ของเดิมเป็น Resource ID ของ Drawable รูป
แต่ Constructor ของ ActionBarDrawerToggle นั้น มีให้ใช้งาน 2 Overloads กรณีไม่ได้ใช้ Toolbar สามารถใช้ Overload แรกได้ ก็จะเหลือ Parameter ที่ต้องใส่แค่ 4 ตัว
|
1 2 3 4 5 6 7 |
mDrawerToggle = new ActionBarDrawerToggle( getActivity(), /* host Activity */ mDrawerLayout, /* DrawerLayout object */ // R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */ R.string.navigation_drawer_open, /* "open drawer" description for accessibility */ R.string.navigation_drawer_close /* "close drawer" description for accessibility */ ); |
และในเมื่อ ic_drawer ไม่ใช้งานแล้ว จะรออะไรล่ะ ลบทิ้งโลดดดดดด…
เสร็จแล้วววววววว รันดูเลยยยยยย
จะเห็นว่า ทั้งบน Android 5.0 และ 4.3 สามารถแสดง Animation ที่ Hamburger icon ได้แล้วววว และแสดงผลเหมือนกันเป๊ะ ๆ เลย
ActionBarDrawerToggle with Toolbar
สำหรับการใช้งานกับ Toolbar นั้น จะเห็นในหัวข้อที่แล้วว่า ใน Constructor ของ ActionBarDrawerToggle นั้น มีอีก Overload นึง ที่สามารถกำหนด Toolbar ได้
บทความนี้ไม่สอนสร้าง Toolbar นะ ใครยังไม่รู้จัก Toolbar แนะนำให้อ่าน Blog ของ Layer NET ตอน มาทำความรู้จักกับ Android Toolbar ก่อนนะครับ
ก็เพียงแค่ประกาศตัวแปร Toolbar แล้วทำการอ้างอิงไปยัง Toolbar Widget ที่อยู่ใน Layout ของเรา ดังนี้
|
1 |
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); |
แล้วไปกำหนดให้กับ ActionBarDrawerToggle ดังนี้
|
1 2 3 4 5 6 7 |
mDrawerToggle = new ActionBarDrawerToggle( getActivity(), /* host Activity */ mDrawerLayout, /* DrawerLayout object */ mToolbar, /* Toolbar */ R.string.navigation_drawer_open, /* "open drawer" description for accessibility */ R.string.navigation_drawer_close /* "close drawer" description for accessibility */ ); |
เสร็จแล้วววววววววว ง่ายใช่ไม๊ล่ะครับ~!!
สำหรับบทความนี้ สามารถไปดู Source Code ได้ที่ GitHub นะครับ
Permalink