Day 26 - CardLibs
สวัสดีครับ บทความนี้เป็นบทความที่ 26 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ 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
สำหรับวันนี้ขอนำเสนอเรื่อง Cardslib เป็น Library ที่เอาไว้ปรับแต่งหน้า UI ของเราให้มีลักษณะแบบ Card มีทั้งแบบ Card, แบบ List, Grid หรือ staggered grid ตัวอย่างก็ประมาณนี้
Installation
ขั้นตอนการติดตั้ง เปิดไฟล์ build.gradle
ขึ้นมา แล้วเพิ่ม dependencies ลงไปดังนี้
กด Sync Gradle เป็นอันเรียบร้อย
Usage
Card
การสร้าง Card
มีส่วนที่จำเป็น 2 อย่างครับ คือ
Card
: เปรียบเสมือน View ตัวหนึ่ง ที่เอาไว้แสดงข้อมูลภายใน Card ของเราCardView
: อันนี้เปรียบเสมือน ViewGroup เ่ช่นพวก LinearLayout, RelativeLayout
การใช้งาน Card
ทำได้โดยเริ่มแรก ประกาศ CardView
ไว้ที่ไฟล์ xml ก่อน ดังนี้
ต่อมาภายในคลาส Java ทำการ binding CardView จากนั้น ก็ setCard()
โดยใช้ Card
ที่สร้างขึ้น ดังนี้
เรายังสามารถ setTitle()
, setHeader()
ให้กับ Card ได้ครับ เช่น
ส่วนวิธีการใส่ content เข้าไปใน Card ทำได้โดยการประกาศ Layout ขึ้นมาไฟล์นึง สมมติผมสร้างไฟล์ xml ขึ้นมาใหม่ ชื่อ list_item_card.xml
ข้างในมี ImageView และ TextView ดังนี้
จากนั้น Card
ทำการสร้าง โดยส่ง id คือ Layout ที่เพิ่งสร้าง เช่น
Custom Card
ทีนี้ถ้าอยากจะทำการแก้ไข Layout ภายใน Card
ทำยังไง? ก็ต้องสร้าง Custom Card ของเราขึ้นมาเองครับ โดยทำการ extends Card
แล้วแก้ไขที่เมธอด setupInnerViewElements
แบบนี้
ด้านบนเป็นการสร้างคลาสชื่อว่า MyCard
ต้องมี default Constructor 2 ตัวนะครับ เอาไว้สร้างออปเจ็ค 2 แบบ เหมือนตอนสร้าง new Card(Context)
และ new Card(Context, Layout)
ส่วนเมธอด setupInnerViewElements
ก็ทำการหา View โดย ชื่อ title มันก็คือ TextView ที่ประกาศไว้ในไฟล์ `list_item_card.xml จากนั้นก็เปลี่ยน Text มันใหม่ครับ
CardList
CardList
คือ Card ที่เรียงกันเป็น List เหมือนอย่าง ListView ส่วนที่จำเป็นในการสร้าง CardList
คือ
CardArrayAdapter
: เป็น Adapter ที่เอาไว้กำหนด data และ LayoutCardListView
: เป็นเหมือน Custom ListView คุณสมบัติเหมือนกับ ListView
การใช้งาน ก็สร้างไฟล์ขึ้นมา 1 ไฟล์ กำหนด CardListView
ลงไป เช่น
ส่วนภายในคลาส Java ก็สร้างดังนี้
ผลลัพธ์
Example
ตัวอย่าง Example อื่นๆ ของ Cardslib นะครับ อันนี้ผมยกมาจาก Docs ต้นฉบับเลย
- Google Map
- Google Now Stock Card
- Google Play CardList
- Google Play Grid
สรุป
Cardslib
เป็น Library ที่น่าใช้มากๆครับ สามารถปรับแต่งได้หลากหลาย ในบทความนี้ผมยกตัวอย่างคร่าวๆครับ ทำหมดคงจะไม่ไหว เพราะมันเยอะมาก อีกอย่าง ก็เพิ่งลองใช้ได้ไม่กี่ฟังค์ชั่นเอง หากใครสนใจก็ลองอ่านใน Docs เพิ่มเติมครับ มีทั้งตัวอย่าง คำอธิบาย รูปภาพ เจ้าของ Library ทำไว้ค่อนข้างดีมากครับ
Reference
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust