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

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

@interface StudentData : NSObject
{
	NSString *studentName;
	NSString *studentGrade;
	UIImage *studentPicture;
 
}
@property (nonatomic, retain) NSString* studentName;
@property (nonatomic, retain) NSString* studentGrade;
@property (nonatomic, retain) UIImage *studentPicture;
 
@end

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

#import "StudentData.h"
 
@implementation StudentData
@synthesize studentName;
@synthesize studentGrade;
@synthesize studentPicture;
 
-(void) dealloc
{
	[studentName release];
	[studentGrade release];
	[studentPicture release];
	[super dealloc];
}
@end

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

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

@interface DemoCustomCellViewController : UIViewController
{
	NSMutableArray *studentArray;
	IBOutlet UITableView *studentTableView;
}
 
@end

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

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

#import "DemoCustomCellViewController.h"
#import "StudentData.h"
 
@implementation DemoCustomCellViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
	[super viewDidLoad];
	studentArray = [[NSMutableArray alloc] init];
	StudentData* student_A , *student_B , *student_C , *student_D;
 
	student_A = [[StudentData alloc] init];
	student_B = [[StudentData alloc] init];
	student_C = [[StudentData alloc] init];
	student_D = [[StudentData alloc] init];
 
	student_A.studentName = [NSString stringWithString:@"น้องกระแต"];
	student_A.studentGrade = [NSString stringWithString:@"A"];
	student_A.studentPicture = [UIImage imageNamed:@"katae.png"];
 
	student_B.studentName = [NSString stringWithString:@"น้องปีใหม่"];
	student_B.studentGrade = [NSString stringWithString:@"B+"];
	student_B.studentPicture = [UIImage imageNamed:@"mai.png"];
 
	student_C.studentName = [NSString stringWithString:@"น้องแพนเค้ก"];
	student_C.studentGrade = [NSString stringWithString:@"C"];
	student_C.studentPicture = [UIImage imageNamed:@"pancake.png"];
 
	student_D.studentName = [NSString stringWithString:@"น้องเกรซ"];
	student_D.studentGrade = [NSString stringWithString:@"B"];
	student_D.studentPicture = [UIImage imageNamed:@"grace.png"];
 
	[studentArray addObject:student_A];
	[studentArray addObject:student_B];
	[studentArray addObject:student_C];
	[studentArray addObject:student_D];
 
	[student_A release];
	[student_B release];
	[student_C release];
	[student_D release];
 
}
 
- (void)viewDidUnload
{
	[studentArray release];
}
 
- (void)dealloc {
    [super dealloc];
}
 
// -----------------------------------------------------------------
//			TableView Delegate Implement
// -----------------------------------------------------------------
 
-(NSInteger) tableView:(UITableView*) tableView
numberOfRowsInSection:(NSInteger) section
{
	return [studentArray count];
}
 
- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell;
        cell=[studentTableView dequeueReusableCellWithIdentifier:
			sampleIndentifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.textLabel.text = temp.studentName;
 
	return cell;
}
@end

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

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

Custom Cell

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

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

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

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

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

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

@interface StudentCustomCell : UITableViewCell
{
	IBOutlet UILabel* name;
	IBOutlet UILabel* grade;
	IBOutlet UIImageView* picture;
}
@property (nonatomic,retain)  UILabel* name;
@property (nonatomic,retain)  UILabel* grade;
@property (nonatomic,retain)  UIImageView* picture;
 
@end

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

#import "StudentCustomCell.h"
 
@implementation StudentCustomCell
 
@synthesize name;
@synthesize grade;
@synthesize picture;
 
- (id)initWithStyle:(UITableViewCellStyle)style
        reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // Initialization code
    }
    return self;
}
 
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
 
    [super setSelected:selected animated:animated];
}
 
- (void)dealloc
{
	[name release];
	[grade release];
	[picture release];
 
    [super dealloc];
}
 
@end

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

Design Custom Cell

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

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

Coding

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

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

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

- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell;
	cell=[studentTableView dequeueReusableCellWithIdentifier:
						   sampleIndentifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier:sampleIndentifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.textLabel.text = temp.studentName;
 
	return cell;
}

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

- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	StudentCustomCell *cell = (StudentCustomCell*)[studentTableView
		dequeueReusableCellWithIdentifier:sampleIndentifier];
	if (cell == nil)
	{
	NSArray *topLevelObjects;
	topLevelObjets = [[NSBundle mainBundle]
	loadNibNamed:@"StudentCustomCell" owner:nil options:nil];
 
	for(id currentObject in topLevelObjects)
	{
		if([currentObject isKindOfClass:[StudentCustomCell class]])
		{
			cell = (StudentCustomCell*)currentObject;
			break;
		}
	}
	}
 
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.name.text = temp.studentName;
	cell.grade.text = temp.studentGrade;
	cell.picture.image = temp.studentPicture;
 
	return cell;
}

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

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

- (CGFloat)tableView:(UITableView *)tableView
	heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
	return 120;
}

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

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

Technorati Tags: cocoa touch, objective-c, programming, UITableView, UITableViewCell

อย่างที่บอกไปว่าวันนี้ยังอยู่ในเรื่องของ table เหมือนเดิม วันนี้จะมาต่อในเรื่องของ Section ครับ
โดยปกติแล้ว Table View น้ันจะประกอบไปด้วย cell และ cell เหล่านี้สามารถแยกเป็นหมวดๆได้ เรียนกว่า section ดูรูปประกอบ จะเข้าใจ

จากรูปจะเห็นชื่อที่ขึ้นต้นด้วย ตัวอักษรเดียวกันนั้นจะถูกจับรวมกันเป็นกลุ่ม ( section ) งั้นเรามาเริ่มเลยดีกว่าครับ

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

ตามแผนภาพ ผมจะแบ่งหมวดหมู่ของสัตว์ออกเป็น 3 ประเภทคือ Mammal , Bird , Fish แล้วแต่ละประเภท นั้นก็จะมีรายชื่อของ สัตว์ต่างๆ การออกแบบ คลาสต่างๆ ก็จะเหมือนดังแผนภาพ ครับ นั่นก็คือ ผมมี class ที่ชื่อ Animal เป็น ทั้ง datasource , delegate ( NSTableView ) เมื่อดูภาพประกอบคร่าวๆ เรียบร้อยแล้ว ต่อไปก็เริ่มโปรเจคกันเลย

Start New Project

เราก็เลือก view based application ครับ แล้วหลังจากนั้นก็ตั้งชื่ออะไรก็ได้ ในตัวอย่างนี้ผมจะใช้ชื่อว่า AnimalDemo เสร็จแล้วก็จะได้โปรเจคออกมาดังรูปแบบนี้ครับ

เมื่อเรียบร้อยแล้ว ลำดับต่อไป เราก็จะออกแบบหน้าตาของโปรแกรมเราก่อน ก็ทำการเปิด AnimalDemoViewController.xib ขึ้นมา แล้วก็ลาก Table View เข้ามาดังรูปครับ

ก็เป็นอันเสร็จ การออกแบบหน้าตาของโปรแกรม  หลังจากนี้ ลำดับต่อไปก็คือ เขียน class ที่เป็น datasource และ delegate นั่นเอง
เราจะทำการเพิ่ม class เข้ามายัง project ของเราโดยการ เลือกไปที่เมนู File > New File… แล้วก็เลือก ชนิดของ File ดังรูปครับ

หลังจากนั้นก็ตั้งชื่อว่า Animal ก็เป็นอันเสร็จเรียบร้อย ต่อไปเราก็จะมาเขียน code กัน

Implement Delegate & Data Source

อย่างที่เห็นในแผนภาพ ไปแล้ว ว่าเรามี class ที่ชื่อ Animal ที่ประกอบไปด้วย Array ที่เก็บรายชื่อของ สัตว์ต่างๆ เวลาเขียน code ออกมาก็จะได้ประมาณนี้ครับ

#import "Animal.h"
 
@implementation Animal
@synthesize m_animal;
-(id) init
{
	self = [super init];
	m_animal = [[NSMutableDictionary alloc] init];
 
	NSMutableArray* mammal= [[[NSMutableArray alloc] initWithObjects:
		@"Dog",@"Cat",@"Rabbit",@"Tiger",nil] autorelease] ;
 
	NSMutableArray* bird = [[[NSMutableArray alloc] initWithObjects:
		 @"Eagle",@"Hawk",@"Parrot",nil] autorelease];
 
	NSMutableArray* fish = [[[NSMutableArray alloc] initWithObjects:
		 @"Shark",@"Barrachuda",@"Gold Fish"] autorelease];
 
	[m_animal setObject:mammal forKey:@"Mammal"];
	[m_animal setObject:bird forKey:@"Bird"];
	[m_animal setObject:fish forKey:@"Fish"];
 
	return self;
}
// Total Section
-(NSInteger) numberOfSectionsInTableView:(UITableView*) table
{
	NSInteger totalSection = [self.m_animal count];
	return totalSection;
}
 
// Number of row in each section
-(NSInteger) tableView:(UITableView*) tableView
			 numberOfRowsInSection:(NSInteger) section
{
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSInteger rowCount = [[self.m_animal objectForKey:keyValue] count];
	return rowCount;
}
 
// Name of each section
-(NSString*) tableView:(UITableView*) tableView
			 titleForHeaderInSection:(NSInteger) section
{
	NSArray* allKeys = [self.m_animal allKeys];
	NSString* name=[allKeys objectAtIndex:section];
	return name;
}
 
-(UITableViewCell*) tableView:(UITableView*) tableView
		cellForRowAtIndexPath:(NSIndexPath*) indexPath
{
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:
						sampleIndentifier];
	if ( cell == nil ) {
	cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
 
	NSUInteger row = [indexPath row];
	NSUInteger section = [indexPath section];
 
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSArray* animalList = [m_animal objectForKey:keyValue];
	cell.textLabel.text = [animalList objectAtIndex:row];
	return cell;
}
 
-(void) dealloc
{
	[m_animal release];
	[super dealloc];
}
 
@end

Explain

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

-(id) init
{
	self = [super init];
	m_animal = [[NSMutableDictionary alloc] init];
 
	NSMutableArray* mammal= [[[NSMutableArray alloc] initWithObjects:
		@"Dog",@"Cat",@"Rabbit",@"Tiger",nil] autorelease] ;
 
	NSMutableArray* bird = [[[NSMutableArray alloc] initWithObjects:
		 @"Eagle",@"Hawk",@"Parrot",nil] autorelease];
 
	NSMutableArray* fish = [[[NSMutableArray alloc] initWithObjects:
		 @"Shark",@"Barrachuda",@"Gold Fish"] autorelease];
 
	[m_animal setObject:mammal forKey:@"Mammal"];
	[m_animal setObject:bird forKey:@"Bird"];
	[m_animal setObject:fish forKey:@"Fish"];
 
	return self;
}

ฟังก์ชั่นนี้ ไม่ได้มีอะไรมากนอกจาก ประกาศ array ที่ประกอบไปด้วยรายชื่อของสัตว์ต่างๆ และนำมันไปใส่ไว้ใน dictionary ( m_animal ) จริงๆแล้วเราจะใช้ array ทั้งหมดก็ได้นะครับ

// Total Section
-(NSInteger) numberOfSectionsInTableView:(UITableView*) table
{
	NSInteger totalSection = [self.m_animal count];
	return totalSection;
}
 
// Number of row in each section
-(NSInteger) tableView:(UITableView*) tableView
			 numberOfRowsInSection:(NSInteger) section
{
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSInteger rowCount = [[self.m_animal objectForKey:keyValue] count];
	return rowCount;
}
 
// Name of each section
-(NSString*) tableView:(UITableView*) tableView
			 titleForHeaderInSection:(NSInteger) section
{
	NSArray* allKeys = [self.m_animal allKeys];
	NSString* name=[allKeys objectAtIndex:section];
	return name;
}

สองฟังก์ชั่น ข้างบน นั้น เป็นการบอกว่า ตารางนี้ประกอบไปด้วย section ทั้งหมดเท่าไหร่ และแต่ละ section นั้นมีแถวจำนวนเท่าไหร่
ซึ่งจำนวน section ของเราทั้งหมดนั้นมี จะมีเท่ากับ จำนวน array ที่ได้เก็บไว้ใน m_animal นั่นก็คือ 3 และจำนวน แถวของแต่ละ section นั้นก็หามาจาก จำนวนชื่อของสัตว์ในแต่ละ array ที่ได้เก็บไว้นั่นเอง
และฟังก์ชั่นสุดท้าย ก็คือ ชื่อของแต่ละ section ในตัวอย่างผมได้ให้ ชื่อของแต่ละ section น้ันเป็นชื่อของ key ที่ผมได้ใส่ไปใน dictionary ตอนสร้างครั้งแรกนั่นเอง

หมายเหตุ ใน Dictionary เราไม่สามารถจะขอข้อมูลที่เราได้ใส่ไปถ้าหากไม่มี key ดังนั้นแล้ว ผมจึงใช้ ** [NSDictionary allKey] เพื่อที่จะได้ key ทั้งหมดกลับมาซึ่งจะเป็น array ** หลังจากนั้นแล้วค่อยไปไล่หาค่าต่างๆตามลำดับ index ใน array อีกที

ส่วนสุดท้ายก็คือ

-(UITableViewCell*) tableView:(UITableView*) tableView
		cellForRowAtIndexPath:(NSIndexPath*) indexPath
{
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:
						sampleIndentifier];
	if ( cell == nil ) {
	cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
 
	NSUInteger row = [indexPath row];
	NSUInteger section = [indexPath section];
 
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSArray* animalList = [m_animal objectForKey:keyValue];
	cell.textLabel.text = [animalList objectAtIndex:row];
	return cell;
}

เราได้ implement delegate เพื่อที่ตารางจะได้รู้ว่าควรนำอะไรไปแสดง ในแต่ละ section , row
จาก code ข้างบน อธิบายคร่าวก็คือ เมื่อเรา ได้ index path มาแล้วเราหากลุ่มจาก section เมื่อเรารู้กลุ่มแล้ว หลังจากนั้นก็ไปหา ชื่อของสัตว์ตามลำดับของแถว ที่ควรจะแสดง

ก็เป็นอันจบในส่วนของ Animal Class

แต่ยังเหลือในส่วนของ View Controller ที่เรายังไม่ได้เขียนเพิ่มครับ เราต้อง เพิ่ม Animal เข้าไปยัง View Controller ของเรา ก็เปิด File ที่ชื่อ AnimalDemoViewController.h ขึ้นมาครับ
หลังจากนั้นก็เพิ่ม code เข้าไปดังนี้

#import "Animal.h"
@interface AnimalDemoViewController : UIViewController
{
	IBOutlet Animal *m_animalDataSource;
}
@property (nonatomic,retain) Animal* m_animalDataSource;
@end

แล้วส่วน implement ก็จะเป็นประมาณนี้ครับ

#import "AnimalDemoViewController.h"
 
@implementation AnimalDemoViewController
@synthesize m_animalDataSource;
 
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
}
 
- (void)dealloc {
	[m_animalDataSource release];
    [super dealloc];
}
 
@end

ก็เป็นอันเสร็จ อธิบายกันสักนิด ที่เราได้เพิ่มเข้าไปก็คือ Animal ( m_animalDataSource ) แต่เราได้ประกาศให้เป็น Outlet เพื่อที่ว่าจะได้นำไป link กับตารางที่อยู่ interface builder ครับ

Link Object

กลับไปยัง interface builder ครับ เรายังเหลือสิ่งที่ต้องทำอีก อย่างสองอย่าง นั่นก็คือ สร้าง instance ของ Animal ก็เริ่มจาก เปิด AnimalDemoViewController.xib ขึ้นมา หลังจากนั้นก็เพิ่ม Object เข้าไปดังรูปครับ

จากรูป เมื่อ ลาก Object เข้ามาแล้ว เราก็เปิด หน้าต่าง inspector ขึ้นมาครับ แล้วตรง indentity จะเห็น Class เราก็เปลี่ยนให้เป็น Animal ก็เรียบร้อย เพียงเท่านี้เราก็มี Animal Instance เรียบร้อย  หลังจากนั้นก็เชื่อมมันเข้ากับ m_animalDataSource ของเรา ดังรูป

และลำดับสุดท้ายครับ เราต้อง set datasource ให้กับตารางของเรา เราก็ click ขวาไปยังตาราง แล้วก็ลาก เชื่อมเข้ากับ Animal Instance ดังรูปครับ

ก็เป็นอันเสร็จทุกๆอย่างครับ Compile แล้วก็ Run จะเห็นโปรแกรมมีหน้าตา แบบนี้ครับ

ครั้งหน้าเดี๋ยวมาต่อกัน ในเรื่องของ ตารางต่อนะครับ
ตัวอย่าง Source Code ก็กด Download ได้เลยครับ

Technorati Tags: basic, cocoa touch, objective-c, programming, UITableView

Adding Image to Cell

เมื่อครั้งก่อน เราได้ใช้งาน table view ที่ไว้แสดงผลแต่ตัวหนังสือ จริงๆแล้วเราสามารถเพิ่ม รูปภาพเข้าไปยัง cell ได้ด้วย วิธีการก็ไม่ได้ยากอะไรเลยครับ เราก็เพียงแต่ สร้าง image ขึ้นมาแล้วก็ set ให้ cell เท่านั้นเองดูตัวอย่างอาจจะเข้าใจง่ายกว่า จากการ implement ของ method
- (UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath;
ในครั้งก่อน เราจะทำการเพิ่ม image เข้าไป โดยเพิ่ม code เข้าไปดังนี้ครับ

- (UITableViewCell *)tableView:(UITableView *)tableView
   cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	static NSString *identifier = @"Macfeteria Cell";
	UITableViewCell *cell;
	cell = [tableView dequeueReusableCellWithIdentifier:identifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier: identifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	// New Code !!!!
	UIImage *image = [UIImage imageNamed:@"face.png"];
	cell.imageView.image = image;
	//-------------
 
	cell.textLabel.text = [m_studentList objectAtIndex:row];
	return cell;
}
 
}

จะเห็นว่า เราได้เขียน code ขึ้นมาเพิ่มเพียง 2 บรรทัดเองครับ คือ

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

เมื่อ run program หน้าตาก็จะเป็นประมาณแบบนี้

Row Selection

วิธีการจัดการเกี่ยวกับการเลือกแถวในตาราง เราอาจจะใช้ method ที่ใช้ถามว่าแถวไหนถูกเลือกอยู่ โดยเรียกใช้ method ที่ชื่อว่า indexPathForSelectedRow ก็ได้ครับ ตารางก็จะบอกเรามาว่าแถวไหนถูกเลือกอยู่ ดังตัวอย่าง

สมมติว่า ผมเขียน IBAction สำหรับ Button ไว้ชื่อว่า getSelectRow นะครับ

-(IBAction) getSelectRow:(id) sender
{
   NSIndexPath *path = [m_tableView indexPathForSelectedRow];
   NSMutableString *selectRow;
   selectRow = [NSMutableString stringWithFormat:@"Row: %d",[path row]];
   m_text.text = selectRow;
}

ผลลัพธ์ก็จะมีหน้าตาประมาณนี้

เมื่อกด ไปที่ตาราง แล้วก็กด ปุ่มมันก็จะบอกว่า เราเลือกที่แถวไหน ทำได้ไม่ยากเลยครับ
และ table view นั้นมี delegate ที่เกี่ยวกับการเลือกแถวที่น่าสนใจ ได้แก่ delegate แรกจะเป็นการเขียนเหตุการณ์ที่เกิดขึ้นก่อนการเลือกแถว ที่ชื่อว่า
-(NSInteger) tableView: (UITableView*) tableView willSelectRowAtIndexPath: (NSIndexPath*) indexPath
ตัวอย่าง code จะเป็นประมาณนี้ครับ

-(NSIndexPath*) tableView: (UITableView*) tableView
willSelectRowAtIndexPath: (NSIndexPath*) indexPath
{
   NSUInteger row = [indexPath row];
   if ( row == 0 )
	return nil;
 
   NSMutableString *selectRow;
   selectRow = [NSMutableString stringWithFormat:@"Row: %d",[indexPath row]];
   m_text.text = selectRow;
 
   return indexPath;
}

เราอาจจะเอา button ออก แต่เมื่อกดไปที่ตาราง มันก็จะบอกแถวมาเรียบร้อยเลย เพราะว่าเมื่อตารางถูกเลือก มันจะมาเรียก delegate โดยอัตโนมัติ เหมือนกับรูปข้างล่าง

และมีอีก delegate ที่น่าสนใจคือ เหตุการณ์หลังจากกดไปที่แถวของตาราง นั่นก็คือ
-(void) tableView: (UITableView*) tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath
ตัวอย่าง code การใช้งานก็จะเช่นว่า เราต้องการให้มันแสดง alert ขึ้นมาหลังจากกดไปที่แถวของตารางนะครับ ก็จะเขียนได้ประมาณนี้

-(void) tableView: (UITableView*) tableView
didSelectRowAtIndexPath: (NSIndexPath*) indexPath
{
   NSUInteger row = [indexPath row];
   NSString *rowData = [m_nameList objectAtIndex:row];
 
   NSMutableString *msg;
   msg = [NSMutableString stringWithFormat:@"Animal: %@",rowData];
   UIAlertView *alert;
   alert = [[UIAlertView alloc] initWithTitle:@"You select"
              message:msg delegate:nil
	      cancelButtonTitle:@"Ok !!" otherButtonTitles:nil];
   [alert show];
   [alert release];
}

หน้าตาหลังจาก run program ก็จะเป็นแบบนี้ครับ

วันนี้ก็จบเพียงเท่านี้ครับ ครั้งหน้า เดี๋ยวมาต่อด้วย custom cell

Technorati Tags: basic, cocoa touch, iphone, objective-c, programming, UITableView

และวันนี้เราจะมาลองใช้งาน table view กันครับ

Table View ใน Cocoa touch นั้นต่างกับใน Cocoa ปกติอยู่พอสมควร แต่โครงสร้างหลักๆ และหลักการ รวมถึงวิธีการใช้งานก็เหมือนเดิม ฉนั้นแล้วคนที่เคยใช้ NSTableView มาก่อน ก็หวานหมูเลย จริงๆแล้วข้อแตกต่างที่เห็นได้ชัดๆเลยก็คือ Table View ใน Cocoa touch นั้นสามารถแสดงผลได้ทีละ 1 column เท่านั้น !!! ใน Cocoa touch นั้นจะมี Class เป็น table view ชื่อว่า UITableView และแต่ละ object ที่อยู่ในแถวจะเรียกว่า Cell ( UITableViewCell ) และเนื่องจากว่า cell นั้นเป็น subclass ของ UIView  นั่นหมายความว่า เราสามารถ ใส่ control ต่างๆที่เป็น UIView หรือ subclass ของ UIView เข้าไปใน cell ได้มากมาย อาจจะใส่รูป ใส่ปุ่มกด ตัวหนังสือก็ได้ หรือแม้กระทั่งใส่ table view เข้าไปก็ยังได้ ( เห็นไหมครับว่ามันสามารถปรับแต่งได้สุดๆ )

ก่อนที่เราจะเริ่มผมอยากจะให้กลับไปทำความเข้าใจ เกี่ยวกับการทำงานของ table และ delegate ก่อน

UITableView จะมี helper object ที่ชื่อว่า data source ช่วยในการแสดงผลของข้อมูล ซึ่งการทำงานของ UITableView จะไม่ใช่ลักษณะที่ตัวโปรแกรมเป็นคนสั่งบอกกับ UITableView ว่าให้แสดงคำว่า Saved Photo ในแถวที่หนึ่ง แต่ในทางกลับกัน UITableView มันจะไปถาม helper object เองว่าในแถวที่หนึ่งมีอะไรที่ต้องแสดง ในกรณีนี้ datasource ก็จะส่ง Saved Photo(1) กลับมาให้ยัง NSTable แบบรูปข้างล่าง

และในการใช้งาน UITableView นั้นเราต้อง implement delegate method ( หากไม่เข้าใจ delegate ควรไปอ่าน cocoa programming delegate ) ด้วยกัน 2 อย่างคือ

• -(int) numberOfRowInTableView NSTableView*) tableView;
  ส่งค่าของจำนวน row กลับมา
• -(id) tableView NSTableView *) tableView
  objectValueForTableColumn NSTableColumn*) tableColumn
  row int) rowIndex;
  ส่ง object ที่ต้องไปแสดงผลที่ row

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

อธิบายโปรแกรมกันก่อนว่าโปรแกรมเราทำอะไร คือโปรแกรมเราจะมี text field เอาไว้ใส่ชื่อนักเรียน หลังจากนั้นเมื่อเรากด Add รายชื่อนักเรียนก็จะไปปรากฎบนตารางของเรา และสามารถลบได้โดยการกด ไปที่แถวที่ต้องการลบ และกด remove

Start

ก่อนอื่นเลยเราก็สร้างโปรเจคแบบ Viewed-Base Application เหมือนๆที่เราเคยทำมาครับ โดยจะตั้งชื่ออะไรก็แล้วแต่ แต่ในโปรเจคนี้ผมตั้งชื่อว่า Student ก็แล้วกัน ก็จะได้โปรเจคหน้าตาแบบในรูป

หลังจากนั้นเราจะออกแบบหน้าตาโปรแกรมของเรา โดยเปิด StudentViewController.xib ขึ้นมาครับ แล้วเราก็วาง Control ต่างๆลงไป

จากรูปข้างบน เราได้วาง UITable , UIButton , UITextField เพียงเท่านี้ก็เป็นอันเสร็จการออกแบบ อาจจะงงว่า ทำไมไม่เอา Add , Remove ลงมาอยู่ข้างล่างตาราง เหตุผลก็เพราะว่า เมื่อ Keyboard มันโผล่ขึ้นมา มันจะบัง UITextFields ที่เราได้วางลงไป ผมเลยย้ายมันขึ้นมาไว้ข้างบน

Code

ก่อนอื่นเลยมาดูในส่วนของ Header กันก่อนว่า เราจะประกาศอะไรบ้าง

@interface StudentViewController : UIViewController
{
	IBOutlet UITextField *m_textField;
	IBOutlet UITableView *m_table;
 
	NSMutableArray *m_studentList;
 
}
@property (nonatomic,retain) NSMutableArray *m_studentList;
 
-(IBAction) delStudent:(id) sender;
-(IBAction) addStudent:(id) sender;
- (IBAction ) endEdit:(id) sender;
 
@end

ดูจาก code แล้วเราได้ประกาศ outlet มาด้วยกันแค่ 2 ตัวนั่นก็คือ m_textField และ m_table เพื่อที่เราจะได้ติดต่อ UITextFieds และ UITableView ได้ สำหรับในส่วนของ UIButton นั้นเราไม่ได้ต้องการให้มันทำอะไรนอกจาก เรียก action ที่เราต้องการ ฉนั้นก็ไม่ต้องประกาศ outlet ก็ได้ และเราก็ได้ประกาศ action อีก 3 อย่าง ได้แก่ delStudent , addStudent , endEdit ก็แปลตรงๆ ตามชื่อเลยว่าแต่ละ action นั้นเราจะให้มันทำอะไร

@implementation StudentViewController
@synthesize m_studentList;
 
// ******************* Load & Unload ***************************
 
- (void)viewDidLoad
{
    [super viewDidLoad];
	m_studentList = [[NSMutableArray alloc] init];
}
 
- (void)dealloc {
	[m_studentList release];
    [super dealloc];
}
// ******************* Button Action *************************************
 
-(IBAction) addStudent:(id) sender;
{
	NSString *text = m_textField.text;
	if ( [text isNotEqualTo:@""] )
	{
	  [m_studentList addObject:[NSMutableString stringWithString:text] ];
	  [m_table reloadData];
	}
}
 
-(IBAction) delStudent:(id) sender
{
	NSIndexPath *indexPath = [m_table indexPathForSelectedRow];
	if ( indexPath != nil )
	{
		int row = [indexPath row];
		[m_studentList removeObjectAtIndex:row];
		[m_table reloadData];
 
	}
 
}
// ******************* Text Field Action ********************************
- (IBAction ) endEdit:(id) sender
{
	[sender resignFirstResponder];
}
// *************** UITableView Delegate ********************************
-(NSInteger) tableView:(UITableView*) tableView
   numberOfRowsInSection:(NSInteger) section
{
	return [self.m_studentList count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView
   cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
	static NSString *identifier = @"Macfeteria Cell";
	UITableViewCell *cell;
	cell = [tableView dequeueReusableCellWithIdentifier:identifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier: identifier] autorelease];
	}
	NSUInteger row = [indexPath row];
	cell.text = [m_studentList objectAtIndex:row];
	return cell;
}
 
@end

จาก code ข้างบนผมแบ่งออกเป็น 4 ส่วน นั่นก็ส่วนของ

• Load & Unload
• Button Action
• Text Field Action
• UITableView Delegate

เราจะดูในทีละส่วนก่อนเลยละกัน เริ่มจาก Load & Unload ก่อนละกัน

Load & Unload

ในส่วน code ตรงนี้ จะเห็นว่ามี viewDidLoad ซึ่งจริงๆแล้ว viewDidLoad เป็น delegate method ของ UIView ครับ นั่นแปลว่า เมื่อ UIView ของเราถูกโหลดขึ้นมาเสร็จเรียบร้อยแล้ว ก็จะมาถามว่า มีอะไรที่ต้องอีกหรือเปล่า ? ซึ่งก็จะมาอ่าน code ในนี้เหละครับว่า โหลดเสร็จแล้วต้องทำอะไร ถ้าเราดูใน code ภายในก็จะเห็นว่าเราได้บอกว่า หลังจากโหลด UIView นี้ก็ให้จองหน่วยความจำและ init ให้กับ array ของเรานั่นก็คือ m_studentList นั่นเอง และส่วนฟังก์ชั่น dealloc จะถูกเรียกเมื่อโปรแกรมได้จบลง ซึ่งเราก็ได้คืนหน่วยความจำที่เราได้ให้ m_studentList จองไว้นั่นเอง

Button Action

action method ในส่วนตรงนี้เราได้เขียน addStudent เพื่อที่ว่า เราจะนำข้อความจาก text field มาใส่ยัง array ของเรานั่นเอง และส่วน delStudent นั้นก็คือเราจะทำการลบข้อมูลที่ได้เลือกไว้ ออกจากตาราง อธิบายเพิ่มเติมในส่วนของ code นิดหนึ่งครับ วิธีการที่เราจะรู้ว่าแถวในตารางไหนจะถูกเลือก จะเห็นว่าเราได้เรียก

 NSIndexPath *indexPath = [m_table indexPathForSelectedRow];

แต่ indexPath จะยังใช้โดยตรงไม่ได้ เราต้องเรียก [indexPath row] อีกทีเพื่อที่จะได้ตำแหน่งของแถวในตาราง และเมื่อเราได้ลบออกไปแล้ว เราก็ให้ตารางได้ reload เพื่อปรับข้อมูลในการแสดงผล

Text Field Action

ในส่วนของ action สำหรับ text field นั้นจริงๆก็ไม่ได้มีอะไรเลยครับ เราแค่ต้องการให้ เมื่อเราได้พิมพ์ข้อความ และหลังจากกด done เรียบร้อยแล้ว ก็จะให้ keyboard นั้นหายไป วิธีการก็คือเราก็ให้ text field ได้ถอนตัวจากการเป็น first responder นั่นเอง

UITableView Delegate

ก็อย่างที่บอกไปครับว่า เมื่อเราจะใช้ UITableView นั้นเราจำเป็นต้อง implement – delegate ของ UITableView สอง function โดย delegate funciton แรกคือ

-(NSInteger) tableView:(UITableView*) tableView
   numberOfRowsInSection:(NSInteger) section

นั้นเป็นฟังก์ชั่นที่เอาไว้บอกกับ table view ว่ามีจำนวนแถวกี่แถวที่ต้องแสดง และจาก code ที่เราเขียนไป เราก็ได้บอกว่าจำนวนแถวในตารางทั้งหมดของเรา เท่ากับจำนวนของค่าที่เก็บใน m_studentList นั่นเอง

- (UITableViewCell *)tableView:(UITableView *)tableView
   cellForRowAtIndexPath:(NSIndexPath *)indexPath;

สำหรับ delegate method นี้เป็นฟังก์ชั่นที่เอาไว้บอกว่า ข้อมูลที่จะแสดงในแถวของ ตาราง คืออะไร  ** และอย่างที่บอกไปแล้วว่า แถวของตารางนั้นเป็น control ที่เรียกว่า UITableViewCell ** ฉนั้นแล้วเราต้องสร้าง UItableViewCell ขึ้นมาก่อน

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier: identifier] autorelease];

และจากบรรทัดนี้ จะเห็นว่าเราได้ประกาศ cell ขึ้นมาและได้จองหน่วยความจำให้กับ cell พร้อมกับ init เรียบร้อย อาจจะงงตรง ที่เขียนว่า reuseIndentifier ว่ามันคืออะไร คือ UITalbleViewCell นั้นเป็น Subclass ของ UIView นั่นแปลว่า cell ของเรานั้นอาจจะเป็น ข้อความธรรมดา หรืออาจจะเป็น Custom View หรือแม้กระทั่งเป็น table ทั้งอันก็ยังได้ ฉนั้นการที่ มี indentifier ก็เพื่อระบุว่า cell นี้เป็นประเภทไหน ความสำคัญอีกอย่างก็เพื่อจะได้นำกลับมาใช้ใหม่ซึ่งจะอธิบายในลำดับต่อไป

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

	NSUInteger row = [indexPath row];
	cell.text = [m_studentList objectAtIndex:row];
	return cell;

ยังมี code ส่วนที่เหลือนั่นก็คือ

	static NSString *identifier = @"Macfeteria Cell";
	UITableViewCell *cell;
	cell = [tableView dequeueReusableCellWithIdentifier:identifier];

อธิบายเพิ่มเติมนะครับว่า เมื่อเราได้ใช้นิ้วเลื่อนดูค่าในตำแหน่งอื่นๆของตาราง Cell ที่ได้ถูกเลื่อนไปจนไม่สามารถจะแสดงผลที่หน้าจอได้ ตามหลักการทำงานของโปรแกรมแล้ว มันควรจะคืนหน่วยความจำของ Cell นั้นให้กับระบบ แล้วก็จองหน่วยความจำใหม่ ให้กับ Cell ที่จะมาแทนที่ Cell เดิมที่ได้หายไปจากหน้าจอ แต่เนื่องจากว่า iPhone นั้นค่อนข้างจะจำกัดทรัพยากรของระบบ วิศวกรของ Apple เลยออกแบบให้ Cell ที่ได้หายไปจากหน้าจอจะยังไม่ถูกทำลาย แต่จะถูกเก็บไว้ยัง dequeue เพื่อที่ว่าจะได้นำกลับมาใช้ใหม่ ซึ่งจะช่วยลดการจองและคืนหน่วยความจำให้กับระบบบ่อยๆ  ดังนั้นการใช้

	cell = [tableView dequeueReusableCellWithIdentifier:identifier];

ก็เพื่อเพิ่มประสิทธิภาพการใช้งานหน่วยความจำให้กับระบบนั่นเอง สรุปก็คือ ก่อนที่มันจะจองหน่วยความจำใหม่ มันจะไปถาม table ก่อนว่ามี cell ไหนที่สามารถนำกลับมาใช้ได้บ้างหรือเปล่า ถ้ามี ก็ไม่ต้องจองใหม่ แต่ถ้าไม่มี ก็จองหน่วยความจำใหม่นั่นเอง

Link Control

ลำดับต่อไปเราก็จะ link control ต่างๆให้เข้ากับ action ของเราครับ โดยกลับไปที่ interface builder แล้วก็ เชื่อม

• m_table กับ UITableView
• m_textField กับ UITextField

ผมคิดว่าใน tutorial นี้คงไม่ต้อง อธิบายเยอะนะครับว่า เราจะเชื่อม Control และ Action ยังไง ขออธิบายคร่าวๆเลยนะครับ แล้วก็ link action ให้กับ Button ของเรา รวมถึง action ของ m_textField ด้วย

มีส่วนเพิ่มเติมก็คือใน connection inspector ของ UITableView นั้นจะเห็น Delegate และ Data Source ดังรูปครับ ให้ลากเชื่อมเข้ากับ File’s Owner ดังรูป

ที่เราทำตรงนี้ก็เพื่อว่าจะได้บอกให้ table ของเราได้รู้ว่า object ไหนเป็น helper object และ datasource นั่นเอง
ส่วน Action  อื่นๆ เช่น delStudent ก็ลากเข้ากับปุ่ม ให้เรียบร้อย และรวมถึง endEdit ที่ต้องเชื่อมกับ text filed ด้วยนะครับ ถ้าหากเสร็จหมดแล้ว ถ้า click ขวาที่ File’s Owner ก็จะเห็น panel พร้อมกับค่าต่างๆดังรูป

หลังจากก็ลอง Compile & Run ดูครับ เราก็จะสามารถ พิมพ์ข้อความและกด Add เพื่อให้ข้อความนั้นเข้ามายัง table ของเราได้แล้ว

และแน่นอนว่า เราสามารถลบข้อมูลได้ด้วยการเลือกไปยังแถวที่ต้องการและกด remove ดังรูป

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

Download Source :: iPhone – Student List With UITable

Technorati Tags: cocoa touch, iphone, programming, UITableView, UITableViewCell