Tag Archives: Swift

Custom UI and Easy to customize

เมื่อเขียนโปรแกรม ios ไปเรื่อยๆสักระยะหนึ่ง สิ่งหนึ่งที่โปรแกรมเมอร์แบบเราๆ จะต้องเจอแน่ๆ นั่นก็คือ custom ui หรือการปรับแต่งหน้าตาของโปรแกรม ให้มันดู cool นั่นเอง .. ก็แน่นอนว่า วิธีที่ง่ายสุดในแต่งปรับแต่งนั่นก็คือ ให้คนอื่นทำให้เรา (แต่มันคงเป็นไปได้ยาก ใช่ม่ะ) อะๆๆ งั้นมาลองวิธีที่ง่ายกว่านั้น และนั่นก็คือ การไปใช้ ui control ของคนอื่นที่เค้าเขียนไว้แล้ว (แน่นอนละใครจะอยากไปเขียนเองให้เหนื่อย ถูกม่ะ) อย่างในเวป cocoacontrol.com ก็มีหลายอย่างให้เลือกใช้งาน

แต่ถ้ามันไม่มีละ ? (นั่นไง ซวยละ) .. สุดท้ายมันก็หนีไม่พ้นที่จะต้องเขียน custom control ถูกป่ะ ?

ผมเชื่อว่าหลายๆคน คงจะเคย custom ui กันมาแล้วแน่นอน อย่างเช่น UIButton หรือ UITableViewCell ใช่ม่ะ ถ้าใครยังไม่เคยก็คงต้องบอกว่าคุณยังไม่ใช่ iOS Dev ที่แท้จริง .. อันที่จริงการ ปรับแต่ง หรือสร้าง  control พวกนี้มันก็ไม่ใช่เรื่องยากอะไรเท่าไหร่ แต่ว่า พวก control ที่เราสร้างขึ้นมา มันมักจะปรับแต่งไม่ง่าย standard ui ที่มาพร้อมกับ XCode  เพราะว่า ui เหล่านั้น แค่ลากวาง แล้วก็กดเปลี่ยน property ใน inspector เป็นอันเสร็จพิธีเลยถูกต้องม่ะ

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

button

แต่ถ้าหากเป็น ui control ที่เราสร้างขึ้นมาเองละ ?

เช่น สมมติว่า เขียน control ที่เป็น ปุ่มแบบโค้งมน เราก็อาจจะเขียน control ได้ประมาณนี้

เมื่อนำไปใช้ใน Storyboard หลังจากลาก Button วางแล้ว ก็ต้องเปลี่ยนให้เป็นคลาสที่เราได้สร้างไว้

button

ถ้าให้โปรแกรมทำงาน  มันก็จะได้แบบนี้

round_button

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

เราสามารถที่จะทำให้มันมี property ปรับง่ายๆเหมือนอย่าง standard ได้ไหม ?

ผมบอกเลยว่า “ได้”

วิธีการนั้นไม่ยากเลย แค่ใช้ IBDesignable และ IBInspector เข้ามาช่วย

ซึ่งโค้ดที่ปรับใหม่ ก็จะมีลักษณะแบบนี้

เมื่อพิจารณาจากโค้ด เราได้บอกว่า คลาส RoundButton นั้นรองรับ Interface Builder และ มี inspector ทั้งหมด 3 ตัวที่สามารถปรับแต่งได้ นั่นก็คือ Border Color , Border Width และ Corner Radius

ซึ่งถ้าหากเราใช้คลาสที่สร้างขึ้นใหม่นี้ ก็จะเห็นว่า จากที่มันแสดงผลใน storyboard แบบไม่มีเส้นขอบโค้งๆ แต่ตอนนี้มันแสดงได้แล้ว

ok_button

และถ้าเข้าไปดูใน inspector ก็จะเห็นว่า มี property ใหม่เพิ่มขึ้นมา  3 อย่างด้วยกัน

prop

เป็นไง มันช่าง F**King DAMN Cool ไหมละ ?

คราวนี้อยากจะปรับอะไรก็ทำใน Storyboard ได้เลยทันที ไม่ต้องไปแก้ code ให้มันเสียเวลา

Swift Programming ตอนที่ 11 : Introduction to iOS Programming

วันนี้เราจะเรียนรู้ และทำความเข้าใจ basic concept ต่างๆที่ใช้ในการเขียนโปรแกรม iOS  เช่น MCV ,  Delegate , Action-Target และการทำงานของ  Window