ว่าด้วยเรื่อง RecyclerView กับการใช้งานจริงในแบบฉบับเจ้าของบล็อก ตอนที่ 3

ในตอนล่าสุดเจ้าของบล็อกก็ได้แสดงตัวอย่างการเรียกใช้งาน RecyclerView ที่ดูเหมือนว่าจะเสร็จแล้ว แต่สุดท้ายแล้วก็ยังไม่เสร็จดีนัก ซึ่งในบทความนี้ก็จะมาแสดงให้เห็นกันว่าการเขียนแบบที่เจ้าของบล็อกใช้นั้นมันแก้ไขได้ง่ายจริงหรือ? มาอ่านกันต่อได้เลย~

บทความในซีรีย์เดียวกัน

• ตอนที่ 1
• ตอนที่ 2
• ตอนที่ 3 (Now Reading)
• ตอนที่ 4

ย้อนความ

ในตอนล่าสุดเจ้าของบล็อกได้สร้าง RecyclerView ขึ้นมาโดยมีผลลัพธ์แบบนี้

ผู้ที่หลงเข้ามาอ่านสามารถดาวน์โหลดตัวอย่างได้จาก Lovely Recycler View — Part 2 Ending [GitHub] เพื่อความต่อเนื่องครับ

แต่ทีนี้ปัญหาที่เกิดขึ้นคือ มันดันไม่ตรงกับ Requirement ที่กำหนดไว้ในตอนแรก ตรงที่สีของ Section นั้นจะต้องเปลี่ยนไปตามประเภทของสินค้า

การทำให้แถบ Section มีสีแยกกันนี้ ไม่ต่างอะไรกับการที่นักพัฒนาต้องกลับมาเพิ่มหรือแก้ไขการทำงานต่างๆที่อยู่ใน RecyclerView นั่นเอง

ดังนั้นเจ้าของบล็อกจะแก้ไขยังไงดีล่ะ?

มาแก้ไขให้มันถูกต้องกันเถอะ

เพื่อให้กำหนดสีพื้นหลังแยกกันได้ ก็ต้องเริ่มจากเพิ่ม ID ให้กับ LinearLayout ใน Layout Resource ของ view_section.xml เป็นอย่างแรก (สมมติว่ากำหนดชื่อเป็น @+id/layout_section_container)

<!-- view_section.xml -->
<LinearLayout 
    android:id="@+id/layout_section_container"
    ... >

    <TextView
        android:id="@+id/tv_section"
        ... />
</LinearLayout>

และในการกำหนดสีพื้นหลังที่เหมาะสมนั้นควรใช้วิธีแนบข้อมูลเพิ่มเข้าไปใน Section แล้วให้ SectionViewHolder ดึงค่าสีมากำหนดเป็นสีพื้นหลังนั่นเอง (ตามหลักการที่กำหนดไว้ว่าควรให้ ViewHolder จัดการเรื่องพวกนี้เอง)

เริ่มจากเพิ่ม backgroundColor เข้าไปใน Section ก่อน

@Parcelize
data class Section(
    val section: String,
    val backgroundColor: Int
) : OrderDetailItem(OrderDetailType.TYPE_SECTION)

แล้วใน SectionViewHolder ก็ให้ดึงค่าดังกล่าวมากำหนดเป็นสีพื้นหลังของ LinearLayout ซะ

class SectionViewHolder(private val binding: ViewSectionBinding) : RecyclerView.ViewHolder(binding.root) {
    fun bind(item: OrderDetailItem.Section) {
        /* ... */
        binding.layoutSectionContainer.setBackgroundColor(item.backgroundColor)
    }
}

ถ้าใช้ ViewBinding จะกำหนดสีพื้นหลังที่ Root เลยก็ได้เช่นกัน จะได้ไม่ต้องสร้าง ID ให้ LinearLayout

กลับไปที่ OrderDetailConverter ที่ทำหน้าที่สร้าง Section ขึ้นมา ก็จะต้องแนบค่าสีเข้าไปด้วยเช่นกัน

// OrderDetailConverter.kt
fun createSectionAndOrder(
    /* ... */,
    foodTitleColor: Int,
    bookTitleColor: Int,
    musicTitleColor: Int
): List<OrderDetailItem> {
    return mutableListOf<OrderDetailItem>().apply {
        // Food
        if (!orderDetail.foodList.isNullOrEmpty()) {
            add(
                OrderDetailItem.Section(
                    section = /* ... */,
                    backgroundColor = foodTitleColor
                )
            )
            /* ... */
        }

        // Book
        if (!orderDetail.bookList.isNullOrEmpty()) {
            add(
                OrderDetailItem.Section(
                    section = /* ... */,
                    backgroundColor = bookTitleColor
                )
            )
            /* ... */
        }

        // Music
        if (!orderDetail.musicList.isNullOrEmpty()) {
            add(
                OrderDetailItem.Section(
                    section = /* ... */,
                    backgroundColor = musicTitleColor
                )
            )
            /* ... */
        }
    }
}

แล้วให้ Activity โยนค่าสีเพิ่มเข้ามาในตอนที่เรียกคำสั่ง createSectionAndOrder(...) ด้วย

class MainActivity : AppCompatActivity() {
    /* ... */

    private fun convertToOrderDetailItems(orderDetail: OrderDetail): List<OrderDetailItem> {
        /* ... */
        val foodTitleColor = ContextCompat.getColor(this, R.color.sky_light_blue)
        val bookTitleColor = ContextCompat.getColor(this, R.color.funny_dark_pink)
        val musicTitleColor = ContextCompat.getColor(this, R.color.natural_green)

        return mutableListOf<OrderDetailItem>().apply {
            /* ... */
            addAll(OrderDetailConverter.createSectionAndOrder(orderDetail, foodTitle, bookTitle, musicTitle, currency, foodTitleColor, bookTitleColor, musicTitleColor))
            /* ... */
        }
    }
}

เมื่อดูผลลัพธ์ที่เกิดขึ้นก็จะเห็นว่า Section เปลี่ยนสีตามที่กำหนดแล้ว

จริงๆจะใส่ Logic สำหรับสีพื้นหลังไว้ใน ViewHolder ก็ได้เช่นกัน แต่การเอา Logic มาไว้ที่ OrderDetailConverter แทน จะช่วยให้ Logic ทั้งหมดอยู่ที่เพียงคลาสเดียวเท่านั้น ซึ่งเป็นคลาสที่สามารถเขียนเทสได้ง่ายที่สุด (การเขียนเทสใน Adapter และ ViewHolder ไม่ได้สนุกอย่างที่คิด)

อ่ะ แค่นี้คงเล็กน้อย มาดูอีกหนึ่งตัวอย่างกัน

ถึงแม้ว่าโค้ดนี้จะดูเรียบร้อยแล้ว พร้อมใช้งานแล้ว แต่ลองนึกภาพว่าถ้าลูกค้ามีบางอย่างที่อยากจะให้เพิ่มเข้าไปล่ะ?

“น้องครับๆ ถ้า Web Service ไม่ส่งข้อมูลอะไรมาให้ ให้แสดงเป็น….”

ก็นั่นล่ะฮะ ความรู้สึกที่คุ้นเคย

เอ…ถ้างั้นก็ต้องจำลองว่า Web Service ไม่ส่งข้อมูลมาให้สินะ.. ข้อมูลที่ส่งกลับมาจะเป็นแบบไหนได้มั่งหว่า?

{
  "food_list": [],
  "book_list": [],
  "music_list": []
}

หรือ

{
  "food_list": null,
  "book_list": null,
  "music_list": null
}

หรือ

null

ซึ่งทั้งหมดนี้มีโอกาสที่เกิดขึ้นได้จริง

ปรับให้คลาส FakeNetwork สามารถส่งข้อมูลได้หลายแบบเสียก่อน

ให้คลาสดังกล่าวสุ่มผลลัพธ์ที่จะส่งกลับมานั่นเอง ก็จะมีทั้งแบบมีข้อมูล ไม่มีข้อมูล เพื่อดูว่า RecyclerView ของเจ้าของบล็อกทำงานได้ถูกต้องหรือป่าว

// FakeNetwork.kt
object FakeNetwork {
    fun getFakeOrderDetail(callback: (orderDetail: OrderDetail) -> Unit) {
        Handler(Looper.getMainLooper()).postDelayed({
            callback.invoke(createFakeOrderDetail())
        }, 2000)
    }

    private fun createFakeOrderDetail(): OrderDetail {
        val fakeJsonList = arrayOf(
            "{\"food_list\":[{\"order_name\":\"Chicken\",\"amount\":2,\"price\":400},{\"order_name\":\"Egg\",\"amount\":24,\"price\":120}],\"book_list\":[{\"ISBN\":\"9780804139038\",\"book_name\":\"The Martian: A Novel\",\"author\":\"Andy Weir\",\"publish_date\":\"11 February 2014\",\"publication\":\"Broadway Books\",\"price\":314,\"pages\":384},{\"ISBN\":\"9781449327972\",\"book_name\":\"Embedded Android: Porting, Extending, and Customizing\",\"author\":\"Karim Yaghmour\",\"publish_date\":\"12 March 2013\",\"publication\":\"O'Reilly Media, Inc.\",\"price\":475,\"pages\":412},{\"ISBN\":\"9780545229937\",\"book_name\":\"The Hunger Games\",\"author\":\"Suzanne Collins\",\"publish_date\":\"1 September 2009\",\"publication\":\"Scholastic Inc.\",\"price\":279,\"pages\":384}],\"music_list\":[{\"artist\":\"Green Day\",\"album\":\"American Idiot\",\"release_date\":\"8 September 2004\",\"track\":9,\"price\":330}]}",
            "{\"food_list\":[],\"book_list\":[],\"music_list\":[]}",
            "{\"food_list\":null,\"book_list\":null,\"music_list\":null}",
            "{ }",
            "",
            "null"
        )
        val index: Int = Random.nextInt(fakeJsonList.size)
        return Gson().fromJson(fakeJsonList[index], OrderDetail::class.java)
    }
}

ทั้งนี้จะเปลี่ยนเงื่อนไขในการส่งข้อมูลแบบใดก็ได้ เพื่อให้ง่ายต่อการเทสมากขึ้น

เพิ่มโค้ดสำหรับกรณีที่ไม่มีข้อมูล

เมื่อต้องการเพิ่มอะไรใน Adapter สิ่งที่ต้องทำมีดังนี้

• สร้าง Layout Resource
• สร้าง ViewHolder
• เพิ่ม Type ใหม่
• สร้าง Data Class หรือ Object ของ ViewHolder โดยมี Type ใหม่
• เพิ่ม Type และ ViewHolder ตัวใหม่ใน onCreateViewHolder(...) และ onBindViewHolder(...) ของ Adapter
• สร้าง Data Class หรือ Object ใน Converter เมื่อเข้าเงื่อนไขที่ต้องการ

จะเห็นว่าสิ่งแรกที่ต้องทำนั้นไม่ใช่ส่วนของ Logic แต่จะเป็น Layout Resource เพราะจะต้องกำหนดก่อนว่าถ้าไม่มีข้อมูลจะต้องแสดง Layout ยังไง

ซึ่งเจ้าของบล็อกก็สมมติว่ามันจะต้องแสดงแบบนี้ละกันเนอะ

ดังนั้นเจ้าของบล็อกก็จะสร้าง Layout ขึ้นมาแบบนี้

<!-- strings.xml -->
<resources>
    <!-- ... -->
    <string name="no_order_selected">No order selected</string> 
</resources>

<!-- view_no_order.xml -->
<LinearLayout ... >

    <TextView ... />

</LinearLayout>

เพิ่ม Type สำหรับ ViewHolder แบบใหม่ เข้าไปในคลาส OrderDetailType (อย่าให้ซ้ำกับของเก่าล่ะ)

object OrderDetailType {
    /* ... */
    const val TYPE_NO_ORDER = 9
}

เพิ่ม Object สำหรับ NoOrder โดยกำหนด Type เป็น TYPE_NO_ORDER

@Parcelize
object NoOrder : OrderDetailItem(OrderDetailType.TYPE_NO_ORDER)

อ้อ แล้วก็ต้องสร้าง ViewHolder ด้วยนะ

// NoOrderViewHolder.kt
class NoOrderViewHolder(binding: ViewNoOrderBinding) : RecyclerView.ViewHolder(binding.root)

จากนั้นก็กำหนด ViewHolder และ Binding ให้เรียบร้อย

class OrderDetailAdapter(
    private val onPositiveButtonClicked: () -> Unit,
    private val onNegativeButtonClicked: () -> Unit,
    private val onOrderRemoveClicked: (OrderDetailItem.Order) -> Unit
) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    var orderDetailItems: List<OrderDetailItem> = listOf()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder = when (viewType) {
        /* ... */
        OrderDetailType.TYPE_NO_ORDER ->
            NoOrderViewHolder(ViewNoOrderBinding.inflate(LayoutInflater.from(parent.context), parent, false))
        /* ... */
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        orderDetailItems.getOrNull(position)?.let { item ->
            when {
                /* ... */
                holder is NoOrderViewHolder && item is OrderDetailItem.NoOrder -> { /* Do nothing */
                }
            }
        }
    }
    /* ... */
}

เพียงเท่านี้ Adapter ของเจ้าของบล็อกก็พร้อมที่จะแสดง Type ตัวใหม่แล้ว ที่เหลือก็แค่กำหนดข้อมูลที่ส่งเข้ามาให้เป็น Type ที่ต้องการเท่านั้นเอง

ดังนั้นใน Activity ที่เรียก OrderDetailConverter ก็จะต้องเพิ่มเงื่อนไขเข้าไปว่าถ้ามีข้อมูล Food, Book หรือ Music ก็จะแสดงข้อมูลตามปกติ แต่ถ้าไม่มีข้อมูลซักตัวก็จะแสดงข้อมูลเป็น NoOrder แทน

class MainActivity : AppCompatActivity() {
    /* ... */
    private fun convertToOrderDetailItems(orderDetail: OrderDetail): List<OrderDetailItem> {
        /* ... */
        return if (isOrderDetailAvailable(orderDetail)) {
            mutableListOf<OrderDetailItem>().apply {
                /* ... */
                addAll(OrderDetailConverter.createSectionAndOrder(orderDetail, foodTitle, bookTitle, musicTitle, currency, foodTitleColor, bookTitleColor, musicTitleColor))
                /* ... */
            }
        } else {
            mutableListOf<OrderDetailItem>().apply {
                add(OrderDetailConverter.createUserDetail(name))
                add(OrderDetailConverter.createTitle(title))
                add(OrderDetailConverter.createNoOrder())
            }
        }
    }

    private fun isOrderDetailAvailable(orderDetail: OrderDetail): Boolean {
        return orderDetail.foodList?.isNotEmpty() == true ||
                orderDetail.bookList?.isNotEmpty() == true ||
                orderDetail.musicList?.isNotEmpty() == true
    }
}

สำหรับเงื่อนไขที่จะเช็ค จะสร้างเป็น Method ที่ชื่อว่า isOrderDetailAvailable(...) ที่ข้างในจะเช็ค List ของ Food, Book และ Music นั่นเอง

เสร็จเรียบร้อยจ้า

จะเห็นว่าวิธีที่เจ้าของบล็อกใช้จะเน้นไปที่คำสั่งใน Adapter จะต้องเรียบง่าย ไม่ซับซ้อน และเอาความซับซ้อนทั้งหมดไปไว้ที่ Activity หรือ Converter ที่เป็นตัวกำหนดว่าจะให้ RecyclerView แสดงข้อมูลอะไรบ้างแทน

ซึ่งจะสะดวกมากเวลาต้องแก้ไขการแสดงข้อมูลต่างๆใน RecyclerView ยกตัวอย่างเช่น อยากให้แสดงราคารวมเป็น 0 บาท ในกรณีที่ไม่มีข้อมูลใดๆ

ที่ต้องทำก็แค่แก้ไขเงื่อนไขในการแสดงผลให้ตรงกับที่ต้องการนั่นเอง

class MainActivity : AppCompatActivity() {
    /* ... */
    private fun convertToOrderDetailItems(orderDetail: OrderDetail): List<OrderDetailItem> {
        /* ... */
        } else {
            mutableListOf<OrderDetailItem>().apply {
                add(OrderDetailConverter.createUserDetail(name))
                add(OrderDetailConverter.createTitle(title))
                add(OrderDetailConverter.createNoOrder())
                add(OrderDetailConverter.createTitle(summaryTitle))
                add(OrderDetailConverter.createTotal(orderDetail, currency))
            }
        }
    }
    /* ... */
}

เพราะข้างใน Converter มีการคำนวณเผื่อกรณีที่ไม่มีข้อมูลอยู่แล้ว ซึ่งจะได้ออกมาเป็น 0฿ นั่นเอง

เป็นอันเสร็จเรียบร้อย

ซึ่งผู้ที่หลงเข้ามาอ่านก็สามารถนำไปปรับเปลี่ยนรูปแบบการทำงานได้ตามใจชอบ เช่น อยากจะย้ายส่วนที่เป็น Logic ใน Activity ไปอยู่ใน Converter ทั้งหมดก็ย่อมทำได้เช่นกัน

สำหรับผู้ที่หลงเข้ามาอ่านคนใดที่อยากจะดูโค้ดในตอนที่ 3 นี้ ก็สามารถไปดาวน์โหลดได้ที่ Lovely Recycler View — Part 3 Ending [Github]

แต่เอาเข้าจริงเจ้าของบล็อกก็ยังรู้สึกว่ามันไม่ค่อยซับซ้อนซักเท่าไรเลยเนอะ เพราะงั้นในตอนที่ 4 มาทำให้มันยุ่งยากขึ้นมากกว่านี้กันเถอะ!!