iPhone Programming V : Multiple View

ในครั้งที่แล้วเราได้ทดลองใช้งาน Table View กันไปบ้างแล้ว จริงๆผมว่าจะเขียน table view ต่อนะ แต่ว่าเห็นหลายคนที่ตาม twitter ผมบอกว่า อยากให้เขียนเกี่ยวกับ Project Template ต่างๆว่ามันใช้งานอย่างไร ก็เอาเป็นว่า วันนี้ผมจะพาทุกท่านไปเขียน iPhone โดยเริ่มจาก Project  ที่ไม่ใช่แบบ View Base App กันดีไหม ? จะได้เป็นการเข้าใจ การทำงานของ View Controller เพิ่มขึ้นไปด้วย

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

overall

ดูจากหน้าตา(กระแต)คร่าวๆ คิดว่าคงพอจะทำให้เริ่มอยากลงมือทำกันเลยทีเดียว แต่ช้าก่อน …. อธิบายโปรแกรมกันคร่าวๆ กันก่อนละกัน โปรแกรมที่เราจะเขียนก็ไม่มีอะไรซับซ้อนครับ นอกจาก กดปุ่ม First ก็จะเห็น View อันแรกของเรา และเมื่อ กด Second มันก็จะสลับเอาอีก View ขึ้นมา เท่านั้นเอง

Let’s Start

อย่างที่เกริ่นไว้ตั้งแต่ตอนแรกแล้วครับว่า เราจะลองเขียนโปรแกรมโดยใช้ Template อื่นๆนอกเหนือจาก View Based Application. เราจะได้ลองมาใช้งาน Windows Based Application กัน ก็ก่อนอื่นเราก็สร้างโปรเจคแบบ Windows Based Application อย่างในรูป

winbased

แล้วเราก็ตั้งชื่อตามใจชอบครับ ในตัวอย่างนี้ผมตั้งชื่อโปรเจคผมว่า MultiView เป็นต้น เมื่อเราสร้างโปรเจคเรียบร้อยแล้ว จะเห็นหน้าตา Project ประมาณดังรูป

newproject

จะสังเกตว่า File เริ่มต้นที่ XCode ให้มานั้นค่อนข้างจะน้อยทีเดียว และสิ่งที่ขาดหายไปจากการสร้างโปรเจคแบบ View Based Application นั่นก็คือ File ที่มีชื่อประมาณว่า xxxxViewController.h และ xxxxViewController.m นั่นเอง และในโปรแกรมที่เราจะเขียนขึ้นเราก็จะเขียน view controller ของเราเอง

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

relation

ดังนั้นแล้ว สิ่งที่เราจะทำต่อไปก็คือ เพิ่ม View Controller เข้าไป

1. อย่างแรกก็คือให้เราเพิ่ม Class เข้าไปยังโปรเจค โดย Class ที่เราจะเพ่ิมเข้าไปก็คือ UIViewController นั่นเหละครับ ดังตัวอย่างรูปข้างล่าง

newclass

แล้วก็ตั้งชื่อครับ อย่างตัวอย่างนี้ผมตั้งชื่อว่า MultiviewController ก็เป็นอันเรียบร้อย

2. เมื่อเรามี View Controller ที่เอาไว้จัดการ View แล้ว สิ่งที่เราต้องการเพิ่มเติมก็คือ ตัว content view ที่ใช้งานจริงๆ ในกรณีนี้ผมต้องการ 2 อันที่มีหน้าตาคล้ายๆกัน ให้ชื่อว่า First กับ Second ก็แล้วกันนะครับ ซึ่ง First กับ Second นี้เราอยากจะให้ มันเป็นคนละ Xib ด้วยเลย  ดังนั้นเราจะเพิ่ม class เข้าไป และ class ที่เราจะเพ่ิมเข้าไปก็คือ UIViewController ( เพื่อความง่ายในการ load view จาก xib  ) โดยตั้งชื่อว่า FirstView กับ SecondView

สรุปตอนนี้ เราได้เพิ่ม Class เข้ามาทั้งหมด 3 class ด้วยกัน โดย ทั้งหมดนั้นเป็น UIViewController หมดเลย ซึ่งประกอบไปด้วย

  • MultiViewController
    เป็นตัวจัดการ Content View ซึ่งนั่นก็คือ FirstView กับ SecondView
  • FirstView และ SecondView
    เป็น Content View ที่ประกอบไปด้วย control อื่นๆเช่น image , button เป็นต้น

3. เมื่อเรามี Class ต่างๆแล้ว ต่อไปเราก็จะเพิ่ม Xib File เข้ามายังโปรเจค ก็ทำคล้ายกับการเพ่ิม class น่ันเหละครับ แต่เราก็เลือก ชนิดของ File ให้เป็น View Xib เหมือนดังรูป

xib

โดยให้ชื่อว่า First กับ Second เพื่อที่จะได้รู้ว่า xib  นี้เป็นของ class ไหน

Design Interface

เมื่อเรามี class ต่างๆแล้ว ลำดับต่อไป เราก็จะออกแบบหน้าตาโปรแกรม ของเราครับ อันดับแรก เราจะออกแบบหน้าตา Xib แรก ของเราก่อนนั่นก็คือ MainWindow.xib หน้าตาออกมาประมาณนี้ครับ

mainxib

ผมได้ใส่ Segment Control เข้าไป เพื่อที่ว่า จะได้กด สลับระหว่าง First กับ Second ครับ
และก็ต่อด้วย First.xib ครับ

firstxib

ส่วนหน้าตาของ Second.xib ก็อาจจะเป็นแบบนี้ครับ

secondxib

จริงๆแล้วไม่จำเป็นต้อง ออกแบบหน้าตา แบบนี้ก็ได้นะครับ

Code

ในส่วนของการเขียนโปรแกรมนั้น ถ้าหากดูจากแผนภาพที่ 4 ก็จะเห็นว่า AppDelegate นั้นมี ViewController ฉนั้นแล้ว ก็เดาได้เลยครับว่า เราจะเพิ่ม View Controller เข้าไปยัง AppDelegate มาดู Code ส่วน MultiViewAppDelegate.h กันเลยครับ

ดูจาก code ข้างบน ก็ได้เพิ่ม View Controller เข้าไปครับ นั่นก็คือ MultiViewController นั่นเอง ส่วน implement นั้นก็มีแก้ไขนิดหน่อยครับ โดยเราจะแก้ method นี้ครับ

เราได้เพิ่มไปแค่ 1 บรรทัดครับ นั่นก็คือ addSubview: นั่นเอง เพื่อที่จะได้ให้ MultiViewController เป็นตัวควบคุม view อื่นๆให้กับ AppDelegate นั่นเอง

ยังเหลือ ส่วนสำคัญที่เราต้องเขียนเพิ่มนั่นก็คือ View Controller ของเรานั่นเอง เอาละครับ เปิด MultiViewController.h ขึ้นมาแล้วก็แก้ไข Code ให้เป็นแบบนี้ครับ

จาก code ข้างบนจะเห็นว่า controller ของเรา ประกอบไปด้วย FisrtView กับ SecondView และเราก็มี method ที่ชื่อว่า changeView เพื่อที่จะทำหน้าที่สลับ view นั่นเองครับ

สุดท้ายแล้วครับ เราก็เขียนส่วนของ implement ครับ

เราจะมาดู viewDidload กันก่อนละกันนะครับ อธิบายคร่าวๆก็คือ เราสร้าง FirstView ด้วยการโหลด Xib และหลังจากนั้นก็ให้ FirstView ที่เราได้สร้าง กลายมาเป็น subview ของ MultiViewController อาจจะสงสัยว่าแล้วไม่โหลด SecondView หรืออย่างไร จริงๆแล้วก็โหลดได้ครับ แต่ที่ยังไม่โหลดตอนนี้ ก็เพราะว่า เราต้องการจะประหยัดหน่วยความจำ ค่อยไปโหลดทีหลัง เมื่อจำเป็นต้องใช้งาน

เอาละครับ มาดูกันต่อในส่วนของ changeViews ครับ
ในส่วนนี้นั้น คร่าวๆก็คือ เราตรวจสอบว่า View ไหนแสดงผลอยู่ แล้วหลังจากนั้นก็ให้  View นั้นได้ถูกนำออกไป (  removeFromSuperview ) แล้วก็โหลด view ใหม่เข้ามาแทน และจะเห็นว่า มาโหลด SecondView ทีหลังครับ

Link With Interface

หลังจากเขียนโปรแกรมกันคร่าวๆ แล้วลำดับต่อไปก็คือ การเชื่อม interface ให้เข้ากับ code นั่นเอง เราก็ย้อนกลับไปยัง interface builder ครับ โดยเราจะเปิด MainMenu.xib ขึ้นมาก่อน

  • ให้ลาก View Controller เข้ามายัง Document Windows ของเราครับ
  • หลังจากนั้น set class ใน attribute windows ให้เป็น MultiViewController ดูรูปประกอบครับ

multiinterface

และลำดับสุดท้ายสำหรับ MainMenu.xib นี้ เราจะเชื่อม Segment Control เข้ากับ changeView: ครับ ดูรูปประกอบ

changeview

เสร็จเรียบร้อย เราก็เปิด xib ตัวต่อไปครับ นั่นก็คือ FirstView.xib สิ่งที่เราจะทำก็คือ เราจะเปลี่ยน File’s Owner ให้เป็น FirstView ครับ ดูรูปประกอบ

firstview

แล้วก็เปิด SecondView.xib ขึ้นมาแล้วก็เปลี่ยน File’s Owner ให้เป็น SecondView

secondview

เพียงเท่านี้ก็เป็นอันเสร็จเรียบร้อย ลอง Compile ดูครับ ว่าได้ผลลัพธ์เป็นอย่างไร หรือ โหลดตัวอย่างที่ผมทำไว้ไปลองเล่นได้ครับ ใครสงสัยอะไร หรือติชมก็เม้นกันได้ครับ

ไว้เจอกันครั้งหน้าครับ

Download Project Multiple View

6 thoughts on “iPhone Programming V : Multiple View”

  1. ทำไปทำมา เข้าใจแล้วก็ทำได้แล้วครับ ขอบคุณครับ 😀

  2. ผมลองไล่ดูแล้ว code น่าจะเหมือนกันหมดเลยนะครับ แต่ต่างกันตรงที่รูปนี้ครับ
    http://skitch.com/yeawdk/nnetx/picture-1
    ข้างในโปรเจ็คที่ download มาจากเว็บ ผมสงสัยว่าทำไม View ในรูปถึงได้เป็นแบบทึบครับ? ไม่สามารถลบ หรือแก้ไขอะไรมันได้เลย
    ส่วนโปรเจ็คที่ผมลองทำตามนั้น View ตรงนี้มันไม่ทึบครับ มันยังสามารถแก้ไขได้ครับ ต้องไปตั้งค่าตรงไหนเหรอครับ ถึงจะให้ทึบแบบตัวอย่างที่ download มา

  3. ลอง Download File ไปเปรียบเทียบดูก่อนครับ

    MultiView[38862:20b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] was unable to load a nib named “FirstView”‘

    ถ้าเป็น error แบบนี้แปลตามตัว ก็ได้ ว่าเกิดข้อผิดพลาดใน UIViewController ไม่สามารถเรียก loadViewFromNibNamed:bundle: ได้เพราะ .xib File ชื่อ FirstView อ่านไม่ได้

    นั่นก็แปลว่า อาจจะไม่มีไฟล์ FirstView.xib นั่นเอง ( ถ้าสร้างเองเป็นชื่ออื่นก็ลองดูครับว่า ได้เรียก .xib ของตัวเองถูกต้องหรือเปล่า )

  4. ลองทำตามแล้วเจอปัญหานี้ครับ
    2009-10-05 11:30:03.837 MultiView[38862:20b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] was unable to load a nib named “FirstView”‘
    2009-10-07 15:37:03.839 MultiView[38862:20b] Stack: (

    ผมพลาดลืมทำตรงไหนหรือเปล่าครับ?

Leave a Reply