สวัสดีครับ บทความนี้เป็นบทความที่ 2 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์
Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
Paralloid คืออะไร?
Paralloid เป็น Android Parallax Library ครับ แล้ว Parallax คืออะไร? บางคนอาจจะสงสัยใช่มั้ยครับ ถ้าใครไม่รู้ แนะนำให้อ่าน ที่นี่ประกอบครับ สร้างเว็บแนว Parallax Scrolling แบบง่ายๆ ด้วย jQuery Jarallax ถึงแม้จะเป็นการทำ Parallax บนเว็บไซต์ แต่ว่าหลักการมันคืออย่างเดียวกัน นั่นแหละ
Features
เจ้า Paralloid ที่จะใช้เนี้ย มันทำอะไรได้บ้างละ? หลักๆเลย คือ
- ทำ Parallax กับ View อื่นๆเวลาที่มีการ scroll
- สามารถทำ Parallax หลายๆ แบล็กกราวน์ได้
- Parallax ได้หลายทิศทาง
- รองรับทั้ง ListView, ScrollView และ HorizontalScrollView
ตัวอย่าง จาก Google Play ลองโหลดมาดูได้ครับ
Getting Started
สำหรับ Library ตัวนี้ ต้องบอกว่า มันติดตั้งยุ่งยากมากเลย เนื่องจาก ไม่มี repository อยู่ใน maven ทำให้เวลาติดตั้งจริงๆ ต้องก็อปไฟล์มาทั้งหมด แล้วตั้งค่าอยู่เยอะพอสมควร อีกทั้ง ใช้ได้แค่บน Android Studio เท่านั้น เนื่องจาก ทางผู้พัฒนาเขียนด้วย gradle script (ตัวนี้ผมใช้เวลาในการติดตั้ง อยู่เกือบ 2 ชม. แนะ error นุ้น นี่ นั่น เยอะแยะไปหมด หากใครลองเล่น แล้วติดปัญหา ก็ลองดูครับ เผื่อเจอปัญหาคล้ายๆกัน)
แนะนำว่าดูขั้นตอนการติดตั้งให้ละเอียดครับ พร้อมทั้งดู ต้นฉบับประกอบด้วย
Installation
ขั้นตอนการติดตั้ง เริ่มแรก ให้ clone repository ของเค้ามาเลยครับ (ใคร clone หรือไม่เคยใช้ git ก็กด ดาวน์โหลด zip ไฟล์) จากลิงค์นี้ครับ Paralloid-master.zip
แล้วก็อปไปวางไว้ในโฟลเดอร์ libs
ที่โปรเจ็คของเรา
จะได้ File Tree ลักษณะแบบดังภาพข้างล่าง (โดย app
คือโมดูลหลักที่เราจะใช้เขียน)
ต่อมา เข้าไปที่ /libs/paralloid
ที่เพิ่ง clone มาเมื่อกี้ จะเห็น 3 โมดูลหลักๆ คือ paralloid
, paralloidexample
และ prralloidviews
ให้เปิดไฟล์ build.gradle
ของแต่ละโฟลเดอร์มาแก้ดังนี้
โดยทั้ง 3 ไฟล์ จะมีส่วนที่ต้องแก้เหมือนกันคือ
เปลี่ยนเวอร์ชันของ gradle plugin จาก
เป็นเวอร์ชันล่าสุด
เปลี่ยนชื่อ android plugin จาก
เป็น
เปลี่ยน Build Tool เวอร์ชัน จาก
เป็น เวอร์ชันล่าสุด
และเปลี่ยน Support Library เป็นเวอร์ชันที่ใหม่กว่า
เป็น
สำหรับแต่ละไฟล์ เมื่อแก้ไขแล้ว จะได้ดังนี้
Paralloid/build.gradle
ไฟล์ paralloid/build.gradle
นอกจากแก้ไขแบบด้านบนแล้ว ให้ลบบล็อก uploadArchives {}
ทิ้งไปด้วย
Paralloidexample/build.gradle
ไฟล์ paralloidexample/build.gradle
แค่เปลี่ยนจาก
เป็น
สุดท้ายไฟล์จะได้ดังนี้
Paraloidviews/build.gradle
ไฟล์ paraloidviews/build.gradle
ลบบล็อก uploadArchives {}
ทิ้งไปด้วย และก็เปลี่ยนจาก
ให้เป็น
แล้วก็เพิ่ม Support Library และลด minSDK ลงเหลือ 11 ก็จะเหลือแค่นี้
ส่วนที่ต้องแก้เฉพาะที่ clone มาก็หมดแค่นี้ครับ ต่อมากลับมาไฟล์ Root Project ของเรา เลือกเปิด settings.gradle
ขึ้นมา ทำการ include library ที่เรา clone เมื่อกี้ลงไปด้วย
ต่อมา ไปที่ โมดูลหลัก (app) เลือกไฟล์ app/build.gradle
แล้วก็เพิ่ม compile project
เข้าไป แบบนี้
สุดท้าย Sync Project
ทดสอบรัน Sample ดูก่อน หากใครมีปัญหา error gradle failed ในลักษณะนี้
ให้เปิดไฟล์ app/build.gradle
ภายในบล็อก android
เพิ่มนี้ลงไป
แล้ว Sync ใหม่ หรือ clean project -> restart อีกซักรอบ น่าจะหาย
เห็นมั้ยครับ แค่การ Install ก็ยุ่งยากมากแล้ว แต่ตอนนำไปใช้นี่ ไม่ยากเท่าไหร่นะครับ :D
Create Sample Project
ผมจะลองใช้ 2 แบบคือ Parallax แบบ ListView กับ Parallax แบบ Background นะครับ
เริ่มแรก ผมสร้างไฟล์ ParallaxListActivity
ขึ้นมา ได้หน้าตาแบบนี้
ด้านบน ทำคล้ายๆกับ เราสร้าง ListView ทั่วๆไป คือมี data แล้วก็สร้าง SimpleAdapter
ด้วยข้อมูลที่เรา gen ขึ้น โดยใช้ layout แบบ simple_list_item_1
(TextView อันเดียว) จากนั้นก็ setAdapter()
ให้กับ ListView
สุดท้าย ความมหัศจรรย์ มันอยู่ตรง interface Parallaxor ครับ โดย implement เมธอด parallaxViewBackgroundBy()
ซึ่งส่ง parameters 3 ค่าคือ ListView, รูปภาพที่จะใช้เป็น background และก็อัตราส่วนที่จะให้มันเคลื่อนที่
parameter ตัวสุดท้าย หากค่า เป็น 1.0f คือ ถ้า 0.5f ก็จะเคลื่อนที่ ครึ่งหนึ่งของระยะทาง ของ View อย่างตัวอย่าง 0.25f ก็เคลื่อนที่ 1/4
สุดท้ายจะเห็นว่ามันมี error อยู่ตรง ไม่รู้จัก รูปภาพ ก็ไปก็อบเอาจาก parallaxexample
ละกันครับ หรือลิงค์นี้ และก็ไม่รู้จัก layout day2_parallax_list_view
ก็แน่นอนซิครับ ยังไม่ได้สร้าง
ก็ทำการสร้าง layout นี่เลยครับ ตามโค๊ดด้านล่าง
ใช้ ParallaxListView
ก็คล้ายๆ ListView เพียงแต่ว่ามัน implement Parallaxor นี่แหละ
สุดท้ายลองรันดูครับ ผลลัพธ์จะได้ประมาณนี้
ทีนี้ยังไม่หนำใจ ผมลองสร้างมาอีกตัวอย่างหนึ่ง สมมติให้ชื่อว่า ParallaxBackgroundActivity
โค๊ดเป็นแบบนี้
คราวนี้ไม่ใช้ ListView แล้ว แต่จะใช้ ParallaxScrollView
ซึ่งมันเป็น ScrollView ชนิดนึง แล้วก็เรียกเมธอด parallaxViewBackgroundBy
ส่งค่า ParallaxScrollView, รูป background ที่จะใช้ แล้วก็อัตราการเคลื่อนที่เหมือนเดิม
ส่วนไฟล์ day2_parallax_background.xml
ก็สร้างดังนี้
ด้านบนเป็นการใช้ ParallaxScrollView
ครอบ TextView ทั้งหมดเลย ส่วน TextView ก็ setStyle()
จากไฟล์ res/values/styles.xml
ดังนี้
ไฟล์ res/values/strings.xml
ใช้ lorem ipsum แบบนี้ ฮ่าๆ
สุดท้าย ผมเพิ่มปุ่ม menu โดยการแก้คลาส ParallaxListActivity
เพื่อเมื่อคลิกเมนู ก็ให้เปิด ParallaxBackgroundActivity
แบบนี้
ไฟล์ res/menu/main.xml
คือ
สุดท้ายเพิ่ม Activity ในไฟล์ AndroidManifest.xml ด้วย
เมื่อทดสอบ ผลลัพธ์ได้แบบนี้
สรุป
Library ตัวนี้น่าสนใจดีครับ ตรงที่มันเป็น Parallax นี่แหละ ปกติเคยทำแต่บนเว็บ ไม่เคยลองใช้ในแอพ Android เลย แล้วก็อุปสรรคในการใช้งานเจ้าตัวนี้คือ ความยากในการติดตั้งครับ กินเวลาหลายชม.ทีเดียว ใครสนใจ Parallax ลองโหลดไปใช้ และทดสอบดูกันนะครับ
สำหรับ Source Code อยู่ที่ Github ครับ