วันนี้เราจะเขียน 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

เอาละครับ สำหรับวันนี้ เราจะเขียนโปรแกรมที่มีหลายๆ  View กันดูดีกว่า เพราะว่าตั้งแต่เราได้หัดเขียนมานั้น ผมก็ได้เขียนโปรแกรมเป็นลักษณะ  View เดียวตลอดเลย โปรแกรมที่เราจะได้ลองเขียนกันในวันนี้ ก็จะมีหน้าตา แบบนี้ครับ

ดูจากหน้าตา(กระแต)คร่าวๆ คิดว่าคงพอจะทำให้เริ่มอยากลงมือทำกันเลยทีเดียว แต่ช้าก่อน …. อธิบายโปรแกรมกันคร่าวๆ กันก่อนละกัน โปรแกรมที่เราจะเขียนก็ไม่มีอะไรซับซ้อนครับ นอกจาก กดปุ่ม First ก็จะเห็น View อันแรกของเรา และเมื่อ กด Second มันก็จะสลับเอาอีก View ขึ้นมา เท่านั้นเอง

Let’s Start

อย่างที่เกริ่นไว้ตั้งแต่ตอนแรกแล้วครับว่า เราจะลองเขียนโปรแกรมโดยใช้ Template อื่นๆนอกเหนือจาก View Based Application. เราจะได้ลองมาใช้งาน Windows Based Application กัน ก็ก่อนอื่นเราก็สร้างโปรเจคแบบ Windows Based Application อย่างในรูป

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

จะสังเกตว่า File เริ่มต้นที่ XCode ให้มานั้นค่อนข้างจะน้อยทีเดียว และสิ่งที่ขาดหายไปจากการสร้างโปรเจคแบบ View Based Application นั่นก็คือ File ที่มีชื่อประมาณว่า xxxxViewController.h และ xxxxViewController.m นั่นเอง และในโปรแกรมที่เราจะเขียนขึ้นเราก็จะเขียน view controller ของเราเอง

การทำงานของโปรเจคแบบนี้ อธิบายได้คร่าวว่า เมื่อเวลาที่ Program เริ่มทำงา หลังจากนั้นโปรแกรมก็จะสร้าง AppDelegate ขึ้นมา และ AppDelegate นี้เองก็จะประกอบไปด้วยหน้าต่าง (UIWindows) ซึ่งจัดเป็น View เหมือนกัน แต่อย่างที่บอกไปครับว่า เราต้องการให้โปรแกรมของเรา มีหลายๆ View ดังนั้นเราก็ต้องสร้าง View Controller ขึ้นมา เพื่อควบคุม View หลักอื่นๆ ถ้าหากดูตามแผลภาพใหญ่ๆ ก็จะได้ประมาณดังรูปครับ

ดังนั้นแล้ว สิ่งที่เราจะทำต่อไปก็คือ เพิ่ม View Controller เข้าไป

1. อย่างแรกก็คือให้เราเพิ่ม Class เข้าไปยังโปรเจค โดย Class ที่เราจะเพ่ิมเข้าไปก็คือ UIViewController นั่นเหละครับ ดังตัวอย่างรูปข้างล่าง

แล้วก็ตั้งชื่อครับ อย่างตัวอย่างนี้ผมตั้งชื่อว่า MultiviewController ก็เป็นอันเรียบร้อย

2. เมื่อเรามี View Controller ที่เอาไว้จัดการ View แล้ว สิ่งที่เราต้องการเพิ่มเติมก็คือ ตัว content view ที่ใช้งานจริงๆ ในกรณีนี้ผมต้องการ 2 อันที่มีหน้าตาคล้ายๆกัน ให้ชื่อว่า First กับ Second ก็แล้วกันนะครับ ซึ่ง First กับ Second นี้เราอยากจะให้ มันเป็นคนละ Xib ด้วยเลย  ดังนั้นเราจะเพิ่ม class เข้าไป และ class ที่เราจะเพ่ิมเข้าไปก็คือ UIViewController ( เพื่อความง่ายในการ load view จาก xib  ) โดยตั้งชื่อว่า FirstView กับ SecondView

สรุปตอนนี้ เราได้เพิ่ม Class เข้ามาทั้งหมด 3 class ด้วยกัน โดย ทั้งหมดนั้นเป็น UIViewController หมดเลย ซึ่งประกอบไปด้วย

• MultiViewController
  เป็นตัวจัดการ Content View ซึ่งนั่นก็คือ FirstView กับ SecondView
• FirstView และ SecondView
  เป็น Content View ที่ประกอบไปด้วย control อื่นๆเช่น image , button เป็นต้น

3. เมื่อเรามี Class ต่างๆแล้ว ต่อไปเราก็จะเพิ่ม Xib File เข้ามายังโปรเจค ก็ทำคล้ายกับการเพ่ิม class น่ันเหละครับ แต่เราก็เลือก ชนิดของ File ให้เป็น View Xib เหมือนดังรูป

โดยให้ชื่อว่า First กับ Second เพื่อที่จะได้รู้ว่า xib  นี้เป็นของ class ไหน

Design Interface

เมื่อเรามี class ต่างๆแล้ว ลำดับต่อไป เราก็จะออกแบบหน้าตาโปรแกรม ของเราครับ อันดับแรก เราจะออกแบบหน้าตา Xib แรก ของเราก่อนนั่นก็คือ MainWindow.xib หน้าตาออกมาประมาณนี้ครับ

ผมได้ใส่ Segment Control เข้าไป เพื่อที่ว่า จะได้กด สลับระหว่าง First กับ Second ครับ
และก็ต่อด้วย First.xib ครับ

ส่วนหน้าตาของ Second.xib ก็อาจจะเป็นแบบนี้ครับ

จริงๆแล้วไม่จำเป็นต้อง ออกแบบหน้าตา แบบนี้ก็ได้นะครับ

Code

ในส่วนของการเขียนโปรแกรมนั้น ถ้าหากดูจากแผนภาพที่ 4 ก็จะเห็นว่า AppDelegate นั้นมี ViewController ฉนั้นแล้ว ก็เดาได้เลยครับว่า เราจะเพิ่ม View Controller เข้าไปยัง AppDelegate มาดู Code ส่วน MultiViewAppDelegate.h กันเลยครับ

@interface MultiViewAppDelegate : NSObject
{
	UIWindow *window;
	MultiViewController *m_viewController;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet MultiViewController *m_viewController;
 
@end

ดูจาก code ข้างบน ก็ได้เพิ่ม View Controller เข้าไปครับ นั่นก็คือ MultiViewController นั่นเอง ส่วน implement นั้นก็มีแก้ไขนิดหน่อยครับ โดยเราจะแก้ method นี้ครับ

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
 
	// Override point for customization after application launch
	[window addSubview:m_viewController.view];
	[window makeKeyAndVisible];
}

เราได้เพิ่มไปแค่ 1 บรรทัดครับ นั่นก็คือ addSubview: นั่นเอง เพื่อที่จะได้ให้ MultiViewController เป็นตัวควบคุม view อื่นๆให้กับ AppDelegate นั่นเอง

ยังเหลือ ส่วนสำคัญที่เราต้องเขียนเพิ่มนั่นก็คือ View Controller ของเรานั่นเอง เอาละครับ เปิด MultiViewController.h ขึ้นมาแล้วก็แก้ไข Code ให้เป็นแบบนี้ครับ

@interface MultiViewController : UIViewController
{
	FirstView *m_firstView;
	SecondView *m_secondView;
}
 
@property (retain, nonatomic) FirstView *m_firstView;
@property (retain, nonatomic) SecondView *m_secondView;
 
-(IBAction) changeViews:(id) sender;
 
@end

จาก code ข้างบนจะเห็นว่า controller ของเรา ประกอบไปด้วย FisrtView กับ SecondView และเราก็มี method ที่ชื่อว่า changeView เพื่อที่จะทำหน้าที่สลับ view นั่นเองครับ

สุดท้ายแล้วครับ เราก็เขียนส่วนของ implement ครับ

@implementation MultiViewController
@synthesize m_firstView;
@synthesize m_secondView;
 
- (void)viewDidLoad {
	[super viewDidLoad];
	FirstView *first;
	first = [[FirstView alloc] initWithNibName:@"FirstView" bundle:nil];
	self.m_firstView = first;
	[self.view insertSubview:m_firstView.view atIndex:0];
	[first release];
}
 
-(IBAction) changeViews:(id) sender
{
	if( self.m_secondView == nil)
	{
		self.m_secondView =[[SecondView alloc]
		initWithNibName:@"SecondView" bundle:nil];
	}
	// Switch View
	if( m_firstView.view.superview == nil )
	{ 	[m_secondView.view removeFromSuperview];
 		[self.view insertSubview:m_firstView.view atIndex:0];
	}
	else
	{
		[m_firstView.view removeFromSuperview];
		[self.view insertSubview:m_secondView.view atIndex:0];
	}
 }  
 
- (void)dealloc
 {
	[m_firstView release];
	[super dealloc];
}
@end

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

เอาละครับ มาดูกันต่อในส่วนของ changeViews ครับ
ในส่วนนี้นั้น คร่าวๆก็คือ เราตรวจสอบว่า View ไหนแสดงผลอยู่ แล้วหลังจากนั้นก็ให้  View นั้นได้ถูกนำออกไป (  removeFromSuperview ) แล้วก็โหลด view ใหม่เข้ามาแทน และจะเห็นว่า มาโหลด SecondView ทีหลังครับ

Link With Interface

หลังจากเขียนโปรแกรมกันคร่าวๆ แล้วลำดับต่อไปก็คือ การเชื่อม interface ให้เข้ากับ code นั่นเอง เราก็ย้อนกลับไปยัง interface builder ครับ โดยเราจะเปิด MainMenu.xib ขึ้นมาก่อน

• ให้ลาก View Controller เข้ามายัง Document Windows ของเราครับ
• หลังจากนั้น set class ใน attribute windows ให้เป็น MultiViewController ดูรูปประกอบครับ

และลำดับสุดท้ายสำหรับ MainMenu.xib นี้ เราจะเชื่อม Segment Control เข้ากับ changeView: ครับ ดูรูปประกอบ

เสร็จเรียบร้อย เราก็เปิด xib ตัวต่อไปครับ นั่นก็คือ FirstView.xib สิ่งที่เราจะทำก็คือ เราจะเปลี่ยน File’s Owner ให้เป็น FirstView ครับ ดูรูปประกอบ

แล้วก็เปิด SecondView.xib ขึ้นมาแล้วก็เปลี่ยน File’s Owner ให้เป็น SecondView

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

ไว้เจอกันครั้งหน้าครับ

Download Project Multiple View

Technorati Tags: cocoa touch, iphone, programming

และวันนี้เราจะมาลองใช้งาน 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

• UIImageView
• UITextField
• UISwitch
• UISlider
• UIActionSheet
• UIAlertView

หน้าตาโปรแกรมที่เราจะได้ลองทำก็ออกมาประมาณนี้

อธิบายกันก่อนว่าโปรแกรมเราทำอะไร

โปรแกรมที่เราจะทำก็คือ เราจะทดลองเล่นกับ UIImageView โดยเราสามารถ กด on/off เพื่อแสดงรูปหรือไม่แสดง และสามารถปรับค่า alpha (ค่าความโปร่งแสง) ของรูปจาก slider อีกทั้งเราจะได้ทดลองใช้ UIActionSheet และ UIAlertView

Let’s Go

ก่อนอื่นเราก็สร้างโปรเจคขึ้นมาครับ ให้ชื่อว่าอะไรก็ตามใจเลยครับ หลังจากนั้น เราก็ลาก Image View , Slider ,Switch , Label เข้ามาดังรูป

จาก interface ที่เราได้ออกแบบไว้ จะเห็นว่า ผมได้นำ image view วางไว้ตำแหน่งเดียวกัน กับ Label ( Macfeteria ) เลย คือที่ทำอย่างนี้ก็เพื่อว่าอยากจะให้เห็นว่า เมื่อเราปรับค่า Alpha ของรูปแล้ว มันจะโปร่ง และถ้ารูปยิ่งโปร่งมากก็จะเห็นคำว่า Macfeteria มากขึ้น แล้วเราก็ลอง Compile/Run ดูครับ จะเห็นหน้าตาประมาณนี้

จะเห็นว่า UIImageView นั้นได้หายไป ก็เพราะว่าเรายังไม่ได้ใส่รูปให้มันนั่นเอง

ต่อไปเราจะเพิ่มรูปเข้าไปยัง โปรเจคของเราเพื่อนำมาใช้กับ image view วิธีการก็ไม่ยาก เราก็ Click ขวาไปที่ Resource แล้วก็เลือก Add > Existing Files … แล้วก็เลือกไฟล์รูปที่ต้องการ เมื่อเสร็จแล้วจะเห็นว่า ไฟล์ที่เราได้เลือกไป ได้เข้ามาอยู่ใน Resource เรียบร้อยแล้ว

กลับไปยัง Interface builder แล้วก็เลือกที่ UIImageView แล้วก็เปิด Inspector ขึ้นมา จะเห็นว่ามี Attribute ต่างๆให้ปรับ อธิบายทีละอย่างแล้วกัน

• Image เป็นชื่อ file  ที่เราจะต้องการจะแสดงที่ imageview นี้
• Mode การจัดการเกี่ยวกับภาพเป็นต้นว่า ปรับให้พอดีกับขนาด imageview , กำหนดให้ภาพอยู่ตรงกลางของ imageview เป็นต้น
• Alpha ความโปร่งใส ถ้าไม่โปร่งเลยคือ 1.0 ถ้ายิ่งเลขน้อยก็จะยิ่งโปร่งใส
• Tag เป็นค่าคงที่ของ object นี้ ( เดี๋ยวจะได้ใช้ในครั้งหน้า )
• Drawing
  • Opaque บอกให้ uiimageview ไม่ต้องวาด object ที่อยู่ข้างหลัง ( ควรจะใช้ เพราะมันเพิ่มประสิทธิภาพ )
  • Hidden ก็แปลตรงเลยครับว่า จะให้มันซ่อน หรือแสดง
  • Clip Subviews จะทำการตัดขอบให้ไม่เกินขนาดของ view
• Interaction
  • User Interaction Enabled ถ้าเปิด option นี้ก็จะทำให้ object  นี้สามารถตอบสนองต่อ event ต่างๆได้
  • Multiple Touch ก็เปิดให้ใช้งาน multiple touch ได้นั่นเอง

เมื่อเราได้ใส่รูปภาพเข้าไปแล้ว ถ้าลอง complie / run ก็จะเห็นรูปปรากฏยัง uiimageview ของเราเรียบร้อยแล้ว

Implement Controller Class

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

@interface GUIViewController : UIViewController
{
	IBOutlet UIImageView *m_imageView;
	IBOutlet UISlider *m_slider;
	IBOutlet UISwitch *m_switch;
	IBOutlet UITextField *m_textField;
}
@property (nonatomic,retain) UIImageView* m_imageView;
@property (nonatomic,retain) UISlider* m_slider;
@property (nonatomic,retain) UISwitch* m_switch;
 
-(IBAction) adjustAlpha:(id) sender;
-(IBAction) imageVisible:(id) sender;
@end

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

@implementation GUIViewController

aa

@implementation GUIViewController
@synthesize m_imageView;
@synthesize m_slider;
@synthesize m_switch;
 
-(IBAction) adjustAlpha:(id) sender
{
	float value = [m_slider value];
	[m_imageView setAlpha:value];
}
 
-(IBAction) imageVisible:(id) sender
{
	if ( [m_switch isOn] == YES )
		[m_imageView setHidden:NO];
	else
		[m_imageView setHidden:YES];
}
@end

จาก code ข้างบน function ที่ชื่อ adjustAlpha เราจะไป link เข้ากับ slider เพื่อที่ว่า เมื่อเราเลื่อน slider ค่าของ alpha ก็จะเปลี่ยนไป และเราก็มี imageVisible ที่คอยเปิดปิด imageView ของเรา คิดว่าไม่น่ายากนะครับ

และหลังจากนั้น เราก็จะเชื่อม code ที่เราได้เขียนไปกับ interface ที่เราได้ออกแบบไว้

เราก็ลาก link เชื่อมกับ image view , slider , switch กับ m_imageView , m_slider , m_switch ตามลำดับ

หลังจากเสร็จแล้ว เราก็เชื่อม method ที่ชื่อว่า adjustAlpha เข้ากับ slider และ imageVisible เข้ากับ swich ให้เรียบร้อย  เมื่อเสร็จแล้ว click ขวาที่ File’s Owner ดูก็จะเห็นว่า object ต่างๆ ได้เชื่อมเข้าด้วยกันเรียบร้อยแล้ว

อย่าลืมปรับค่า max , min ของ slider ด้วยนะครับ เพราะ alpha ของ image มีแค่ 0 – 1.0 เราก็เปิด inspector ขึ้นมาแล้วก็ปรับ ค่า max ,min ให้เรียบร้อยดังรูป

เมื่อเสร็จแล้วก็ Compile / Run ดูครับ แล้วลองเลื่อน slider ไปมาดูครับว่า ถ้าเราเลื่อนซ้ายรูปเราได้จางจนมองเห็นคำว่า macfeteria และเมื่อเลื่อนไปด้านขวารูปก็จะชัดขึ้นตามไปด้วยหรือเปล่า

Action Sheet

จริงๆแล้ว action sheet ก็คล้ายๆกับ message box นะครับ คือจะเป็น message ขึ้นมาพร้อมกับ ปุ่มให้เราเลือกว่าจะ ok , cancel ประมาณนี้ และเราก็จะได้ลองใช้งานกัน สิ่งต่อไปที่เราจะทำเพิ่มเติมในโปรแกรมของเราก็คือ เราจะมี text field และ button อย่างละอัน โดยเมื่อกดไปที่ปุ่ม ก็จะมีหน้าต่าง action sheet ขึ้นมา ถ้ากด ok ก็จะมี alert ขึ้นมา บอกว่า Hello อะไรประมาณนี้

ก่อนอื่นเราก็ไปเพิ่ม button และ text field ให้กับ interface ของเราดังรูป

เมื่อเราได้วาง text field ลงไปยัง interface ของเราแล้วต่อไปเราจะมาทำความรู้จัก attribute ต่างๆของ text fields เพิ่มเติมกันอีกสักนิดว่ามีอะไรบ้าง

• Text Field
  • PlaceHolder คือข้อความลางๆ ( สีเทาๆ ) เวลาที่ไม่มีอะไรอยู่ใน text field เลย
  • Clear When Editing Begins จะลบข้อความเก่า ทุกครั้งที่แก้ไข text field
  • Adjust To Fit ปรับขนาดตัวหนังสือให้พอดี แต่ไม่ตำ่ว่า ขนาดที่เรากำหนด
• Text Input Traits
  • Capitalize เลือกว่าจะให้ตัวหนังสือเป็นตัวพิมพ์ใหญ่ หรือพิมพ์เล็ก โดยอาจจะแบ่งเป็นคำๆ หรือประโยค
  • Correction โปรแกรมจะตรวจความถูกต้องให้ด้วยว่า พิมพ์ถูกหรือไม่
  • Type แป้นพิมพ์เป็นแบบไหน ( ตัวหนังสือ , ตัวเลข , url ,เบอร์โทร )
  • Appearance ( Default , Alert ) ถ้าปรับเป็น alert แป้นพิมพ์จะโปร่งใสนิดๆ
  • Return Key ( Go , Done , etc ) ตรงนี้เราปรับ return key ให้ กับ keyboard อย่างตัวอย่างรูปข้างล่าง ผมปรับให้เป็น Yahoo!
    

ต่อไปก็คือเราจะเพิ่ม outlet เข้าไปยัง controller class ของเรา

// Outlet
IBOutlet UITextField *m_textField;
 
// Action
-(IBAction) saySomeThing:(id) sender;
-(IBAction) endEdit:(id) sender;

และในส่วน implement endEdit ก็มีดังนี้

- (IBAction ) endEdit:(id) sender
{
	[sender resignFirstResponder];
}

จาก code ข้างบน [sender resignFirtResponder] เราจะนำไป link เข้ากับ text field ของเราเพื่อที่ว่า เมื่อ user พิมพ์ข้อความเข้าไปยัง text field แล้ว เมื่อกด return ก็ให้เปลี่ยน first responder ไปยัง object อื่น เพราะถ้าหาก เราไม่ resign firstponder แล้วละก้อ แป้น keyboard ก็จะค้างอยู่แบบนั้น

เสร็จแล้วเราก็ link เข้ากับ event ที่ชื่อว่า Did End On Exit

และส่วน source code ของ saySomeThing ก็ได้ประมาณนี้

// Outlet
-(IBAction) saySomeThing:(id) sender
{
	UIActionSheet *actionSheet = [[UIActionSheet alloc]
			initWithTitle:@"คนไทยหรือเปล่า ?"
			delegate:self
			cancelButtonTitle:@"ไม่อ่ะ"
			destructiveButtonTitle:@"เป็นสิครับ"
			otherButtonTitles:nil];
	[actionSheet showInView:self.view];
	[actionSheet release];
}

จาก code ข้างบนจะอธิบาย คร่าวๆก็คือ เราได้ประกาศ Action Sheet ขึ้นมาและกำหนดค่าต่างๆให้กับ sheet เป็นต้นว่า ข้อความต่างๆ และส่วนที่สำคัญมากคือ delegate:selft

*** ยังจำ delegate ได้ไหมครับ ? ****
สรุปง่ายๆว่า delegate:self เนี่ย เราได้กำหนดให้คลาสที่จะตอบสนองต่อ delegate method ของ action sheet นี้คือ คนที่สร้างตัวมันเอง ( ในกรณีนี้คือ GUIViewController ) และ delegate method ของ action sheet นี้ก็เช่นว่า  เมื่อกด ok ให้ไปทำอะไร เมื่อกด cancel ให้ไปทำอะไร

แล้วเราก็ link ให้เข้ากับ button ของเรา

เราลอง compile / run แล้วกด Say Something ! ดูครับ

กดแล้วก็ยังไม่เห็นว่ามีอะไรเกิดขึ้น ต่อไปเราจะ implement ส่วนของ delegate ของ action sheet กัน

Delegate

action sheet มี delegate method ต่างๆ ดังนี้

// Called when a button is clicked. The view will be
// automatically dismissed after this call returns
- (void)actionSheet:(UIActionSheet *)actionSheet
			clickedButtonAtIndex:(NSInteger)buttonIndex;
 
// Called when we cancel a view (eg. the user clicks the Home button).
// This is not called when the user clicks the cancel button.
// If not defined in the delegate, we simulate a click in the cancel button
- (void)actionSheetCancel:(UIActionSheet *)actionSheet;
 
// before animation and showing view
- (void)willPresentActionSheet:(UIActionSheet *)actionSheet;
 
// after animation
- (void)didPresentActionSheet:(UIActionSheet *)actionSheet;  
 
// before animation and hiding view
- (void)actionSheet:(UIActionSheet *)actionSheet
			willDismissWithButtonIndex:(NSInteger)buttonIndex;
// after animation
- (void)actionSheet:(UIActionSheet *)actionSheet
			didDismissWithButtonIndex:(NSInteger)buttonIndex;

ผมเลือกใช้

- (void)actionSheet:(UIActionSheet *)actionSheet
			clickedButtonAtIndex:(NSInteger)buttonIndex;

ก็แล้วกันนะครับ และเราก็จะมา implement delegate ตัวนี้กัน โดย code มีดังนี้

- (void)actionSheet:(UIActionSheet *)actionSheet
				clickedButtonAtIndex:(NSInteger)buttonIndex
{
 
	NSMutableString *text
	text = [NSString stringWithFormat:@"สวัสดีครับคุณ%@",[m_textField text] ];
	if ( buttonIndex == [actionSheet destructiveButtonIndex])
	{
		UIAlertView *alert;
		alert = [[UIAlertView alloc] initWithTitle:@"ยินดีนะจ๊ะ"
		message:text delegate:self cancelButtonTitle:@"ตกลง"
		otherButtonTitles:nil];
 
		[alert show];
		[alert release];
	}
}

จาก code ข้างบน ก็คือ ถ้าหาก user กดปุ่ม action sheet เป็นปุ่ม destructive ก็ให้ Alert ขึ้นมา บอกว่า “สวัสดีครับคุณ” พร้อมกับข้อความใน text field ที่ user ได้พิมพ์ลงไป
ลอง compile / run ดูครับ

เมื่อกด Say Something ! ก็จะเห็น action sheet ขึ้นมา ถ้าหากกด “เป็นสิครับ” ก็จะเห็น Alert ขึ้นมาบอกว่า “สวัสดีครับคุณ ปานวาด” ทำนองนี้ ดังเช่นรูปข้างล่าง

เป็นไง บ้างครับ สำหรับวันนี้ ได้ลองใช้งาน UI หลายตัวมากๆ มี คอมเม้น ตำชม แนะนำกันได้ครับ

Download Source

Technorati Tags: cocoa touch, iphone, programming

อย่างที่บอกไปครับว่าหลังจากที่เราได้มั่วๆเขียน iPhone  กันไปตั้งแต่แรกๆ ดังในตัวอย่าง http://www.macfeteria.com/2008/09/iphone-programming-begin หลายคนอาจจะทำตามโดยที่ไม่รู้อะไรเลย เอาเป็นว่าวันนี้ผมจะอธิบายให้เข้าใจเบื้องต้นก่อนแล้วกัน โดยปกติแล้วการเขียนโปรแกรมด้วย Cocoa นั้น นอกจากเราจะเขียน Class และประกาศ member , variable , method ต่างๆแล้ว ยังมีส่วนสำคัญอยู่อีก สองอย่างคือ

IBOutlet

IBOutlet เป็นการประกาศให้ IB ( interface builder ) รับรู้ว่า ตัวแปรนี้ สามารถเชื่อมต่อเข้ากับ Object ใน nib , xib ได้  พูดอีกในทางหนึ่งได้ว่า IBOutlet จะเป็นตัวแทนของ Object ที่เราได้ออกแบบใน IB นั่นเอง

IBAction

เมื่อเราต้องการให้ Control ต่างๆใน interface builder สามารถตอบสนองต่อ action ได้ เราต้องประกาศ method ให้เป็น IBAction ยกตัวอย่างว่า ถ้าเราจะเขียนว่า กดปุ่มแล้วให้ไปเรียกใช้ method นี้ เราต้องประกาศใน method ให้เป็น IBAction โดยปกติแล้ว การประกาศ IBAction จะรับ parameter เป็น idโปรแกรมที่เราจะได้ทดลองเขียนกันวันนี้ไม่มีอะไรมากเลยครับ เป็นโปรแกมทดลองการใช้งาน IBOutlet และ IBAction โดยหน้าตาโปรแกรมเป็นดังรูป

โปรแกรมที่เราจะทำ ก็คือ เมื่อเรากด ปุ่มมันก็จะเปลี่ยน ตัวหนังสือ บนปุ่มให้เป็นเหมือนข้อความใน text field เช่นว่า ถ้าเราพิมพ์ Hello World ถ้ากด Button A มันก็จะเปลี่ยนกลายเป็นคำว่า Hello World ตามไปด้วย ง่ายไม๊ครับ ? ก้ออย่างที่บอกไปว่า เราต้องการจำทำความเข้าใจ เกี่ยวกับ IBAction และ IBOutlet งั้นมาเริ่มเลย

ก่อนอื่นก็เปิด Project ใหม่ขึ้นมา ให้เป็นแบบ View-Base Application จะตั้งชื่อว่าอะไรก็ได้นะครับ อย่างตัวอย่างนี้ผมตั้งว่า ButtonDemo

หลังจากันนั้น เราก็จะออกแบบหน้าตา interface ของเรา โดยเปิดไฟล์ ButtonDemoViewController.xib ขึ้นมา ( ถ้าหากว่าตั้งชื่อ Project เป็นอย่างอื่น ก็จะเห็น .xib ชื่อประมาณว่า xxxxxxxController.xib แทน ) แล้วเราก็วาง Text Field แล้ว Round Rect Button

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

เมื่อเราได้ออกแบบหน้าตาโปรแกรมเป็นดังที่เราต้องการแล้ว ลำดับต่อไปก็คือ การเขียน Code ก็เริ่มด้วยการเขียน code เพิ่มเข้าไปยัง ButtonDemoViewController.h

@interface ButtonDemoViewController : UIViewController
{
	IBOutlet UITextField *m_textBox;
}
-(IBAction) printTitle:(id) sender;
@end

ดูจาก Code ข้างบน เราได้ประกาศ IBOutlet ที่เป็น UITextField ขึ้นมา ก็เพื่อว่า เราต้องการที่จะ นำข้อความที่เราพิมพ์ ใน text Field มาแสดงยัง button ของเรา ฉนั้นแล้วเราก็ต้องประกาศ Outlet เพื่อให้ ButtonDemoViewController สามารถใช้งาน UITextFields ที่เราได้ออกแบบใน .xib ได้นั่นเอง

มาถึงตรงนี้ อาจจะสงสัยว่า แล้ว Button อีกทั้งสองอัน ไม่ต้องประกาศ outlet ด้วยหรือ ? คำตอบก็คือไม่ต้องครับ เพราะว่า เราไม่ต้องการใช้ค่าต่างๆของ button หรือปรับเปลี่ยนค่าของ button ต่างกับ text Field ที่เราต้องการ ค่าที่ได้จากการพิ่มพ์เข้ามา เราถึงต้องประกาศให้มี IBOutlet ที่เป็น UITextField สำหรับปุ่มของเรานั้นต้องการคือ เมื่อกดปุ่มแล้วจะให้ทำอะไร ดังนั้นจึงต้องประกาศ action ขึ้นมา นั่นก็คือ เราได้ประกาศ printTitle ขึ้นมาเป็น Action ของการกดปุ่มนี้

หลังจากนั้น เราก็กลับมายัง Interface Builder อีกครั้ง เพื่อทำการเชื่อมต่อ xib ของเราเข้ากับ action และ outlet ที่เราได้ประกาศไว้ โดยเรา

• Click ขวา ที่ File’s Owner ของเรา
• กดที่ ช่องกลมๆ แล้วลากไป ยัง text field

สิ่งที่เราได้ทำไป ก็คือ เราได้บอกว่า ให้ m_textBox ของเรา ได้เชื่อมเข้ากับ Text Field ที่เราได้ออกแบบไว้ พูดง่ายๆก็คือว่า เราได้ให้ m_textBox ของเรามีค่าเท่ากับ Text Field ที่เราได้ออกแบบไว้นั่นเอง

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

• เลือกปุ่มแล้วกด Ctrl ค้าง
• ลากมายัง File’s Owner แล้วปล่อย mouse
  
• หลังจากนั้นเราจะเห็น Panel (กล่องสีดำๆ) ขึ้นมา แล้วก็เลือกไปที่ printTitle
  
• ในส่วนของ Button อีกอันก็ทำแบบเดียวกัน
• ถ้ากด Click ขวาที่ File’s Owner สังเกตตรง Receive Actions จะเห็นดังรูป แสดงว่าทำถูกแล้ว
  

ต่อไป เราก็จะเขียน code ในส่วนของ action ที่เราได้ประกาศขึ้นมา โดยเปิด  ButtonDemoViewController.m ของเรา แล้วก็เพิ่ม code เข้าไปดังนี้

-(IBAction) printTitle:(id) sender
{
 
	if (m_textBox.text != @"")
	{
		[sender setTitle:m_textBox.text forState:UIControlStateNormal];
	}
}

ดูจาก Code ของโปรแกรม อธิบายการทำงานคร่าวๆ ได้ว่า

• เมื่อปุ่ม ถูกกด มันจะเรียก printTitle พร้อมกับส่ง parameter ที่เป็นบอกว่าใครเป็นคนกด ( sender )
• หลังจากนั้นไปเรียกใช้ method ที่ชื่อว่า setTitle: forState:  โดยเราก็นำข้อความ จาก m_textBox และกำหนดให้อยู่ใน state ปกติ

ลอง Compile ดูครับ แล้วลองพิมพ์ข้อความ แล้วก็กด ปุ่มดูครับ จะเห็นว่า ปุ่มที่ถูกกด จะถูกเปลี่ยนข้อความบนปุ่ม

Object State

ถ้าสังเกต ดูดีๆ เวลาที่เรากดปุ่ม B ค้างไว้ จะเห็นว่าข้อความจะเป็น “Button B” เมื่อปล่อยแล้วถึงจะเป็น “Hello World” ดังรูป

เพราะว่า จาก code ของเราจะเห็นว่าเราได้ setTile: forStete ให้เป็น UIControlStateNormal เมื่อขณะที่ปุ่มได้ถูกกด state ของปุ่มจะเปลี่ยนเป็น UIControlStateHighlighted ถ้าเราเปลี่ยน code จาก UIControlStateNormal ข้างบนให้เป็น UIControlStateHighlighted ก็จะเห็นผลลัพธ์ แบบนี้

More Event

อย่างที่เราได้ลองกันไป จะเห็นว่า Event สำหรับปุ่มนั้น ที่เราได้ทำไปคือ “ปุ่มได้ถูกกดลงไป” เท่านั้นเอง
จริงๆแล้ว UIButton นั้นสามารถรับ event ต่างๆได้มากมาย อาทิเช่นการ Drag เราสามารถกำหนด ให้ event ต่างๆ สามารถเรียกใช้ action ต่างกันก็ได้ ถ้าเราลองกด click ขวา ที่ปุ่มของเราก็จะเห็น Panel ดังรูป

จะเห็นว่ามี Events ต่างๆมากมาย และจะพบว่า Event ที่ได้เรียก printTitle: นั้นคือ Touch Up Inside คือแปลได้ว่า ” กดปุ่ม และ เมาส์ก็ยังอยู่ในบริเวณปุ่ม ” เราลองกด ปุ่ม Button B แล้วลองเลื่อน mouse ออกนอกปุ่มดูสิครับ จะเห็นว่า ข้อความไม่เปลี่ยน นั่นก็เพราะว่า Event ที่เกิดขึ้นไม่ใช่ Touch Up Inside แต่เป็น Touch Up Outside

เราสามารถทดลองการใช้งาน Event อื่นๆได้ เช่นเราเพิ่ม IBAction เข้าไป โดยให้ ชื่อว่า setHelloWorld และมี code แบบนี้

-(IBAction) setHelloWold:(id) sender
{
	[sender setTitle:@"Hello Macfeteria" forState:UIControlStateNormal];
}

แล้วสิ่งที่เราจะทำก็คือ เราจะลองใช้ event ที่ชื่อว่า Touch Drag Exit

การใช้ Event อื่นๆก็ไม่ได้ยากครับ คือ เราก็ลาก mouse ที่จาก Event ที่เราต้องการไปยัง File’s Owner

แล้วก็เลือก Action ที่เราต้องการ ดังรูป ( เราก็เลือก setHelloWorld)

แล้วเราก็ลอง Compile แล้วก็ลอง กด ไปที่ปุ่ม แล้วก็เลื่อน mouse ออกไป จนสุดๆ จะเห็นว่า ปุ่มของเราจะเปลี่ยนเป็น Hello Macfeteria ดังรูป

ก็เป็นอันจบ สำหรับ tutorial นี้ครับ คิดว่าน่าจะเข้าใจ เรื่องของ Action & Event รวมถึง Outlet นะครับ ครั้งหน้าเราจะได้ลองใช้งาน UI อื่นๆเพิ่มมากขึ้น

สงสัย แนะนำ คอมเม้น กันได้ครับ ถามใน Forum ก็ได้ครับ

Technorati Tags: cocoa, cocoa touch, iphone, programming