iOS/iPhone Table View and Table View Cell - Custom Cell Column (iPhone, iPad) |
iOS/iPhone Table View and Table View Cell - Custom Cell Column (iPhone, iPad) ในการสร้างข้อมูลรายการข้อมูลบน Table View ที่แสดงออกเป็นหลาย ๆ แถวนั้น บางครั้งเรา เราจะสังเกตุว่า Style ที่เป็นค่า Default ของ Cell จะมีอยู่ไม่กี่รูปแบบ เช่น Title , Label และ Image แต่ในกรณีที่เราต้องการสร้าง Custom Cell ขึ้นมาเอง และจัดรูปแบบ Cell และ รายละเอียดใน Cell ให้อยู่ในรูปแบบต่าง ๆ ที่ต้องการ เราจะใช้การสร้าง Custom Cell ด้วย Object ของ Interface Builder ที่มีชื่อว่า Table View Cell สำหรับการสร้างนั้นอาจจะมีความซับซ้อนนิดหนึ่ง แต่จะพยายามอธิบายและ Capture รูปภาพให้ละเอียดที่สุด
iOS/iPhone Table View and Table View Cell - Custom Cell Column
ในการสร้าง Table Custom Cell นั้น เราจะใช้การสร้างไฟล์ .xib ขึ้นมา พร้อมกับ Class .h และ .m ขึ้นมา 1 ชุด และเราจะออกแบบ Layout ต่าง ๆ บนไฟล์ .xib นั้น ๆ พร้อม ๆ กับการสร้าง property ต่าง ๆ ที่จะรับค่าจาก Table View ซึ่งใน Table View จะใช้การเรียก Layout ของ Custom Cell ที่เราได้สร้างขึ้นมา พร้อม ๆ กับการส่งค่าต่าง ๆ ผ่าน property เพื่อแสดงค่าใน Cell ที่ต้องการ สำหรับหลักการนั้แล้วไม่ยาก แต่วิธีการและการเขียน Code อาจจะมีความซับซ้อนอยู่บ้าง แต่ก็ไม่ถึงกับยากจนเกินไป
เริ่มต้นการสร้าาง Table View Cell - Custom Cell Column บน Xcode
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-01.jpg?v=1001)
สร้าง Application แบบง่าย ๆ ด้วย Single View Application
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-02.jpg?v=1001)
เลือกและไม่เลือกรายการดังรูป
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-03.jpg?v=1001)
ตอนนี้ View ของเรายังเป็นแค่หน้าจอว่าง ๆ
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-04.jpg?v=1001)
เนื่องจากใน Column เราจะแสดงรูปด้วย ขั้นแรกให้ Copy รูปเข้าไปไว้ใน Project และ Add เข้ามาใน Project ด้วย
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-05.jpg?v=1001)
เลือกรูปที่ต้องการ
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-06.jpg?v=1001)
ได้รูปเข้ามาใน Project เรียบร้อยแล้ว
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-07.jpg?v=1001)
กลับมาที่ View หลักให้ลาก Table View ไปยังหน้าจอของ View
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-08.jpg?v=1001)
ทำการเชื่อม IBOutlet ให้เรียบร้อย
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-09.jpg?v=1001)
คลิกขวาที่ Table View ให้เชื่อม dataSource และ delegate ให้เรียบร้อยเช่นเดียวกัน หลังจากเสร็จสิ้นขั้นตอนนี้แล้ว ใน Table View หลักก็ไม่ต้องทำอะไรเพิ่ม เหลือแค่การเขียน Code อย่างเดียว
ขั้นตอนถัดไปจะเป็นการสร้าง Table View Cell แบบ Custom Cell
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-10.jpg?v=1001)
ทำการ New File ขึ้นมาใหม่
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-11.jpg?v=1001)
เลือก User Interface -> Empty ตามลำดับ
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-12.jpg?v=1001)
ตั้งชื่อไฟล์เป็น CustomTableCell
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-13.jpg?v=1001)
ได้ไฟล์ Interface เปล่า ๆ ที่ยังไม่มี Class มาควบคุมการทำงาน
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-14.jpg?v=1001)
ต่อไปให้ New File เพื่อสร้าง Class .h และ .m
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-15.jpg?v=1001)
เลือก Cocoa Touch และเลือก Objective-C class
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-16.jpg?v=1001)
ตั้งชื่อให้เหมือนกับ Interface โดยตั้งเป็น CustomTableCell ส่วน Subclass เลือกให้ถูกด้วย UITableViewCell และไม่เลือกดังรูป
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-17.jpg?v=1001)
ได้ไฟล์ Class ขึ้นมาอีก 2 ไฟล์ ซึ่งตอนนี้ได้ครบชุดแล้ว
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-18.jpg?v=1001)
คลิกที่ไฟล์ CustomTableCell.xib ซึ่งตอนนี้ยังเป็นหน้าจอว่าง ๆ
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-19.jpg?v=1001)
ให้ลาก Table View Cell ไปวางไว้ตำแหน่งของหน้าจอ
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-20.jpg?v=1001)
จากนั้นให้ออกแบบ Object ต่าง ๆ ตามต้องการ บน Cell นี้ โดยอาจจะประกอบด้วย ImageView และ Label ตามข้อมูลที่มีอยู่
จากนั้นในไฟล์ CustomTableCell.h และ CustomTableCell.m ให้สร้าง Code ต่าง ๆ ดังนี้
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-21.jpg?v=1001)
CustomTableCell.h
//
// CustomTableCell.h
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface CustomTableCell : UITableViewCell
@property (nonatomic, strong) IBOutlet UIImageView *displayImage;
@property (nonatomic, strong) IBOutlet UILabel *displayName;
@property (nonatomic, strong) IBOutlet UILabel *displayDescription;
@property (nonatomic, strong) IBOutlet UILabel *displayCreateDate;
@end
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-22.jpg?v=1001)
CustomTableCell.m
//
// CustomTableCell.m
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "CustomTableCell.h"
@implementation CustomTableCell
@synthesize displayImage = _displayImage;
@synthesize displayName = _displayName;
@synthesize displayDescription = _displayDescription;
@synthesize displayCreateDate = _displayCreateDate;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code
}
return self;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-23.jpg?v=1001)
จากนั้นให้กลับมาที่หน้าจอ Interface ให้คลิกที่ Custom Table Cell ดังรูป แล้วทำการ เลือก Custom Class ที่เราได้สร้างขึ้นมาที่ชื่อว่า CustomTableCell ถ้าไม่มีใน List ให้พิมพ์เพิ่มเข้าไป
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-24.jpg?v=1001)
เสร็จแล้วให้คลิกขวาที่ Custom Table Cell ดังรูป จะมีรายการขึ้นตามรูป
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-25.jpg?v=1001)
ให้เชื่อมรายการ property กับหน้าจอ User Interface ตามชนิดของข้อมูลที่ได้สร้างขึ้น
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-26.jpg?v=1001)
เชื่อมเสร็จแล้วจะได้หน้าจอดังรูป ซึ่งประกอบด้วย Object ทั้งหมด 4 ตัว
หลังจากเสร็จสิ้นขั้นตอนการสร้าง Table View Cell แล้ว ต่อไปเราจะมาเรียกใช้จาก Table View หลัก ซึ่งเราจะต้องเขียน Code บนภาษา Objective-C
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-27.jpg?v=1001)
จะต้องทำการ import ไฟล์ CustomTableCell.h เข้ามาด้วย ส่วน Code ต่าง ๆ ทั้งหมดจะเป็นตามนี้
ViewController.h
//
// ViewController.h
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (retain, nonatomic) IBOutlet UITableView *myTable;
@end
ViewController.m
//
// ViewController.m
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "ViewController.h"
#import "CustomTableCell.h"
@interface ViewController ()
{
NSMutableArray *myObject;
// A dictionary object
NSDictionary *dict;
// Define keys
NSString *images;
NSString *name;
NSString *description;
NSString *createdate;
}
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// Define keys
images = @"Images";
name = @"Name";
description = @"Description";
createdate = @"CreateDate";
// Create array to hold dictionaries
myObject = [[NSMutableArray alloc] init];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"girl1.jpg", images,
@"Girl 1", name,
@"Girl 1 Description", description,
@"01-Nov-2012 12:00", createdate,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"girl2.jpg", images,
@"Girl 2", name,
@"Girl 2 Description", description,
@"01-Nov-2012 13:00", createdate,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"girl3.jpg", images,
@"Girl 3", name,
@"Girl 3 Description", description,
@"01-Nov-2012 14:00", createdate,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"girl4.jpg", images,
@"Girl 4", name,
@"Girl 4 Description", description,
@"01-Nov-2012 15:00", createdate,
nil];
[myObject addObject:dict];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return myObject.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
CustomTableCell *cell = (CustomTableCell *) [tableView dequeueReusableCellWithIdentifier : CellIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomTableCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
NSDictionary *tmpDict = [myObject objectAtIndex:indexPath.row];
UIImage* theImage = [UIImage imageNamed:[tmpDict objectForKey:images]];
cell.displayImage.image = theImage;
cell.displayName.text = [tmpDict objectForKey:name];
cell.displayDescription.text = [tmpDict objectForKey:description];
cell.displayCreateDate.text = [tmpDict objectForKey:createdate];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 100;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc {
[_myTable release];
[super dealloc];
}
@end
คำอธิบาย
if (cell == nil)
{ // เรียก Custom Cell จากไฟล์ CustomTableCell.xib
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomTableCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
NSDictionary *tmpDict = [myObject objectAtIndex:indexPath.row];
UIImage* theImage = [UIImage imageNamed:[tmpDict objectForKey:images]];
// ส่งค่า property ต่าง ๆ ไปยัง Object ของไฟล์ CustomTableCell.xib
cell.displayImage.image = theImage;
cell.displayName.text = [tmpDict objectForKey:name];
cell.displayDescription.text = [tmpDict objectForKey:description];
cell.displayCreateDate.text = [tmpDict objectForKey:createdate];
สำหรับ Code อื่น ๆ ก็ไม่ได้ยากอะไรมากมาย สามารถไล่ดูแล้วเข้าใจได้
Screenshot
![iOS/iPhone Table View and Table View Cell - Custom Cell Column iOS/iPhone Table View and Table View Cell - Custom Cell Column](https://www.thaicreate.com/upload/tutorial/ios-iphone-table-view-table-view-cell-28.jpg?v=1001)
จะได้ Table View ตาม Cell และ Column ที่เราได้ออกแบบและสร้างขึ้น
ในตัวอย่างนี้อาจจะมีความซับซ้อนอยู่นิดหนึ่ง แต่ถ้าเราเข้าใจ Concept มันแล้ว จะช่วยให้เราทำความเข้าใจได้ง่าย ๆ ขึ้น และตัวอย่างนี้ก็พยายามอธิบายโดยละเอียด ด้วยการ Capture รูปภาพใน Step และขั้นตอนต่าง ๆ อย่างละเอียด ส่วนถ้าได้หรือไม่ได้ยังไงลองโพสถามในกระทู้ได้ครับ
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) |
|
|
Create/Update Date : |
2012-11-07 10:36:45 /
2017-03-26 09:12:29 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|