มีผู้ที่หลงเข้ามาอ่านหลายๆท่านนิยมใช้ Custom List View ในการแสดงข้อมูลในแอปพลิเคชัน เนื่องจาก List View ธรรมดาๆนั้นไม่ค่อยตอบโจทย์ซักเท่าไร อีกทั้งยังไม่สามารถดีไซน์ลักษณะได้ตามใจชอบเลย แต่ทว่าตอนที่ออกแบบ Layout ที่จะใช้ใน Custom List View นั้น อยากจะให้มีช่องไฟระหว่างแต่ละแถวเสียหน่อย เพราะมันชิดซะเหลือเกินจนรู้สึกอึดอัด
แต่เอ๊ะ! มันทำยังไงละเนี่ย? จัดยังไงก็ไม่มีช่องไฟซักที~!
เนื่องจากเจ้าของบล็อกถูกถามคำถามนี้อยู่เป็นระยะๆ ดังนั้นก็ขอทำบทความนี้ไว้เลย
โดยปกติการจัด Layout สำหรับ Custom List View ก็มักจะจัดกันประมาณนี้ (เอาแบบคร่าวๆ) มี Content อยู่ข้างใน Root Layout สมมติว่ามีแค่ Text View ละกัน
พอแสดงใน Custom List View ก็จะได้เป็นแบบนี้
จะเห็นว่ามันชิดมากจนเกินไป เพราะงั้นก็ใส่ Margin ให้กับ Root Layout ซะเลย
เท่านี้ก็เรียบร้อยแล้ว Custom List View จะได้มีช่องไฟซะที
อ่าว เฮ้ย!! ทำไมช่องไฟหายไป? ทั้งๆที่กำหนด Margin ไว้ตั้ง 10dp แล้ว!?
สำหรับการทำ Custom Adapter ใดๆก็ตาม รวมไปถึง Custom List View การกำหนด Margin ที่ Root Layout นั้นจะไม่มีผลใดๆเลย ดังนั้นใส่ไปก็เท่านั้นช่องไฟก็ไม่โผล่มาอยู่ดี
แล้วถ้างั้นต้องทำยังไงล่ะ?
จริงๆวิธีแก้ปัญหานี้ก็ง่ายๆนะ แต่ไม่รู้ทำไมผู้ที่หลงเข้ามาอ่านหลายๆคนชอบมองข้ามกัน... นั่นก็คือใส่ Layout ซ้อนเข้ามาอีกชั้นแล้วกำหนด Margin ที่ Layout ตัวนั้นๆแทนก็ได้แล้ว
สำหรับพื้นหลังสีเทาๆที่ลงสีไว้ให้ดูเฉยๆนะ จริงๆให้เอาสีออกไปซะ ถ้าสรุปเป็นภาพคร่าวๆก็จะได้ประมาณนี้
Root Layout ปล่อยมันไป ลาก Layout อันอื่นเข้ามาใส่ไว้ในนั้นซะ จากนั้น Content ต่างๆอยากจัดอะไรก็จัดใส่ใน Layout ที่เพิ่มเข้ามาแทน แล้วกำหนด Margin ของ Layout ตามระยะห่างของช่องไฟที่ต้องการ จากตัวอย่างก็คือ 10dp
ซึ่งการกำหนด Margin ตรงจุดนี้อย่าลืมนะว่าระยะช่องไฟจะมีขนาดสองเท่าของระยะ Margin ที่กำหนดในนี้ จากตัวอย่างที่กำหนดไว้ 10dp เมื่อแสดงผลออกมาเป็น List View จะมีช่องไฟเป็น 20dp แทน ดังนั้นทางที่ดีก็ควรกำหนดแค่ครึ่งเดียวพอ
จากนั้นก็ลองทดสอบดูซะว่าได้ผลออกมาเป็นยังไง
อ่ะ! มีช่องไฟตามที่ต้องการแล้ววววววววววววว สำหรับวิธีนี้สามารถใช้ได้เสมอไม่ว่าจะจัดข้างใน Content เป็นอย่างไร เพราะเป็นการกำหนด Layout ที่คลุม Content อยู่แล้ว
ถึงจุดนี้แล้วถ้าผู้ที่หลงเข้ามาอ่านถามหาตัวอย่างโค๊ดจากบทความนี้ล่ะก็....แนะนำให้กลับไปฝึกหัดจัด Layout ดูเองบ้างนะครับ เพราะว่าอันนี้เป็นแค่การประยุกต์พื้นฐานง่ายๆเพียงเท่านั้นเอง (คือแบบว่า..ถ้ายังจะขอโค๊ดก็ไม่รู้จะว่ายังไงแล้ว..)
