[iOS Dev] View Hierarchy, Drawing (Shared Blog)

สำหรับ Entry นี้จะพูดถึงส่วนของ View ใน iPhone นะครับ ซึ่งอยู่ใน Lecture ที่ 5 ของ stanford course ซึ่งจะกล่าวถึงคลาส UIView ของ iPhone, การใช้เครื่องมือสำหรับการวาดอย่างง่ายครับ
ไม่แน่ใจว่ามันจะก้าวกระโดดไปนิดรึเปล่า เอาเป็นว่า Entry นี้ผมจะหลักเลี่ยงการโค้ดนะครับ เริ่มกันที่ View นะครับ
CS193P Lecture 5 View Animation (Old Slide but something It's work.)
ส่วนที่เป็น View คือส่วนที่เป็นสี่เหลี่ยมผืนผ้าตรงหน้าจอนั่นแหละครับ ทั้งหมดเลย ซึ่งภายใน View จะมีการทำงาน 2 อย่างอยู่ด้วยกัน คือ ส่วนของ Content และ Event
Content ก็คือตัวอักษร, รูปภาพหรือสิ่งที่ถูกวาดขึ้นบนจอภาพนั่นเองครับ ใน View แต่ละหน้าจะมี View หลักตัวหนึ่ง(เทียบตาม Tree ก็เป็น Root) เราเรียกว่า Superview ครับ ภายใน Superview ก็จะมี View ย่อยๆ เรียกว่า Subview ถ้านึกไม่ออกว่าเป็นไง ก็ลองนึกถึงกระดานปักหมุด(Superview)ที่มีกระดาษ(subview)แปะอยู่แล้วกันครับ ส่วน Event คือเหตุการณ์ที่เกิดขึ้นบนหน้าจอนั่นเองครับ ไม่ว่าจะเป็นการ Tab, การ Scroll ฯลฯ ทั้งหมดที่จะสั่งการให้ iPhone ทำงานได้ ถือเป็น Event หมด
เนื่องจาก View เป็นการวาดรูปภาพขึ้นมาบนส่วนของ Content ดังนั้นโครงสร้างต่างๆที่เกี่ยวข้องกับ View ก็เป็นเกี่ยวกับการวาดเช่นกัน ได้แก่ CGPoint หมายถึง ตำแหน่งที่อยู่(x,y) ,CGSize หมายถึง ขนาด(Width, Height) และ CGRect หมายถึงกรอบ(CGPoint, CGSize) ลักษณะ Coordinate ของ iPhone จะไม่เหมือนกับพิกัดการวาดรูปทั่วๆไปครับ จุด origin จะอยู่ที่มุมซ้ายบน (จากปกติมักจะอยู่ซ้ายล่าง)

เกี่ยวกับการวาดนั้น การอ้างอิงพิกัดหรือพ้ืนที่สำหรับวาด จะมีอยู่ 2 แบบ คืออ้างอิงจาก Frame และอ้างอิงจาก Bound ทั้งสองแบบแตกต่างกันตรงที่ “มันเป็นตำแหน่งเมื่อเทียบกับขอบกระดานปักหมุกหรือเทียบกับขอบกระดาษที่แปะ” ถ้า Frame คือเมื่อเทียบกับขอบกระดานปักหมุด แต่ถ้า Bound ก็เทียบกับกระดาษบนกระดานปักหมุด ถ้ายังไม่เข้าใจลองดูที่สไลด์ที่ 19 ก็อธิบายได้ชัดเจนดีครับ มีคำแนะนำอยู่นิดหน่อย (อยู่ในสไลด์ที่ 20) เกี่ยวกับการใช้งาน Frame และ Bound
สิ่งที่อยู่เหนือกว่า Superview คือ Window แต่ละ App จะมี 1 Window และ Window มักจะถูกจัดการมาให้เราใน template เรียบร้อยแล้ว
ส่วนเรื่องของการโค้ด มีตัวอย่างอยู่ใน สไลด์ที่ 25-27 นะครับ ไม่ขอเอามาเขียนซ้ำนะครับ แล้วก็คิดว่าโค้ดไม่น่าจะยากอะไรด้วย แต่ถ้าสงสัยก็โพสถามเอาละกันนะครับ
ต่อไปเรื่องของการ Drawing ครับ
การ Drawing ลงไปบน Content View นั่น จะทำโดยการ override คำสั่งการวาดไปในฟังก์ชั่น Drawrect ครับ แต่การสั่งให้ Draw จะไม่ได้ใช้วิธีการเรียกฟังก์ชั่น Drawrect ครับ แต่จะใช้คำสั่ง setNeedDisplay แทน งงมั้ยครับ? ลักษณะนี้เรียกว่า “Lazy Loading” ครับ view ของเราจะไม่ถูกวาดอยู่ตลอดเวลา แต่วาด(ตามที่สั่งใน drawRect)แค่เฉพาะตอนที่สั่ง (ว่า setNeedDisplay) เท่านั้น




เครื่องมือเกี่ยวกับการวาด จะเป็น Core Graphics และ Quartz 2D ทั้งสองตัวที่กล่าวถึงเป็น Graphic Library บน Cocoa ครับ ใช้โดย Library นี้เป็น C-Base API นะครับ ไม่ใช่ Objective-C ส่วนวิธีการวาดอย่างละเอียดนั้น คงไม่ขอพูดถึงในที่นี้ เพราะจะยาวจนเกินไปครับ (รวมทั้งอยากหลีกเลี่ยงการ Coding ใน Entry นี้ไปก่อนด้วย) คงจะมาอัพเดตในคราวหน้า แต่ถ้าสนใจก็ดูในสไลด์ก่อนก็ได้ครับ ใน Entry นี้ไว้เท่านี้ก่อนครับ
** Slide เวอร์ชั่นล่าสุดหาได้จาก Course CS193P ใน iTunes U เหมือนเดิมนะครับ

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น