มาทำความรู้จักกับ Android Toolbar

Android Toolbar หรือ Toolbar Widget

toolbar

 

Toolbar มันก็คือ GroupView ที่เหมือนกับ ActionBar เราสามารถนำ Toolbar มาวางไว้แทนที่ ActionBar ได้เลยหรือจะนำไปวางไว้ที่อื่นๆใน layout ก็ได้ โดยมันจะมีความยืดหยุดกว่า เราสามรถเปลี่ยนแปลง ขนาด สี และตำแหน่งของมันได้
Toolbar widget มันจะมาพร้อมกับ support v7 (android.support.v7.widget.Toolbar) ครับ  ถ้าใช้ Android Studio (Gradle) ก็ เข้าไปที่ dependency ได้เลยครับ แล้วก็ไปเพิ่ม compile ครับ


ถ้าท่านใดไม่ทราบว่า dependency อยู่ตรงไหน ให้มองหา ภายใน module app ของเรา มันก็จะอยู่ตรง build.gradle นั่นละฮะ ท่านผู้ชม
dependencies

Toolbar ตามที่ Document ของ Android dev เค้าก็ได้ อธิบายมาว่า จะใช้ ควบคู่กับ Action Bar เลยก็ได้ โดยการ Inflate menu เดิมที่เรามีอยู่แล้ว ให้เข้าไปใช้ร่วมกับ Toolbar ได้ และอีกอย่างที่ผมชอบก็คือ ActionBarDrawerToggle ที่มี Animation เพิ่มเติมเข้ามา ( ตามภาพ )
ActionBarDrawerToggle
และอีกแบบที่เค้าบอกมาก็คือ ใช้แบบ ไม่ร่วมกับ Action Bar ก็ได้ครับ แบบหลังนี้จะปรับแต่งได้มากกว่า

update
ตอนนี้ android ได้ออก Android Design Support Library มาแล้ว ซึ่งมีส่วนของ AppBarLayout เพิ่มขั้นมา สำหรับใช้ครอบ Toolbar แนะนำให้ไปอ่านที่
http://inthecheesefactory.com/blog/android-design-support-library-codelab/th

เริ่มสร้างกันเลยดีกว่า

ตัวอย่างที่ 1
Toolbar ที่ใช้ร่วมกับ Action Bar

อันดับแรก ก็สร้าง layout ที่ชื่อว่า toolbar.xml นะครับ ให้ใส่เข้าไปแบบนี้ครับ

ในส่วนนี้นะครับ ผมก็ขอ กำหนดค่าเป็นแบบมาตรฐานละกันนะครับ ความกว้าง, สูง, พื้นหลัง ฯลฯ ท่านสามารถปรับแต่งได้ตามใจชอบเลยครับ เพราะว่า Toolbar มันก็คือ ViewGroup ตัวนึงดีๆนี่เองครับ.

ต่อมาก็ไปที่ Activity หรือ Fragment ของท่านเพื่อทำการ ประกาศ และ เรียกใช้ได้เลยครับ

เท่านี้ Toolbar ของท่าน ก็จะรวมกับ Action Bar แล้วครับ นั่นหมายถึง ท่าน สามารถ ใช้ Callbacks ของ standard options menu ได้ตามปกติเลยครับ

อันดับที่ 3 ก็เข้าไป แก้ไขในส่วนของ Styles.xml ครับ

ให้เพิ่ม windowActionBar แล้วกำหนดค่าเป็น false นะครับ เท่านี้ก็เรียบร้อยแล้วครับ

nor toolbar

ตัวอย่างที่ 2
Toolbar ที่ไม่ใช้ร่วมกับ Action Bar

ที่ Layout.xml ให้พิมเหมือน ตัวอย่างที่ 1 เลยครับ แต่สิ่งที่จะต่างออกไปคือในส่วนของ Activity หรือ Fragment ภายใน onCreate ครับ

toolbar non acbar

 

แต่ถ้าหาก ท่าน อยากจะ มีหลายๆ toolbar เหมือนภาพประกอบ ด้านบนสุด ก็ เขียนแบบนี้ก็ได้ครับ

toolbar tow

 

เรียบร้อยแล้วครับ สำหรับ Toolbar มันไม่ยากเลยชิอะ ^___^

*สรุป ความแตกต่างระหว่าง Action Bar กับ Toolbar ถ้ามองด้วยตาเปล่า (Toolbar แบบไม่ custom)

ในแง่ของ user มันแยกด้วยตาเปล่าไม่ออกเลยครับ ว่าอะไรเป็นตัวไหน

ในแง่ของ dev มันทำมาเพื่อทะลายข้อจำกัดของ Action Bar ครับ

 

บทความเกี่ยวข้องที่น่าสนใจเรื่อง ทำ Hamburger Icon Animation บน Action Bar กับ Navigation Drawer ง่าย ๆ ไม่ต้องใช้ตัวช่วย ไปอ่านต่อจาก blog เพิื่นบ้านได้เลยครับ

 

Comments

comments

Leave a Comment

Your email address will not be published. Required fields are marked *