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
dependencies {
compile 'com.github.manuelpeinado.fadingactionbar:fadingactionbar:3.1.2'
}
หากใครใช้ ActionBarSherlock ให้เพิ่มนี้ลงไปแทน
dependencies {
compile 'com.github.manuelpeinado.fadingactionbar:fadingactionbar-abs:3.1.2'
}
และหากใครใช้ AppCompat (ซึ่่งผมก็ใช้แบบนี้อยู่) ก็เพิ่มนี้ลงไป
dependencies {
compile 'com.github.manuelpeinado.fadingactionbar:fadingactionbar-abc:3.1.2'
}
หากเกิดปัญหา คล้ายๆแบบนี้
Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 14 cannot be smaller than version L declared in library com.android.support:support-v4:21.0.0-rc1
ก็เพิ่ม dependencies ของ support library v4 เวอร์ชัน 20.0.0 ลงไปด้วย (เนื่องจาก เวอร์ชัน 21.0.0-rc1 มันยังเป็นเวอร์ชันทดสอบอยู่)
compile 'com.android.support:support-v4:20.0.0'
หรือยังไม่หายอีก ก็จัดการเพิ่มโค๊ดนี้ลงไปใน บล็อก android {}
เลยครับ
apply plugin: 'com.android.application'
android {
configurations.all {
resolutionStrategy {
force 'com.android.support:support-v4:20.0.0'
}
}
}
กด 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 ครับ)
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/image_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/guitar" />
ต่อมา สร้างอีกไฟล์นึง ชื่อว่า activity_scrollview.xml
โดยภายในมี TextView 2 ตัว และโหลดข้อความมาจาก res/values/strings.xml
นะครับ ค่าจริงๆของ lorem_ipsum ดูได้ที่นี่
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="@string/lorem_ipsum"
android:textAppearance="@android:style/TextAppearance.Medium" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="@string/lorem_ipsum"
android:textAppearance="@android:style/TextAppearance.Medium" />
</LinearLayout>
FadingActionBar
ต่อมาถึงเวลาทำ FadingActionBar ละครับ เริ่มแรกสร้าง Activity ขึ้นมาใหม่ ผมให้ชื่อว่า FadingActionBarActivity.java
แล้วก็ทำตามสเตปการสร้าง ตามที่พูดไปในตอนต้นเลยครับ ดังนี้
package com.devahoy.learn30androidlibraries.day15;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import com.devahoy.learn30androidlibraries.R;
import com.manuelpeinado.fadingactionbar.FadingActionBarHelper;
public class FadingActionBarActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FadingActionBarHelper helper = new FadingActionBarHelper();
helper.actionBarBackground(R.drawable.day15_actionbar_bg);
helper.headerLayout(R.layout.day15_header);
helper.contentLayout(R.layout.day15_activity_scrollview);
setContentView(helper.createView(this));
helper.initActionBar(this);
}
}
จากโค๊ดด้านบน ในส่วน
actionBarBackground()
นั้นใช้เป็น background ของ ActionBar ในส่วนนี้โหลดจาก drawable ผมก็เลยทำการสร้างไฟล์ขึ้นมา แล้วเซฟไว้ที่res/drawable/
ดังนี้ จะได้ ActionBar สีออกฟ้าๆหน่อยๆ
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff409fde" />
</shape>
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
ดังนี้
<style name="AppTheme.TranslucentActionBar">
<item name="android:actionBarStyle">@style/Widget.ActionBar.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="actionBarStyle">@style/Widget.ActionBar.Transparent</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="Widget.ActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse" />
<style name="Widget" />
<style name="Widget.ActionBar.Transparent">
<item name="android:background">@android:color/transparent</item>
<item name="background">@android:color/transparent</item>
</style>
ด้านบน เป็นการใช้ธีมของ AppCompat.Light นะครับ หากเป็น Holo, Holo Dark ผมจำไมไ่ด้แฮะว่ามันเป็นอะไร น่าจะ Theme.Holo.Light
ถ้าจำไม่ผิดนะครับ ส่วนนี้ search google เอาเน้อ ผมรีบครับ ง่วงนอน :D
ต่อมาก็แก้ไฟล์ AndroidManifest.xml
โดยแก้ไข ในส่วน andoird:theme
เป็น style ที่เราเพิ่งเพิมไปเมื่อกี้ที่ชื่อ AppTheme.TranslucentActionBar
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.devahoy.learn30androidlibraries" >
...
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme.TranslucentActionBar" >
<activity
....
</activity>
</application>
</manifest>
ลองรันใหม่ ผลลัพธ์ได้แบบนี้
สรุป
ได้เวลานอนแล้วครับ ณ เวลาเขียนคือ ตี2 ผมเพิ่งเริ่มทำตอน 4 ทุ่ม เนื่องจากวันนี้ติดธุระครับ :D สรุปแล้ว ถึงแม้วันนี้มีเวลาศึกษาค่อนข้างน้อย แต่่ว่าตัว FadingActionBar ก็มีตัวอย่าง Sample Code ให้ดู บวกกับ อ่านบทความนี้ Pushing the ActionBar to the Next Level ก็ทำให้พอเข้าใจหลักการมากขึ้นครับ และตัวอย่างที่ผมยกมาก็มีแค่ ScrollView แต่ว่าตัว FadingActionBar มันยังรองรับทั้ง ListView และ WebView หากใครสนใจ ก็ลองนำไปประยุกต์ใช้กันดูครับ
Happy Coding :D
Source Code
References
- Authors
- Name
- Chai Phonbopit
- Website
- @Phonbopit