Xcode Programming VII : Table View Part III

หลังจากที่เราได้ตารางว่างๆ มาแล้วนะครับ เราจะจัดการกำหนดแถวที่ต้องการให้แต่ละ Section นะครับ

• แก้ไข Code ใน Method numberOfRowsInSection ใน File Viewcontroller.m

## อธิบาย Code ##

จากชื่อ Method จะสังเกตได้ว่ามีการรับค่า Section เป็นตัวเลขส่งมาให้ Method เราก็ทำการตรวจสอบโดยการใช้ if - else ว่า Section ไหนจะให้มีจำนวนแถวเท่าไหร่แค่นั้นเองครับ

!! แนะนำ !! ในบทความนี้หลังจากการทำในทุกๆขั้นตอนให้ลอง Build & Run สังเกตความเปลี่ยนแปลงดูครับน่าจะเข้าใจได้มากยิ่งขึ้น เพราะจากบทความที่ผ่านมา ผมได้ตระหนักแล้วว่าการนำ Output มาแสดงให้ดูในทุกขั้นตอนมันจะทำให้บทความยาวมากครับ เพราะฉะนั้นขออนุญาติแสดงแค่ที่ผมเห็นว่าสมควรเท่านั้นน่ะครับ

คราวนี้เรามาใส่ลูกเล่นต่างๆ ให้กับ Table ของเรากันดีกว่าครับ

• เพิ่ม Code ลงไปใน ViewController.m

## อธิบาย Code ##

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

• นำรูปมาใส่ใน Project 3 รูป ( วิธีการมีในบทความเก่าแล้วนะครับ )
• ทำการเพิ่ม code ใน Method cellForRowAtIndexPath ในส่วนของ // Config Cell

## อธิบาย Code ##

        cell.imageView.image =[UIImage imageNamed : @"ball.png"];

กำหนดให้ภาพไปแสดงใน Cell ( ball.png คือชื่อภาพ + Filetype ของภาพ )

        cell.textLabel.text = @"ลูกบอลแบบที่ 1";

กำหนดข้อความหลักใน Cell 

        cell.textLabel.textColor = [UIColor redColor];

กำหนดสีของข้อความหลักใน Cell

        cell.detailTextLabel.text = @"รายละเอียด 1";

กำหนดข้อความรายละเอียดใน Cell

ถ้าทำตามได้อย่างถูกต้อง หน้าจอโปรแกรมหลัง Build & Run ออกมาจะได้ประมาณนี้ครับ

สังเกตได้ว่าทุกอย่างที่กำหนดไปไม่สามารถแสดงผลได้ทั้งหมดซึ่ง 

cell.detailTextLabel.text = @"รายละเอียด 1";

ไม่แสดงผล เพราะอะไร ? ให้ลองมาดูในบรรทัดนี้ครับ ( อยู่ใน Method cellForRowAtIndexPath )

cell = [[[UITableViewCell alloc] initWithStyle : UITableViewCellStyleDefault reuseIdentifier:

สังเกต UITableViewCellStyleDefault ครับ แปลควายหมายได้ตรงตัวเลยครับว่าตอนนี้ Style ของ cell ถูกตั้งเป็นค่ามาตรฐานอยู่ครับ เราลองกดปุ่ม Option แล้วเลือกไปที่คำนี้เพื่อเปิด Document ดูครับ

รายละเอียดของ Cell Style ต่างๆ

เราจะเห็นว่า Cell Style ที่ทาง Xcode กำหนดมาให้นั้นมีด้วยกัน 4 รูปแบบ ให้เราลองเปลี่ยน CellStyle เป็นรูปแบบอื่นๆ แล้วลอง Build & Run ดูครับผม จะสังเกตได้ว่ารายละเอียดใน cell จะถูกเปลี่ยนแปลงและแตกต่างกันไป

ถ้าอยากจะทำการกำหนด Cell ในแต่ละ Cell ให้มีึรายละเอียดแตกต่างกันไป ให้ใช้ if - else ทำการตรวจสอบเหมือนเดิมครับ แต่ในส่วนเงื่อนให้เปลี่ยนจาก section เป็น  indexPath.section แทนครับ เนื่องจาก Method cellForRowAtIndexPath ทำการรับค่า section และ row มาด้วยกันแล้วกำหนดให้เป็นตัวแปรชนิด NSIndexPath นั่นเองครับ ลองมาดู Code ตัวอย่างนะครับ

ตัวอย่างให้ไม่หมด ลองให้ศึกษาแล้วนำไปใช้ใน Project ของแต่ละคนนะครับ

วิธีการก็ Copy ทุกอย่างใน Method นำไปใส่ในทุกเงื่อนไขแล้วก็ Config cell ตามใจได้เลยครับ

## เห็นอะไรแปลกๆ มั๊ยครับ ? ##

cell.textLabel.textColor = [[[UIColor alloc]initWithRed : 255.0/255.0 green : 0.0/255.0 blue : 0.0/255.0 alpha : 1.0] autorelease];

เป็นการกำหนดสีในรูปแบบ RGB นั่นเองครับ ผมลองทำให้แตกต่างกันแต่ผลลัทธ์ที่ได้ยังคงได้สีแดงเหมือนเดิมครับ

//    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

//    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

สองบรรทัดที่ผม Comment ทิ้งไว้ลองเอาเครื่องหมาย Comment ออกแล้วเปิดใช้งานดูนะครับ

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

CellAccessory คือการสร้าง Object เพิ่มขึ้นมาใน Cell นั้นเพื่อที่จะใช้งานตามต้องการครับโดยปกติจะมีคุณสมบัติแบบ Button หรือ Checkmark ครับ

ลองมาดูตัวอย่างของผมที่เสร็จเรียบร้อยแล้วนะครับ

ลองทำให้ได้เหมือนผมนะครับ

สังเกตขวามือที่มีเครื่องหมายมากกว่า และเครื่องหมายถูกมันคือ CellAccessory  นั่นเองครับ สำหรับบทความเรื่อง TableView จริงๆแล้วมีอะไรอีกเยอะที่น่าสนใจและน่าจะนำมาเขียนบทความให้เพื่อนๆ ได้ลองศึกษาดูนะครับ เช่มเดิมนะครับ หากมีส่วนใดที่ไม่เข้าหรือทำแล้วเกิดข้อผิดพลาดอะไร ฝากข้อความไว้ได้นะครับแล้วผมจะกลับมาตอบให้ครับ