30 มิถุนายน 2557

[Android Design] การใส่ช่องไฟใน Custom List View


        มีผู้ที่หลงเข้ามาอ่านหลายๆท่านนิยมใช้ 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 ดูเองบ้างนะครับ เพราะว่าอันนี้เป็นแค่การประยุกต์พื้นฐานง่ายๆเพียงเท่านั้นเอง (คือแบบว่า..ถ้ายังจะขอโค๊ดก็ไม่รู้จะว่ายังไงแล้ว..)
     



เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium