วันพฤหัสบดีที่ 3 มกราคม พ.ศ. 2556

Xcode Programming XVI : Story Board ( Part I )

ก่อนอื่นก็ต้องขอกล่าวคำว่า "สวัสดีปีใหม่" นะครับ

ไม่น่าเชื่อว่าผมเขียน Blog นี้มาเกือบปีแล้วนะครับ บทความนี้ก็เป็นบทความหลักที่ 16 แล้วด้วย ผมก็ถือว่าไม่มากไม่น้อยเหมือนกันนะครับ ในปีนี้ผมตั้งใจว่าจะพยายามเขียนบทความให้บ่อยขึ้นและพยายามปรับปรุงบทความให้ทันสมัยมากขึ้นนะครับ

สำหรับบทความนี้เราลองมาใช้งาน Story Board กันครับ


ตัวอย่างของ Story Board

Story Board  เป็นความสามารถใหม่ที่มาพร้อมกับ iOS 5 ( ปัจจุบัน iOS 6 ) ที่มาช่วยเหลือในเรื่องของการจัดการส่วนติดต่อกับผู้ใช้ หรือที่เราเรียกกันว่า User Interface นั่นเอง เรามาดูข้อดีของการใช้งาน Story Board กันก่อนนะครับว่ามันมีอะไรที่ดีกว่าการสร้าง User Interface แบบเดิมบ้าง



  1. สามารถมองภาพรวมของโปรแกรมได้ชัดเจน และสามารถมองเห็นความสัมพันธ์ของแต่ละ Interface ได้ ซึ่งโดยปกติแล้วต้องไปดูเอาเองใน Code
  2. จัดการการเชื่อมต่อของ Interface ต่างๆได้ง่าย โดยไม่ต้องไปเรียกใช้งานผ่าน Method ในส่วนของ Code
  3. รวมการจัดการเกี่ยวกับ User Interface ไว้ใน File เดียวซึ่งทำให้การทำงานสะดวกเอามากๆ จากปกติเราต้องไปเขียน Code สร้างความสัมพันธ์ระหว่าง Interface ในแต่ละ Object แต่ละตัวซึ่งยุ่งยากเอามากๆ
  4.  ทำงานร่วมกันกับ Table View ได้เป็นอย่างดี สามารถจัดการได้ว่าในแต่ละ Cell นั้นมีความสัมพันธ์กับ Interface อื่นๆ อย่างไร
  5. ลดการเขียน Code ลงไปได้มากอย่างเห็นได้ชัด

จากข้อดีด้านบน จะเห็นว่าเราสามารถใช้งานเจ้า Story Board ในโปรแกรมได้เป็นอย่างดี แต่เราไม่สามารถนำ Story Board มาแทนการใช้งาน Interface Builder ได้ทั้งหมดมันยังมีบางอย่างที่ตัว Story Board เองไม่สามารถทำงานทดแทนได้ และการที่เราจะใช้งาน Story Board ให้มีประสิทธิภาพนั้น ควรจะมี Monitor ที่มีขนาดใหญ่พอสมควร ลองคิดดูว่าเราอยากจะมองภาพรวมของ Interface โปรแกรมซักโปรแกรมที่เราจะนำไปใช้งานกับ iPad หน้าจอ 14" ปกติคงไม่ใช่ตัวเลือกที่ดีนัก การที่เรามีหน้าจอที่ใหญ่ขึ้นก็จะช่วยให้เราทำงานกับ Story Board ได้สะดวกมากขึ้นนั่นเอง เอาละครับ เราลองมาเริ่มใช้งานกันเลยครับ

  • New Project >> SingleView Application >> ตั้งชื่อและเลือก Use Storyboard และ Use Automatic Reference Counting


  • เลือก MainStoryboard.storyboard จะเห็นหน้าจอดังนี้


สังเกตได้ว่ามันเหมือน Interface Builder เดิมแทบทุกอย่างเลย นอกเสียจากว่ามีลูกศรอะไรมาชี้อยู่ด้านซ้ายของหน้าจอแรก ซึ่งในแต่ละหน้าจอเราจะเรียกมันว่า Scene นะครับ และอีกอย่างหนึ่งก็คือ File MainWindow.xib ไม่มีอยู่ใน Project แล้วนะครับ


  • เพิ่ม Object ต่างๆ ลงไปใน Scene ตามภาพ


สัง Sidebar ด้านซ้ายมือของ Scene จะเห็นเป็นแบบนี้


ความจริงแล้วถึงส่วนนี้ เรายังไม่เห็นความแตกต่างที่ชัดเจนระหว่าง Story Board กับ Interface Builder  เราจะมาดูในส่วนของการทำงานภายใน Code ก่อนครับว่ามีการเรียกใช้งาน Story Board อย่างไร

AppDelegate.h



AppDelegate.m



สังเกตว่าจะยกเลิกการเรียกใช้งาน Class ViewController ทั้งหมดออกไปนะครับ แต่ไม่เห็นว่าจะมีส่วนที่เรียกใช้งาน Story Board ตรงไหน ให้เราลองไปดูที่ File .plist ครับ


จากบรรทัดที่ขีดเส้นใต้เอาไว้ นั่นหมายความว่า Story Board ถูกเรียกใช้งานผ่าน plist นั่นเองครับ


  • ลาก Tab Bar Controller มาวางใน Work Space แล้วสังเกตผล


มาถึงตรงส่วนนี้น่าจะเข้าใจกันได้ไม่ยากนะครับ เพราะได้มีการเพิ่ม Scene มาคือ Tab Bar Controller ซึ่งตัว Tab Bar ชี้ไปยัง View Controller ทั้ง 2 ตามจำนวน Tab Bar นั่นเองครับ โดยเส้นที่เห็นนั้นคือเส้นที่แสดงความสัมพันธ์ของ Scene นั่นเอง

  • เลือก Tab Bar Controller >> Attributes Inspector >> เลือกเครื่องหมายถูกที่ Is Initial View Controller  



สังเกตว่าลูกศรที่ชี้เข้าหา View Controller อันแรก ได้ถูกย้ายมาชี้ใน Tab Bar Controller แล้วนะครับ นั่นหมายความว่าเป็นการตั้งค่าให้ Tab Bar Controller แสดงผลเป็น View แรกของโปรแกรมนั่นเองครับ


ให้เรา Build & Run ดูครับว่าจะเกิดอะไรขึ้น

  • เลือก View Controller Item 1 แล้วกด Delete เพื่อทำการลบทิ้ง
  • เพิ่ม Object Table View Controller เข้าไปยัง Work Space
  • เลือก Table View Controller >> Menu Bar >> Editor >> Embed In >> Navigation Controller
## Note ##

ในการใช้คำสั่ง Embed In นั้นจริงๆ แล้วเราสามารถลาก Navigation Controller มาวางไว้ใน Work Space แล้วค่อยเชื่อมความสัมพันธ์กับ Table View ที่เราสร้างขึ้นไว้ก็ได้ แต่มันต้องทำงานถึง 2 ขั้นตอน ดังนั้นการใช้ Embed In จะสะดวกมากกว่าครับ

ถ้าทำตามขึ้นตอนอย่างถูกต้องจะได้รูปแบบดังนี้ครับ


พอจะเข้าใจ Story Board แล้วใช่ไหมครับ

View แรกจะเริ่มต้นที่ Tab Bar Controller ซึ่งมีความสัมพันธ์อยู่กับ View Controller Item 2 ซึ่งนั่นก็คือ View นี้จะถูกแสดงเป็น View แรกเมื่อทำการ Run โปรแกรมนั่นเอง

และยังมี View ที่เราใส่ Object UI ต่างๆเข้าไป รวมไปถึง Table View ที่มี Navigation Controller ชี้อยู่ซึ่งทั้ง 2 View นี้ยังไม่ได้ถูกใช้งานในโปรแกรม

ถ้าใครเข้าใจตามข้อความข้างบนแล้ว แปลว่าคุณเข้าใจการทำงานของ Story Board ในเบื้องต้นแล้วครับ


บทความนี้ขอจบไว้เท่านี้ก่อนนะครับ สำหรับบทความถัดไปจะพยายามทำให้เสร็จภายใน 1-2 วันนี้นะครับ

ขอบคุณทุกคนที่ยังติดตามบทความของผมอยู่นะครับ




1 ความคิดเห็น:

  1. ขอบคุณที่แบ่งปันครับ เป็นบทความที่เข้าใจง่าย ขอติดตามต่อไปครับ

    ตอบลบ