iPhone Programming VIII: Tabbar

ว่าจะเขียนเรื่องการใช้งาน UITabbar มานานนะ ยังไม่มีโอกาสสักที วันนี้วันนี้เขียน tutorial เล็กๆสักอันละกัน
จะว่าไปแล้ว iPhone App หลายตัวที่เห็นๆกันก็มักจะมีหลายๆ view เสมอ น้อยมากที่จะมีแค่ view เดียวหรือสอง และที่เห็นได้บ่อยๆก็คือการใช้ Navigation Controller และ Tabbar สำหรับวันนี้เราจะทำความเข้าใจเกี่ยวกับ UITabbar ครับว่ามันใช้ยังไง และส่วนประกอบต่างๆนั้นประกอบไปด้วยอะไร

Start

เริ่มจากสร้างโปรเจคก่อนเลยครับ อันดับแรกโปรเจคที่เราจะสร้างวันนี้ เราจะใช้ template แบบ Tabbar ดังรูปครับ

1

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

2

ยังไม่ต้องทำอะไร ลอง compile & run เล่นๆเลยครับ ก็จะเห็นว่า นี่ไง Tabbar โผล่มาให้ทันที

3

ง่ายไม๊ครับ ? มันก็คงจะง่ายอะนะครับ ถ้าหากว่า เราใช้แค่ 2 view เอาละ ต่อไปเราจะเข้าใจ Tabbar แบบลึกซึ้งกันดีกว่า ว่าจริงๆแล้ว มีอะไรต้องเข้าใจบ้าง

Tabbar

เอาละครับ ก่อนที่จำทำการใดๆ เราควรจะรู้ในแต่ละส่วนก่อนว่า Tabbar นี่มันประกอบไปด้วยส่วนใดบ้าง เราต้องเข้าใจก่อนนะครับว่า การที่เราสร้างโปรเจคแบบ tabbar นั้น apple เค้าได้ทำอะไรมาให้เรามั่ง

อันดับแรกนะครับ โปรเจคของเราจะมี 2 view นั่นคือ FirstView กับ SecondView แต่ทั้งสองอย่างนี้ไม่เหมือนกันครับ

  • FirstView นี้จะมีแค่ .h และ .m โดยที่ไม่มี .xib
  • Second นี้จะมีแค่ .xib

จริงๆแล้วจุดประสงค์ของ template นี้แค่ต้องการให้รู้ว่า เราสามารถใช้ tabbar โดยที่แต่ละ view นั้น

  • สามารถเป็นเฉพาะ .xib
  • หรือ แบบมีแต่ code
  • หรือแม้กระทั่งแบบ ที่มีทั้ง code และ interface

เอาละครับต่อไป

4

ดูจากรูป อธิบายตามหมายเลขนะครับ

จุดที่ 1. จะเห็นว่ามี Tabbar Controller นะครับ ประกอบไปด้วย ส่วนย่อยๆอีก

  • Tab Bar เป็นส่วนของตัวควบคุม
  • First View Controller
  • Second View Controller

จุดที่ 2.  ตรงนี้นะครับจะเห็นว่าผมเลือกไปยัง First View ถ้าหากดูที่ inspector ( จุดที่ 3 ) ตามเส้นสีแดงจะเห็นว่า Class นั้นเป็น FirstViewController  และถ้าดูต่อไปยัง จุดที่ 4 ก็จะเห็น .h .m ของ FirstViewController ตรงนี้จะสังเกตุเห็นว่า FirstViewController นั้นไม่มี .xib เหมือนที่ผมได้บอกไปตั้งแต่แรกครับว่า เค้าให้เราใช้ Main นี่เหละเป็นส่วน interface ของ firstview  จุดที่ 5 จะเห็นว่า SecondView นั้นมีแค่ .xib

และถ้ากดไปที่ SecondView นะครับจะเห็นหน้าตาแบบนี้ครับ

5

จะเห็นว่า ใน inspector ได้ถูกตั้งค่า NIB Name ให้เป็น SecondView และถ้าสังเกตดูดีๆ จะที่ขีดเส้นไว้ครับ ว่า First กับ Second นั้นเป็น View คนละแบบกัน

  • Tab แรก (Fisrt) นั้นเป็น FirstViewController
  • Tab สอง (Second) นั้นเป็น UIViewController

มาถึงจุดนี้อาจจะงง ?

Next, add new tabbar

เพื่อความเข้าใจ สร้าง tab ที่ 3 กันดีกว่า ดูรูปเลยครับ

6

ก็เป็นอันว่าได้ tabbar มาเพ่ิมละ แต่ว่ามันยังจะใช้ไม่ได้ครับ ลำดับต่อไป เราจะ Add Class เข้ามาครับ โดยการ click ขวาแล้วก็เลือก Add new file ครับ แล้วก็เลือกตามรูป

7

หลังจากนั้นก็ตั้งชื่อครับ แล้วเราจะได้ File มาทั้งหมด 3 files ด้วยกันนั่นก็คือ .h .m .xib  ในตัวอย่างนี้ผมตั้งชื่อว่า third แล้วกันนะครับ ต่อไปครับเราจะเขียนโปรแกรมง่ายๆใน view นี้กัน โดยที่โปรแกรมทำงาน ง่ายๆครับคือ กดปุ่ม แล้ว ก็คำว่า Hello โผล่ขึ้นมา

เอาละครับดูที่ Class กันก่อน

ลำดับต่อไปดูที่ implement ครับ

ไม่ซับซ้อนอะไรนะครับ แล้วก็เปิด ThirdView.xib เพื่อสร้าง button และ label พร้อมกับเชื่อม interface ให้เข้ากับ code

8

ณ ตอนนี้ เราก็ได้เขียนโปรแกรมในส่วนของ Third View เสร็จเรียบร้อยแล้ว

**** จากตรงนี้เองจะเห็นว่า **** ThirdView นั้นสามารถแยกเขียนได้  เราไม่ได้ไปทำอะไรกับ FirstView และ SecondView เลย มันเป็นข้อดีมากๆครับ ที่เราสามารถจะแบ่งในแต่ละ ส่วน ออกจากกันได้

เอาละครับต่อไป เราจะทำในสิ่งสุดท้าย นั่นก็คือ ทำให้กด Tab แล้วมันโหลด ThridView ขึ้นมานั่นเอง เรากลับไปยัง MainWindow.xib ครับ เราก็กดไปที่ tabbar แล้วก็เลือก thirdView  ดังรูป

9

และในส่วนของ Class Identity ให้เปลี่ยนเป็น ThirdView นะครับไม่งั้นเวลา run มันจะ crash

ถ้าเรียบร้อยแล้วก็จะเห็นแบบนี้ครับ

10

ลอง Compile แล้ว run ดูครับ เท่านี้ก็เรียบร้อยครับ

11

ถ้าใครอยากจะใส่รูปลงไปใน tab ก็ให้สร้าง ไฟล์ .png ขนาด 28×28 ( จะกว้างยาวพอดี ) แล้วก็กำหนดให้เป็น transparent ครับ แล้วก็ใช้สีดำ ในการ วาด

แล้วเราก็เพ่ิมรูปเข้ามายังโปรเจคของเรา แล้วก็เปลี่ยน  icon ดังในรูปแบบนี้ครับ

12

เท่านี้ก็เรียบร้อยครับ

สรุปว่า ที่เราได้ทำไปทั้งหมดนั้น เราได้ลองใช้ tabbar ไปทั้งหมด 3 แบบ สิ่งที่ผมจะแนะนำก็คือ

1. ถ้าหากเราต้องการจะสร้าง tabbar  ที่หน้า view มีการตอบโต้ อย่างเช่นการกดปุ่ม อะไรทำนองนี้ก็ควรจะ add view controller เข้ามาแบบที่เราได้ทำกัน
2. ถ้าหน้าที่เราต้องการมีแค่การแสดง info เช่นหน้า about เราแค่สร้างไฟล์ .xib ขึ้นมาเฉยๆ ก็ได้ครับ

ถ้าหาก งง ตรงไหน อ่านไม่เข้าใจ มีคำติชม ก็เม้นกันได้ครับ

One thought on “iPhone Programming VIII: Tabbar”

  1. มีข้อสงสัยครับ

    ผมเห็น app ต่างๆส่วนใหญ่จะเป้น tabbar + navigationbar รวมกัน อย่างนี้เราจะต้องสร้าง app จาก tabbar-based app หรือ navigation-based อันไหนครับ แล้วจะเอาอีกชนิดมาใส่ยังไงครับ

    ผมลองทำจาก tabbar app แล้วพยายามเอา navigationbar ไปใ่ส่แล้วงงมากครับ

    ขอบคุณครับ

Leave a Reply