iPhone Programming VI : Table View ( Path 2 )

วันนี้มาต่อเรื่องของ table view กันหน่อยดีกว่า

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 หน้าตาก็จะเป็นประมาณแบบนี้

table_with_image

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_with_row_selected

เมื่อกด ไปที่ตาราง แล้วก็กด ปุ่มมันก็จะบอกว่า เราเลือกที่แถวไหน ทำได้ไม่ยากเลยครับ
และ 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 โดยอัตโนมัติ เหมือนกับรูปข้างล่าง

table_with_row_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 ก็จะเป็นแบบนี้ครับ

table_with_delegate_alert

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

Technorati Tags: , , , , ,


6 responses so far, want to say something?

  1. Avatar

    iAeawz says:

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

    คือผมกำลังศึกษาการเขียนโปรแกรมบนไอโฟนเพื่อทำโปรเจคจบตรีอยู่อ่ะครับ

    tutorial ของคุณมีประโยชน์มาก

    ถ้าเป็นไปได้อยากให้ add mail ผมหน่อยได้ป่ะครับ aiew_1@hotmail.com

    หรือไม่ก็ twitter ก็ได้ครับ search ว่า Thitiwat Knudjai

  2. Avatar

    admin says:

    แอด twitter ผมมาก็ได้ครับ @ter_

  3. Avatar

    anuchiit says:

    จะเพิ่มรูปนะครับ มันบอก error ว่า member ของ imaveView not construc

    cell.imageView.cell = image;

    บรรทัดนี้ครับ คือไม่ทราบว่าเราจะทำแบบนี้ได้ต้องประกาศ อะไรในไฟล์ .h ไหม หรือยังไงครับ
    ป.ล. format file type = อะไรก็ได้ใช่ไหมครับ

  4. Avatar

    admin says:

    cell.imageView.cell = image ไม่ต้องทำอะไรเพิ่มใน .h ครับ
    จากตรงนี้ UIImage *image = [UIImage imageNamed:@"face.png"];
    เราต้องมี image ที่ชื่อ face.png อยู่ใน resource ของเรานะครับ

    file format ต้องเป็น jpeg กับ png เท่าันั้นครับ ส่วน bmp ไม่แน่ใจ

  5. Avatar

    anuchiit says:

    ได้แล้วครับ แต่ทำไมผมใช้ cell.imageView.cell = image; ไม่ได้ครับผมเลยลองเปลี่ยนเป็น [cell setImage:image]; แล้วได้(มั่วๆครับ) งงเหมือนกัน
    ขอถามอีกนิดหนึ่งว่าผมทำแบบนี้แล้ว รูปมันอาจะใหญ่กว่า Cell ได้ก็เลยต้องปรับรูปให้เล็กๆ พอจะมีวิธีทีทำให้ Cell ขยายไปตามรูปไหมครับ เพราะมันดูเล็กไปครับ ขอบคุณครับ

  6. Avatar

    admin says:

    อาจจะเป็น sdk คนละ version กันก็ได้ครับ
    ถ้ารูปใหญ่กว่า cell อยากให้ขยายใหญ่ ต้องกำหนดขนาดของ cell ครับ

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

Leave a Reply

You must be logged in to post a comment.