Home / Developer  / Android Kotlin  / เขียนแอพฯ Android ด้วย Kotlin การใช้ RecyclerView และ Array

เขียนแอพฯ Android ด้วย Kotlin การใช้ RecyclerView และ Array

ตัวอย่างการพัฒนาแอพฯ บน Android ด้วยภาษา Kotlin กับการเรียกใช้ RecyclerView จัดการ Array Adapter อย่างง่าย

สำหรับตัวอย่างนี้จะใช้ RecyclerView ที่น่าจะมาแทน Widget อย่าง ListView หรือ GridView กันแล้ว อีกทั้งเจ้า RecyclerView เองก็มีคุณสมบัติของการใช้ GridLayoutManager ร่วมกับตัวมันเอง ส่วนหลักการของ Binding data นั้นก็ใช้การแปลง Array เป็น Adapter แล้วเข้าไปยัดลง Widget ของ RecyclerView ได้ตรงๆ โดยอาศัย ViewHolder มาแสดงผลแถวแต่ละแถวอีกที

สร้าง New Project ขึ้นมาใหม่เป็น Empty Activity อย่าลืมเลือก Include Kotlin support เพื่อทำให้ Project นี้ใช้ภาษาโปรแกรม Kotlin เป็นหลัก

ระหว่างที่ทำการรอการใช้งานของ Android Studio ของเราอยากให้ทุกคนไปดาวน์โหลดภาพเหล่านี้จาก URL: https://drive.google.com/drive/folders/0B08PZSOd4UmOOXJjaGVESFg0Skk

ทำการวางภาพทั้งหมดลงใน folder ที่ app->res->drawable ดังภาพตัวอย่าง:

ไปที่ activity_main.xml หน้าจอออกแบบ Layout ให้สังเกตส่วนของ Pallete ส่วนของ Container ทำการคลิกดาวน์โหลด Widget ของ RecyclerView และ CardView ให้เรียบร้อย:

ออกแบบ xml ของ activity_main.xml ดังนี้:

ตั้งชื่อ ID ให้เจ้า RecyclerView ว่า recyclerView หลังจากนั้นไปประกาศใน MainActivity.kt ดังนี้:

ประกาศในส่วนของ Global Variable ตามด้วยตัวแปรของ Array ที่จะเป็น Array ของ String ในตัวแปรชื่อ foods และ ตัวแปรของ Int ที่เก็บ index ของรูปภาพใน Drawable

หลังจากนั้นสร้าง Class ใหม่เป็น Kotlin Class ใน package name เดียวกับ MainActivity ชื่อว่า MyAdapter

ประกาศ Extend ของ MyAdapter.kt Class ดังนี้:

เราจะพบว่ามี error เกิดขึ้น 2 จุดคือ class MyAdpater และ <ViewHolder> ให้ทำการ alt + enter ที่ class ก่อนเพื่อ Implement Memebers ของ Class นี้ให้มีเมธอดหลักของการจัดการ Adapter:

เราจะได้ Class ของ MyAdapter.kt ดังนี้:

หลักๆ คือเราจะมีการเรียก เมธอด MyAdapter โดยการส่ง Parameter มา 3 ค่าคือ foods, arrImg, this (หน้าปัจจุบัน) ไปยัง

เราจึงจะต้องมีการ นำค่า Array Size ก่อนผ่าน ฟังก์ชัน getItemCount() ให้ return จำนวน Array

ส่วนของจัดการ แถวของข้อมูลใน RecyclerView จะเป็นการใช้ ViewHolder มารองรับ เราจะสร้างหน้า Layout ใหม่ชื่อ model.xml มาวนในแต่ละแถวให้แก้ไขฟังก์ชัน onCreateViewHolder() ดังนี้:

กด alt + enter เพื่อสร้าง model.xml

เราจะได้ไฟล์ใหม่ในโฟลเดอร์ “app->res->layout->model.xml”

กลับไปที่ MyAdapter.kt ให้เราสร้าง Inner Class ในไฟล์นั้นต่อท้าย class ของ MyAdapter คือการสร้าง class ชื่อ ViewHolder ขึ้นมา

โดยมีหน้าที่คือ เรียกตัวแปร getNameTxt และ getThumbnail มารับค่า widget ID ใน model.xml

ขั้นตอนสุดท้ายคือ onBindViewHolder() ที่เป็นการ Mapp ค่า array ที่รับมากลายเป็น Adapter ยัดใส่ Widget แต่ละตัวใน ViewHolder

ดังนั้น class ของ MyAdapter.kt จะเป็นดังนี้:

กลับมาที่ MainActivity.kt ให้เขียนคำสั่งในการ เรียกใช้ GridLayoutManager และเพิ่ม setAdapter เพิ่มเข้าไปใน onCreate() สำหรับ RecyclerView

คำสั่งข้างต้นคือการทำ GridLayoutManager ของ RecyclerView เป็น 2 Columns ส่วนคำสั่งในการ setAdapter ข้อมูลใส่ใน RecyclerView คือ:

ดังนั้นไฟล์ MainActivity.kt จะเป็นดังนี้:

ทดสอบแอพฯ ของเรา

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
%d bloggers like this: