11 ธันวาคม 2559

[Android Code] สวัสดี Custom View สุดที่รัก ตอนที่ 1



        ถึงแม้ว่าแอนดรอยด์นั้นจะมี View ต่างๆนานาให้ใช้งานตั้งมากมายอยู่แล้วก็ตาม แต่ในการทำงานจริงๆนั้นก็อาจจะต้องผจญภัยไปกับรูปแบบการทำงานของ View ที่สลับซับซ้อนและมีจำนวนเยอะอยู่บ่อยครั้ง ดังนั้นนักพัฒนาจึงควรจะรู้จัก Custom View และสร้างขึ้นมาใช้งานบ้างนะ

บทความที่เกี่ยวข้อง

        • สวัสดี Custom View สุดที่รัก ตอนที่ 1
        • สวัสดี Custom View สุดที่รัก ตอนที่ 2
        • สวัสดี Custom View สุดที่รัก ตอนที่ 3
        • สวัสดี Custom View สุดที่รัก ตอนที่ 4

Custom View คืออะไร?

        View ใดๆก็ตามที่นักพัฒนาต้องการให้ทำงานหรือแสดงผลในรูปแบบที่ View พื้นฐานทำไม่ได้หรือทำแล้วยุ่งยาก นั่นล่ะครับที่เค้าเรียกกันว่า Custom View

        View Library ต่างๆที่นักพัฒนาเอามาใช้ในแอปฯก็เป็น Custom View ที่คนเขียนไลบรารีเค้าทำให้แล้วนั่นแหละฮะ

        ซึ่งการทำ Custom View เอง ก็หมายความว่าผู้ที่หลงเข้ามาอ่านสามารถออกแบบ View และการทำงานของ View ตัวนั้นๆได้ตามต้องการนั่นเอง

ทำไมต้องทำ Custom View?

        เจ้าของบล็อกพบว่านักพัฒนาส่วนใหญ่นั่นไม่เคยเขียน Custom View เพื่อใช้งานในแอปฯซักเท่าไรนัก ซึ่งจริงๆแล้ว Custom View นั้นช่วยให้ชีวิตง่ายขึ้นเยอะเลยนะ

1.ลดความซับซ้อนของ Layout XML 

        เมื่อ View ที่ใช้ใน Layout มีจำนวนเยอะ และสามารจัด View เป็นกลุ่มแยกตามหน้าที่ได้ การทำ Custom View สำหรับ View กลุ่มนั้นจะทำให้เวลาจัด Layout ทำได้สะดวก โค้ดไม่เยอะเกินจำเป็น

        ยกตัวอย่างเช่น Layout แบบนี้


        จากตัวอย่างนี้จะประกอบไปด้วย Text View และ Image View เท่านั้น และส่วนใหญ่ก็มักจะจัดแบบนี้



        โดยจะได้ Component Tree ออกมาเป็นแบบนี้


        อาจจะดูว่าไม่มีอะไรผิดปกตินี่ ใครๆเค้าก็จัดกันแบบนี้แหละ แต่สิ่งที่เจ้าของบล็อกเห็นจากภาพข้างบนนี้คือ View บางส่วนนั้นสามารถจัดรวมกันเป็นกลุ่มๆด้วยรูปแบบที่คล้ายกันและมีหน้าที่เกี่ยวข้องกันโดยตรง

        จะดีกว่ามั้ยถ้าเจ้าของบล็อกทำกลุ่มพวกนี้ให้กลายเป็น Custom View แต่ละตัวไปเลย เอาความซับซ้อนของ Layout บางส่วนแยกออกไปเป็น Custom View ก็จะได้ Layout ที่มีความซับซ้อนลดลงแบบนี้



        ซึ่งในความเป็นจริงแล้ว Layout ดังกล่าวได้ผลลัพธ์ที่เหมือนๆกันนั่นแหละ แต่การทำ Custom View จะช่วยให้นักพัฒนาจัดการกับ View แต่ละส่วนแยกออกจากกันโดยสิ้นเชิง ก็เหมือนๆกับการเขียนโค้ดแยกออกเป็นแต่ละคลาสนั่นเอง

2.แยก Logic อันวุ่นวายของ View แต่ละตัวออกจากกันโดยสิ้นเชิง

        จากตัวอย่างข้างบน สมมติว่า View ทุกตัวกำหนดค่าบางอย่างได้ นั่นก็หมายความว่ามี Logic บางอย่างเข้ามาควบคุม View เหล่านี้ และ Logic ที่ว่าก็คือโค้ด Java นั่นเอง

        ถ้าเจ้าของบล็อกไม่ทำ Custom View ก็จะนึกถึงโค้ดลักษณะแบบนี้



        สมมติว่าข้อมูลพวก Mobile Number, Email และ Address อันไหนที่มีค่าเป็น Null ก็จะให้ซ่อน View เหล่านั้นไปเลย ก็จะต้องยัด Logic ประมาณนี้ไว้ใน Activity


        ก็อาจจะดูเป็นเรื่องปกติสำหรับผู้ที่หลงเข้ามาอ่านหลายๆคน

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

        จะดีกว่ามั้ย? ถ้าสร้าง Custom View ขึ้นมาแล้วยัด Logic ที่ต้องการไว้ในนั้นไปเลย เวลาเรียกใช้งาน Activity ก็ไม่ต้องเขียนอะไรมากมาย


3. งานที่แสดงผลซับซ้อนจนต้องวาดขึ้นมาเองด้วย Canvas

        เมื่อต้องทำงานบางอย่างที่ต้องลงทุนนั่งวาด View ด้วย Canvas ขึ้นมาเอง ซึ่งการวาดด้วย Canvas นั้นจะต้องมีโค้ดคำนวณเต็มไปหมดแน่นอน ดังนั้นการทำเป็น Custom View ก็จะแยกความซับซ้อนของโค้ดที่ว่าให้ไปอยู่ใน Custom View แทน

        ถ้านึกไม่ออกก็ลองดูตัวอย่างจากบทความนี้ก็ได้ เมื่อเจ้าของบล็อกต้องทำ Recycler View กับเส้นประเจ้าปัญหา


4. เพิ่ม Performance ในการทำงานของ View 

        การทำ Custom View สามารถทำให้มีประสิทธิภาพดีขึ้นได้ แต่ทว่าจะมีขั้นตอนที่วุ่นวายไปหน่อย ดังนั้นเจ้าของบล็อกคงจะยังไม่ขอพูดถึง แต่ควรรู้ว่ามันสามารถทำให้ Performance ดีขึ้นได้ด้วยนะ (ถ้าขยันและมีเวลามากพอ)

สรุป

        Custom View นั้นถือเป็น Best Practice อย่างหนึ่งของการทำแอปฯที่มี Layout ซับซ้อนเลยก็ว่าได้ เพราะมันจะช่วยให้นักพัฒนาสามารถแยกการทำงานออกเป็นหลายๆส่วนได้โดยไม่ยุ่งเหยิง ซึ่งไม่ใช่แค่ในฝั่งของ Layout XML แต่รวมไปถึงโค้ดฝั่ง Java ด้วยเช่นกัน

        ถึงแม้ว่าอาจจะฟังดูเสียเวลาในการทำ Custom View ไปบ้าง แต่บอกเลยว่าจากข้อดีต่างๆของการทำ Custom View แล้ว เจ้าของบล็อกคิดว่าเป็นสิ่งที่นักพัฒนาน่าจะลองเอาไปใช้ดูบ้างนะ ส่วนการสร้าง Custom View นั้นทำยังไง สามารถอ่านต่อได้ใน สวัสดี Custom View สุดที่รัก ตอนที่ 2




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

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