สำหรับบทเรียน iOS Develoepr ในบทนี้จะเป็นการใช้งานตัว UITableView กับ Xcode IDE ในการสร้างแอพพลิเคชันที่เป็นมาตรฐานการใช้งานทั่วไปที่มีผู้นิยมออกแบบมาให้ได้เลือกใช้กันนั่นคือ แอพพลิเคชันประเภทรายการสินค้า หรือ เนื้อหาที่เป็นรายชื่อเป็นข้อ ซึ่งการพัฒนานั้นนักพัฒนาจำเป็นต้องใช้ UITableView มาเป็นตัวแสดงผล และสร้างการโต้ตอบระหว่างผู้ใช้งานกันผ่านการกดที่ แถว ของรายการหรือ “Row” เพื่อให้แอพพลิเคชันทำการรับรู้แล้วว่าผู้ใช้งานต้องการดูรายการข้อมูลในแถวไหนนั่นเอง
การพัฒนา และประยุกต์การตั้งค่า UITableView แบบซับซ้อน
ทำการสร้าง New Project ขึ้นมาอีกครั้งเลือกประเภทของแอพพลิเคชันเป็น “Single View Application” เช่นเคยทำการตั้งค่าให้เสร็จสรรพเรียบร้อยพร้อมใช้งาน
ไปยังหน้า MainStoryboard ทำการออกแบบหน้าจอของแอพพลิเคชัน โดยลาก Object Table View มาวางไว้ยังหน้าจอทันที
เตรียมตัวเพิ่มคำสั่งในส่วนของการจัดรูปแบบความสวยงามของข้อมูล และแถวของ UITableView
ทดสอบการทำงานของตัวแอพพลิเคชันก่อนว่ามีปัญหาผิดพลาดหรือไม่ โดยการกดปุ่ม “Run” ที่หน้าจอ Xcode IDE เพื่อดูผลลัพธ์ ว่ามี Error หรือเปล่า ถ้าไม่มีก็ทำต่อครับ
ในหน้าจอของ Table View ให้ทำการกดปุ่ม Control ที่แป้นคีย์บอร์ดแล้วทำการลากตัว UITableView ไปยังไอคอน View Controlด้านล่างของหน้าจอแอพพลิเคชันเพื่อทำการเชื่อม และเลือกเป็น DataSource และ Delegated
ทำการลาก ตัว Table View ไปยังไอคอน View Control
สังเกตว่าเมื่อทำการเชื่อมตัว Table View ไปยัง View Control เรียบร้อยแล้วไฟล์ ViewController.h จะมีการเปลี่ยนแปลงไปตามตัวอย่างข้างล่างหากไม่มีการเปลี่ยนแปลงให้กลับไปเชื่อมตัว View Control ใหม่อีกครั้ง
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end
ตัวอย่างของคำสั่งจะเห็นว่าหลังจาก UIViewController แล้วจะพบ <UITableBarDelegate, UITableViewDataSource> เพิ่มเข้ามาต่อท้ายคำสั่ง ตรวจสอบความถูกต้องกลับไปยังไฟล์ ViewController.m ทำการแก้ไข คำสั่ง Source Code ให้เป็นดังนี้
#import "ViewController.h"
@implementation ViewController
{
NSArray *tableData;
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
tableData = [NSArray arrayWithObjects:@"daydev",@"gooruism",@"solomohub" , nil];
}
หากสังเกตจะเห็นว่าผมได้สร้างตัวแปรชนิด Array ขึ้นมาชื่อว่า “tableData” แล้วเก็บข้อมูลว่า daydev, gooruism และ solomohub ไว้ในตัวแปล tableData ทันทีในฟังก์ชัน ViewDidLoad
ไปที่ไฟล์ ViewController.hกดปุ่ม Command ของ Appleบนแป้นคีย์บอร์ดค้างไว้แล้วคลิกที่ UitableViewDataSource แล้วทำการ คัดลอกบรรทัดหลังจาก @required ไปจนถึงก่อน @optional
เมื่อได้คัดลอกคำสั่งเรียบร้อยแล้วให้นำ ไปวางไว้ที่ไฟล์ ViewController.m โดยทำการเปลี่ยนเครื่องหมาย “;” ท้านคำสั่งให้กลายเป็น “{“ และ “}” ให้เรียบร้อย
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
}
@end
ตัวอย่างคำสั่งในไฟล์ ViewController.m หลังจากแก้ไขเรียบร้อยแล้ว
แทรกคำสั่งการส่งค่ากลับไปเป็นจำนวนแถว หรือ Row ในคำสั่งชุดแรกให้เหมือนตัวอย่างดังนี้
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [tableData count];
}
หลังจากนั้นเพิ่มคำสั่งการ แยกข้อมูลในตัวแปร Array ไปเก็บไว้ยัง แถวแต่ละแถวโดยแก้ไขข้อมูลดังนี้
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier =@"Item";
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if(cell == nil){
cell =[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
return cell;
}
หากสังเกตให้ดีจะเห็นว่าคำสั่งดังกล่าวใกล้เคียงกับ คำสั่งที่ได้บอกไว้ในบทเรียนที่แล้ว เพียงแค่เปลี่ยนชื่อของแถวข้อมูลจาก “MyCell” ให้เป็นชื่อ “item” แทน
หากทำการ “Run” ตัวแอพพลิเคชันดูแล้วจะพบว่า ไม่ได้มีความแตกต่างใดๆ จากบทเรียนที่ผ่านมาแล้วก่อนหน้าผมเลยเพิ่มลูกเล่นเข้าไป นั่นคือการแทรกไฟล์กราฟิกรูปภาพหรือ ภาพ Thumbnail ที่เป็นภาพเล็กๆ แทรกอยู่ในแต่ละแถว เพื่อให้หน้าจอแอพพลิเคชันดูน่าใช้งานและนำสายตา
ทำการเพิ่มคำสั่งเข้าไปเล็กน้อยโดยแทรกต่อจากคำสั่งในการส่งค่า Return จำนวนแถวกลับไปแสดงผลบนหน้าจอแอพพลิเคขันว่า
cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
cell.imageView.image =[UIImage imageNamed:@"thumbnail.png"];
return cell;
ทำการ “Run” ตัวแอพพลิเคชันจะพบว่าหน้าจอของ UITableView นั้นมีไอคอนนำสายตา และน่าใช้งานขึ้นมาทันที
สิ่งที่ได้จากบทเรียนนี้: เริ่มมองเห็น คำสั่งแปลกใหม่สำหรับทำการปรับแต่ง และตกแต่งตัว Object TableView ให้ออกมาดูมีความน่าสนใจมากขึ้น
Source Code แจกฟรีที่นี่ครับ http://code.google.com/p/daydev/
บทเรียนก่อนหน้า
- iOS Developer ตอนที่ 3 การเรียกใช้งาน UIAlertView แจ้งเตือน
- iOS Developer ตอนที่ 2 การรับค่าจาก UITextField แสดงผ่าน UILabel
- iOS Developer ตอนที่ 1 รู้จักกับ Xcode IDE