iPhone Programming VIIII : Table View ( Part 4) Custom Cell

เห็นถามกันมาหลายคนครับ โปรแกรมหลายๆโปรแกรมใน iphone นั้นมีตารางที่มีทั้ง ปุ่ม ทั้งอะไรมากมาย ยกตัวอย่าง เช่น Setting ที่อยู่ในเครื่องอยู่แล้ว ลองกด เข้าไปดูครับจะเห็นว่า ในแต่ละ cell น้ันมีทั้ง switch on-off ทั้งตัวหนังสือ เค้าทำกันได้ยังไง ? คำตอบคือ Custom Cell ครับ

วันนี้เราจะเขียน custom cell แบบง่ายๆกันครับ เพื่อเป็นแนวทางให้ไปประยุกต์ใช้กันต่อไป เอาละครับ เริ่มจากสร้างโปรเจคแบบ view base กันก่อน อย่างตัวอย่างนี้ผมตั้งชื่อว่า DemoCustomCell ครับ

1

แล้วเราก็ เพิ่ม class ที่ชื่อว่า StudentData เข้าไปยังโปรเจค ส่วน code interface ก็ประมาณนี้ครับ

แล้วก็ส่วน implement ก็ไม่มีอะไรมากครับ

จาก code ข้างบน ผมได้เขียน class ที่ชื่อว่า StudentData เพื่อที่จะเก็บ ชื่อ,เกรด และ รูปภาพ ของนักเรียน
และลำดับต่อไป เราก็ออกแบบหน้าตา interface ของโปรแกรม โดยเพิ่ม ตารางเข้ามา พร้อมทั้ง set delegate และ datasource ให้กับตารางให้เรียบร้อย

1a

หลังจากนั้น ก็มาเขียนส่วนของ code ของ DemoCustomCell กันครับ

จาก code ข้างบน เราประกาศ studentArray เพื่อเอาไว้เก็บรายชื่อนักเรียน และมี IBOutlet ที่เป็น UITableView ไว้แสดงผลครับ

ลำดับต่อไป เราจะเขียนส่วนของ implement ก็แบบนี้ครับ

จากข้างบน ผมได้เพิ่มนักเรียนเข้าไปยัง StudentArray รวมทั้งหมด 4 คนครับ และในส่วนของ table delegate นั้นก็ ได้กำหนดให้ cell นั้นแสดง ชื่อของนักเรียน และเมื่อเราทำการ compile ก็จะได้โปรแกรมแบบนี้ครับ

3

ไม่ยากใช่ไหมครับ ต่อไปเราจะเขียน Custom Cell ครับ

Custom Cell

จากโปรแกรมข้างบน เราจะเห็นว่า ข้อจำกัดของโปรแกรมคือ ในแต่ละ cell นั้นแสดงได้แค่ ตัวหนังสือ เท่านั้นและได้เพียงแค่หนึ่งแถว ถ้าหากเราอยากจะเพิ่ม ให้ cell ของเราแสดงข้อมูลได้มากกว่านี้ เราจะต้องทำ custom cell ครับ เอาละครับ เริ่มกันเลย ก่อนอื่นเราต้องเพิ่ม xib เข้ามายังโปรเจค ครับ ดังรูป ก็ click ขวาเลือก new file แล้วก็เลือกไปที่ Empty XIB ครับ

2

แล้วก็ตั้งชื่อครับ ในตัวอย่างนี้ผมตั้งชื่อ StudentCustomCell.xib ครับ เมื่อเปิด File XIB ขึ้นมาก็จะเห็น เพียงแค่ File’s Owner กับ First Responder หลังจากนั้นให้ลาก UITableViewCell เข้ามายัง Document ของเรา ดังรูปครับ

4

เอาละครับ ก่อนที่เราจะลงมือ ออกแบบหน้าตา Custom Cell ของเรา เราต้องเขียน Class ขึ้นมาก่อน และสำหรับ Custom Cell ที่ผมจะออกแบบนี้ ผมอยากให้ มี

  1. ชื่อของนักเรียน
  2. เกรดของนักเรียน
  3. รูปถ่ายนักเรียน

เอาละครับ ต่อไปเราก็ลงมือเขียน StudentCustomCell Class ของเราเลย โดยการ Add New File อย่างที่เคยทำ นั่นเหละครับ แต่ให้เลือก SubClass  of ให้เป็น UITableViewCell แบบในรูปครับ แล้วก็ตั้งชื่อว่า StudentCustomCell

5

แล้ว code ของ StudentCustomCell.h ก็ได้แบบนี้

ต่อไปก็เขียน implement ได้แบบนี้

ครับเพียงเท่านี้ Class ของเราก็เกือบจะเสร็จละครับ ต่อไปเราก็กลับมายัง interface builder เพื่อที่จะออกแบบหน้าตา interface ของเราและ set link ต่างๆเข้ากับ class ที่เราได้เขียนขึ้นมา

Design Custom Cell

โดยลำดับแรกที่ต้องทำก็คือ เปิด inspector ขึ้นมาแล้วก็ set ให้ UITableViewCell ของเราเป็น Student Custom Cell ดังรูปครับ

6

หลังจากได้เปลี่ยนให้ UITableViewCell เป็น StudentCustomCell แล้ว ก็ออกแบบหน้าตาของโปรแกรม พร้อมกับเชื่อม Outlet ต่างๆให้เรียบร้อยดังรูป

7

Coding

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

  • ประกาศ Custom Cell
  • ออกแบบ Custom Cell

สุดท้ายที่จะทำก็คือ เอามาใช้ครับ วิธีการที่เราจะเอา Custom Cell ของเรามาใช้ ก็ไม่ยากครับ ถ้าสังเกตดีๆ จะเห็น code ส่วนของ table delegate  ตรงนี้

จากตรง code ข้างบน จะเห็นว่า เราได้ประกาศ cell ขึ้นมาให้เป็น UITableViewCell ใช่ไหมครับ ? แล้วเราก็ทำการ alloc แล้วก็ init มัน เอาละ งั้นถ้าหากว่าเราต้องการให้มันเป็น custom cell ทำยังไงละครับ คำตอบก็ไม่ยากเลย ก็คือเราก็ประกาศให้ cell ของเราเป็น custom cell ซะก็เรียบร้อย งั้นเรามาดู code กันเลย

อธิบายจาก ข้างบนนะครับ เราได้ประกาศ cell ให้เป็น StudentCustomCell โดยที่เราได้โหลดจาก StudentCustomCell.XIB ( ตรงส่วนของ for loop เป็นแค่ส่วนที่ใช้หาว่า object ตัวไหนใน xib ที่เป็น StudentCustomCell เท่านั้นเอง )  หลังจากนั้นเราก็ ได้ใส่รูป ใส่ชื่อ ใส่เกรด ให้กับ cell ก็เป็นอันจบ เมื่อ compile & run ก็จะเห็นผลลัพธ์ดังรูปครับ

result1

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

เพียงเท่านี้ก็จะได้ผลลัพธ์เหมือนในรูปครับ
result_done

ลอง Download Code ไป Compile ดูได้ครับ DemoCustomCell

XCode Tip for dummies

สำหรับมือใหม่แล้ว หลายๆคนยังไม่คุ้นกับ XCode กันมากพอ สำหรับวันนี้ผมจะแนะนำส่วนประกอบต่างๆ เพิ่มเติม และ common error ที่พบได้บ่อยๆ พร้อมทั้งวิธีแก้ปัญหาเบื้องต้นสำหรับมือใหม่ ( มือฉมังก็ใช้ได้นะเออ )

เอาละครับ งั้นเริ่มที่ bar ตรงกลางก่อนเลย

bar

ผมไม่รู้ว่าจะเรียกมันว่าอะไร แต่เรียกว่า bar แล้วกันนะครับ เอาละครับไปดูกันว่าแต่ละ bar นั้นทำหน้าที่อะไร

  • B1 ถ้าหากเรากดไป มันจะกลับไปยังไฟล์ก่อนหน้านี้ ( Prev ) และถ้าเป็นด้านขวา ก็จะเป็นไฟล์หลังจากนี้ ( Next )
  • B2 เป็นส่วนบอกว่า ปัจจุบันนี้เราอยู่ที่ไฟล์อะไรและบรรทัดที่เท่าไหร่
  • B3 บอกว่าปัจจุบัน cursor เราอยู่ที่ method อะไร และถ้าหากเรากด ก็จะพบกับ method ทั้งหมดของ class นี้ เราสามารถกระโดดไปยัง method ที่ต้องการได้อย่างสะดวก
  • B4 เป็นปุ่มไว้เปลี่ยนสลับไปมาละหว่า ไฟล์ interface ( .h ) และ implement ( .m )

Smart Group

ส่วนต่อไปผมจะแนะนำก็คือ ส่วนของ Smart Group ครับ ตรงนี้มีประโยชน์มากๆ ดูกันที่แรกก่อนเลย นั่นก็คือ

1. Find

Find

เมื่อเราต้องการ ค้นหา คำหรือว่าอะไรสักอย่าง เมื่อการค้นหาแต่ละครั้งจบลง XCode มันจะเก็บผลของการค้นหา ไว้ให้เราตรง Find Results นี่เหละครับ ครั้งต่อไปเราก็มาเปิดดูตรง Find Results ก่อนจะได้ไม่เสียเวลาครับ

2. Bookmarks

bookmark

Bookmark นี่เป็นตัวช่วยให้เราจดบันทึกได้อย่างง่าย หลายๆครั้งที่เราทำงานไปเรื่อยๆ แล้วอยากจะจดว่า บรรทัดนี้ มันสำคัญ หรือเป็นส่วนสำคัญอะไรสักอย่าง อยากจะกลับมาดูครั้งหลัง ๆ เราก็สามารถใช้ประโยชน์จาก bookmark ได้ดีทีเดียว วิธีการก็คือ

  • กด apple + d ( ผมว่าแบบนี้สะดวกกว่า )
  • เลือกไปที่เมนู edit > add to bookmarks

แล้วเราก็ตั้งชื่อครับ เท่านี้ก็เรียบร้อย ครั้งหลัง เราก็เปิด bookmark แล้วก็เลือกที่เราบันทึกไว้ XCode ก็จะเปิดไฟล์พร้อมกับเลื่อนไปยังบรรทัดที่เราได้ bookmark เอาไว้ครับ

Implementtation & NIB Files

nib

smart group นี้ช่วยให้เราคัดกรองประเภทของไฟล์ที่เราต้องการครับ อย่างถ้าหากเราต้องการดูแต่ implement หรือเฉพาะ nib ก็ทำได้อย่าง่ายๆครับ

Degugger Windows

ในหน้าต่าง Debug นี้มีส่วนสำคัญหลายๆส่วนครับที่หลายๆคนยังไม่รู้ว่าเราสามารถ ปรับเปลี่ยนอะไรได้หลายๆอย่าง

debugger

1. หลายๆคนเคยประสบปัญหาว่า โหลด Source Code ของคนอื่นมาแล้วเจอ Error ในลักษณะประมาณนี้

error

บางคนอาจจะคิดว่า มันมี program ที่เค้าให้มามัน bug อะไรทำนองนั้น ถ้าดูดีๆในรูปด้านซ้ายมือบนจะเห็นเค้าเขียนว่า Missing | Debug | i386 ถ้าหากอ่าน error ดีๆเค้าบอกว่า โปรเจคที่เราโหลดมา ใช้ SDK คนละ version กับที่เรามี การแก้ปัญหา แบบนี้ก็คือ ให้ปรับ SDK ให้มันตรงกับที่เรามีก็จะสามารถใช้งานได้ครับ ดูในหมายเลข 1 ใน List นี้เราสามารถที่จะปรับเปลี่ยน Build ของเราได้ครับ ตั้งแต่เราเลือกได้ว่าจะใช้ SDK Version อะไร ใช้ Simulator หรือว่า Device เมื่อเราเลือกให้มันตรง ลอง compile ใหม่ก็สามารถใช้ได้ครับ

ในส่วนหมายเลข 2 ถ้าหาก เรากดไป มันจะไปเปิดหน้าต่างที่รวม break point ที่เราได้ใส่ไว้ในโปรแกรมทั้งหมดครับ
และหมายเลข 3 ก้อเป็นการเปิด Console ขึ้นมาดูครับ

XCode Version Control Build-in

ในตัว xcode เองมีตัว Version Control แถมมาด้วยครับ สำหรับคนที่ยังไม่รู้ว่า Version Control คืออะไร ผมอธิบายแบบนี้แล้วกันนะครับ สมมติเราเขียนโปรแกรมไปเรื่อยๆ เราอยากจะทดลองแก้ไขอะไรสักอย่าง และเราอยากจะ Save Code ทั้งหมดของเราไว้ ถ้าหากแก้ไปแล้วมันเจ้งก็จะได้กู้กับคืนมา การ save code ไว้แบบนี้แบบนี้เค้าเรียกว่า Version Control ครับ เหมือนเวลาเล่นเกมส์นั่นเหละ ครับเราสามารถ Save ไว้ได้เกิดจะไปฆ่าบอสละถ้าตายจะได้กลับมาโหลดใหม่ได้ ทำนองนั้น version control นั้นมีหลายเจ้ามากๆ อาทิเช่น SVN , CVS , Sourcesafe เป็นต้น เราต้องติดตั้ง software พวกนี้เพิ่มเติม ซึ่งมันค่อนข้างยุ่งยาก แต่ xcode นั้นมี version control มาให้เราแบบง่ายๆครับ

buildin

เลิือกไปที่เมนู File แล้วเลือก Make Snapshot ครับเพียงเท่านี้ก็เรียบร้อยหวังว่า ทิปเล็กๆน้อยๆ นี้น่าจะมีประโยชน์บ้างนะครับ แนะนำ ติชม กันได้ครับ

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 ขึ้นมาเฉยๆ ก็ได้ครับ

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