iOS Developer ตอนที่ 4 การเรียกใช้งาน UITableView

สำหรับบทเรียน iOS Develoepr ในบทนี้จะเป็นการใช้งานตัว UITableView กับ Xcode IDE ในการสร้างแอพพลิเคชันที่เป็นมาตรฐานการใช้งานทั่วไปที่มีผู้นิยมออกแบบมาให้ได้เลือกใช้กันนั่นคือ แอพพลิเคชันประเภทรายการสินค้า หรือ เนื้อหาที่เป็นรายชื่อเป็นข้อ ซึ่งการพัฒนานั้นนักพัฒนาจำเป็นต้องใช้ UITableView มาเป็นตัวแสดงผล และสร้างการโต้ตอบระหว่างผู้ใช้งานกันผ่านการกดที่ แถว ของรายการหรือ “Row” เพื่อให้แอพพลิเคชันทำการรับรู้แล้วว่าผู้ใช้งานต้องการดูรายการข้อมูลในแถวไหนนั่นเอง

การพัฒนา และประยุกต์การตั้งค่า UITableView แบบซับซ้อน
ทำการสร้าง New Project ขึ้นมาอีกครั้งเลือกประเภทของแอพพลิเคชันเป็น “Single View Application” เช่นเคยทำการตั้งค่าให้เสร็จสรรพเรียบร้อยพร้อมใช้งาน

ไปยังหน้า MainStoryboard ทำการออกแบบหน้าจอของแอพพลิเคชัน โดยลาก Object Table View มาวางไว้ยังหน้าจอทันที

เลือก Object UITableView มาวางบน MainStoryboard

เตรียมตัวเพิ่มคำสั่งในส่วนของการจัดรูปแบบความสวยงามของข้อมูล และแถวของ UITableView

ทำการวางตัว Table View ลงไปยังหน้าจอแอพพลิเคชัน

ทดสอบการทำงานของตัวแอพพลิเคชันก่อนว่ามีปัญหาผิดพลาดหรือไม่ โดยการกดปุ่ม “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” ตัวแอพพลิเคชัน — ทดสอบทำการ “Run” ตัวแอพพลิเคชัน

หากทำการ “Run” ตัวแอพพลิเคชันดูแล้วจะพบว่า ไม่ได้มีความแตกต่างใดๆ จากบทเรียนที่ผ่านมาแล้วก่อนหน้าผมเลยเพิ่มลูกเล่นเข้าไป นั่นคือการแทรกไฟล์กราฟิกรูปภาพหรือ ภาพ Thumbnail ที่เป็นภาพเล็กๆ แทรกอยู่ในแต่ละแถว เพื่อให้หน้าจอแอพพลิเคชันดูน่าใช้งานและนำสายตา

ไฟล์ตัวอย่างภาพกราฟิก ที่ผมใช้เป็นภาพไอคอนประกอบข้อมูลในแต่ละแถวชื่อไฟล์ว่า "thumbnail.png” — ไฟล์ตัวอย่างภาพกราฟิก ที่ผมใช้เป็นภาพไอคอนประกอบข้อมูลในแต่ละแถวชื่อไฟล์ว่า “thumbnail.png”

ทำการเพิ่มคำสั่งเข้าไปเล็กน้อยโดยแทรกต่อจากคำสั่งในการส่งค่า Return จำนวนแถวกลับไปแสดงผลบนหน้าจอแอพพลิเคขันว่า

cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
cell.imageView.image =[UIImage imageNamed:@"thumbnail.png"];
return cell;

ทำการ “Run” ตัวแอพพลิเคชันจะพบว่าหน้าจอของ UITableView นั้นมีไอคอนนำสายตา และน่าใช้งานขึ้นมาทันที

หน้าจอแอพพลิเคชันที่ใช้ UITableView ประกอบกับไอคอนรูปภาพกราฟิก

สิ่งที่ได้จากบทเรียนนี้: เริ่มมองเห็น คำสั่งแปลกใหม่สำหรับทำการปรับแต่ง และตกแต่งตัว Object TableView ให้ออกมาดูมีความน่าสนใจมากขึ้น
Source Code แจกฟรีที่นี่ครับ http://code.google.com/p/daydev/

บทเรียนก่อนหน้า