Day 15 - FadingActionBar
สวัสดีครับ บทความนี้เป็นบทความที่ 14 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
- Day 1 : AndroidStaggered Grid
- Day 2 : Paralloid
- Day 3 : Retrofit
- Day 4 : SwipeRefreshLayout
- Day 5 : Android GraphView
- Day 6 : Holo Color Picker
- Day 7 : Android Async Http
- Day 8 : Crashlytics
- Day 9 : Butter Knife
- Day 10 : Android Annotations
- Day 11 : DateTimePicker
- Day 12 : Circular Progress Button
- Day 13 : ViewPager
- Day 14 : ViewPagerIndicator
- Day 15 : FadingActionBar
- Day 16 : AutofitTextView
- Day 17 : SwipeListView
- Day 18 : ShowcaseView
- Day 19 : GreenDAO
- Day 20 : AndroidViewAnimation
- Day 21 : ActiveAndroid
- Day 22 : Twitter4J
- Day 23 : ListViewAnimations
- Day 24 : AndEngine
- Day 25 : EazeGraph
- Day 26 : Cardslib
- Day 27 : AdapterKit
- Day 28 : WeatherLib
- Day 29 : FlatUI
- Day 30 : Android Firebase
สำหรับวันนี้ขอนำเสนอเรื่อง FadingActionBar ครับ วันนี้ขอมาช้าหน่อยนะครับ อาจจะเห็นวันที่ของบทความเป็นของอีกวัน แต่จริงๆเป็นบทความที่ 15 นะครับ เนื่องจากเพิ่งจะมีเวลาเขียนตอน 4 ทุ่ม ทำให้กว่าจะเสร็จ มันเลยไป ตี 2 แล้ว ส่วนบทความนี้จะนำเสนอการใช้งาน FadingActionBar แบบนี้ครับ
Installation
ขั้นตอนการติดตั้ง ง่ายๆครับ เพิ่ม dependencies ลงไปที่ไฟล์ build.gradle
หากใครใช้ ActionBarSherlock ให้เพิ่มนี้ลงไปแทน
และหากใครใช้ AppCompat (ซึ่่งผมก็ใช้แบบนี้อยู่) ก็เพิ่มนี้ลงไป
หากเกิดปัญหา คล้ายๆแบบนี้
ก็เพิ่ม dependencies ของ support library v4 เวอร์ชัน 20.0.0 ลงไปด้วย (เนื่องจาก เวอร์ชัน 21.0.0-rc1 มันยังเป็นเวอร์ชันทดสอบอยู่)
หรือยังไม่หายอีก ก็จัดการเพิ่มโค๊ดนี้ลงไปใน บล็อก android {}
เลยครับ
กด Sync Project with Gradle File เป็นอันเรียบร้อย
Getting Started
FadingActionBar สามารถทำงานร่วมกับเลเอาท์ได้ 3 แบบ คือ
- แสดงเนื้อหาใน ScrollView
- แสดงเนื้อหาใน ListView
- แสดงเนือ้หาผ่าน WebView
ซึ่งในตัวอย่างที่ผมจะยกมา ขอนำเสนอแต่แบบแรกก่อนละกันครับ คือ ScrollView ส่วนแบบอื่นๆ ก็ดูตาม Sample แล้วลองทำดูครับ
สำหรับหลักการและวิธีใช้งาน FadingActionBar นั้นมีหลักการง่ายๆดังนี้ครับ
- สร้างคลาส
FadingActionBarHelper
- ทำการตั้งค่า Background ของ ActionBar ผ่านเมธอด
actionBarBackground()
- ทำการตั้งค่า Header โดยใช้ไฟล์ layout xml ผ่านเมธอด
headerLayout()
- ทำการตั้งค่า เนื้อหาที่จะแสดง โดยโหลด layout จากไฟล์ xml ผ่านเมธอด
contentLayout()
setContentView()
โดยใช้ข้อมูล ด้านบนที่ทำการตั้งค่าไว้- ทำการเรียก ActionBar ผ่านเมธอด
initActionBar()
จากด้านบน เมื่อมองดูภาพรวมแล้ว เราจะใ้ช้ไฟล์เลเอาท์ xml จำนวน 2 ไฟล์ครับ และไฟล์ .java อีก 1 ไฟล์ มาเริ่มสร้างไฟล์กันเลย!
Layout
ผมทำการสร้างเลเอาท์ที่จะเอาไว้แสดงในส่วน Header โดยตั้งชื่อว่า header.xml
เลเอาท์นี้ไม่มีอะไรเลยครับ เพียงแค่ใส่ ImageView โดยใช้รูปที่ชื่อว่า guitar.png (ส่วนนี้ผมโหลดมาจาก picjumbo.com ครับ)
ต่อมา สร้างอีกไฟล์นึง ชื่อว่า activity_scrollview.xml
โดยภายในมี TextView 2 ตัว และโหลดข้อความมาจาก res/values/strings.xml
นะครับ ค่าจริงๆของ lorem_ipsum ดูได้ที่นี่
FadingActionBar
ต่อมาถึงเวลาทำ FadingActionBar ละครับ เริ่มแรกสร้าง Activity ขึ้นมาใหม่ ผมให้ชื่อว่า FadingActionBarActivity.java
แล้วก็ทำตามสเตปการสร้าง ตามที่พูดไปในตอนต้นเลยครับ ดังนี้
จากโค๊ดด้านบน ในส่วน
actionBarBackground()
นั้นใช้เป็น background ของ ActionBar ในส่วนนี้โหลดจาก drawable ผมก็เลยทำการสร้างไฟล์ขึ้นมา แล้วเซฟไว้ที่res/drawable/
ดังนี้ จะได้ ActionBar สีออกฟ้าๆหน่อยๆ
-
headerLayout()
ก็ใช้header.xml
ที่ได้สร้างไว้ -
contentLayout()
ก็ใช้activity_scrollview.xml
ที่ได้สร้างไว้ -
setContentView(helper.createView(this));
ทำการ setContentView() โดยใช้ข้อมูลที่เราทำการตั้งค่าไว้ -
helper.initActionBar(this);
สุดท้าย สั่งให้มันinitActionBar(this)
เพื่อแสดง ActionBar (คล้ายๆกับgetActionBar()
)
ทดสอบรันโปรแกรมดูครับ จะได้แบบนี้
แต่ว่ารู้สึกว่า ActionBar มันยังไม่ transparent ไปกับรูปภาพ แบบในตัวอย่างเลย ก็เลยต้องมีการปรับแต่ง theme กันซะหน่อย โดยการแก้ไขไฟล์ res/values/styles.xml
ดังนี้
ด้านบน เป็นการใช้ธีมของ AppCompat.Light นะครับ หากเป็น Holo, Holo Dark ผมจำไมไ่ด้แฮะว่ามันเป็นอะไร น่าจะ Theme.Holo.Light
ถ้าจำไม่ผิดนะครับ ส่วนนี้ search google เอาเน้อ ผมรีบครับ ง่วงนอน :D
ต่อมาก็แก้ไฟล์ AndroidManifest.xml
โดยแก้ไข ในส่วน andoird:theme
เป็น style ที่เราเพิ่งเพิมไปเมื่อกี้ที่ชื่อ AppTheme.TranslucentActionBar
ลองรันใหม่ ผลลัพธ์ได้แบบนี้
สรุป
ได้เวลานอนแล้วครับ ณ เวลาเขียนคือ ตี2 ผมเพิ่งเริ่มทำตอน 4 ทุ่ม เนื่องจากวันนี้ติดธุระครับ :D สรุปแล้ว ถึงแม้วันนี้มีเวลาศึกษาค่อนข้างน้อย แต่่ว่าตัว FadingActionBar ก็มีตัวอย่าง Sample Code ให้ดู บวกกับ อ่านบทความนี้ Pushing the ActionBar to the Next Level ก็ทำให้พอเข้าใจหลักการมากขึ้นครับ และตัวอย่างที่ผมยกมาก็มีแค่ ScrollView แต่ว่าตัว FadingActionBar มันยังรองรับทั้ง ListView และ WebView หากใครสนใจ ก็ลองนำไปประยุกต์ใช้กันดูครับ
Happy Coding :D
Source Code
References
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust