วันนี้มาต่อเรื่องของ 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 หน้าตาก็จะเป็นประมาณแบบนี้
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







iAeawz says:
อยากให้ทำ โปรแกรมที่ใส่รูปแล้วให้มันสามารถเลื่อนรูปและย่อขยายรูปด้วยมัลติทัชได้ด้วยอ่ะครับ
คือผมกำลังศึกษาการเขียนโปรแกรมบนไอโฟนเพื่อทำโปรเจคจบตรีอยู่อ่ะครับ
tutorial ของคุณมีประโยชน์มาก
ถ้าเป็นไปได้อยากให้ add mail ผมหน่อยได้ป่ะครับ aiew_1@hotmail.com
หรือไม่ก็ twitter ก็ได้ครับ search ว่า Thitiwat Knudjai
July 15, 2009, 5:56 pmadmin says:
แอด twitter ผมมาก็ได้ครับ @ter_
July 16, 2009, 10:53 amanuchiit says:
จะเพิ่มรูปนะครับ มันบอก error ว่า member ของ imaveView not construc
cell.imageView.cell = image;
บรรทัดนี้ครับ คือไม่ทราบว่าเราจะทำแบบนี้ได้ต้องประกาศ อะไรในไฟล์ .h ไหม หรือยังไงครับ
August 28, 2009, 4:08 amป.ล. format file type = อะไรก็ได้ใช่ไหมครับ
admin says:
cell.imageView.cell = image ไม่ต้องทำอะไรเพิ่มใน .h ครับ
จากตรงนี้ UIImage *image = [UIImage imageNamed:@"face.png"];
เราต้องมี image ที่ชื่อ face.png อยู่ใน resource ของเรานะครับ
file format ต้องเป็น jpeg กับ png เท่าันั้นครับ ส่วน bmp ไม่แน่ใจ
August 30, 2009, 1:49 pmanuchiit says:
ได้แล้วครับ แต่ทำไมผมใช้ cell.imageView.cell = image; ไม่ได้ครับผมเลยลองเปลี่ยนเป็น [cell setImage:image]; แล้วได้(มั่วๆครับ) งงเหมือนกัน
September 1, 2009, 2:49 pmขอถามอีกนิดหนึ่งว่าผมทำแบบนี้แล้ว รูปมันอาจะใหญ่กว่า Cell ได้ก็เลยต้องปรับรูปให้เล็กๆ พอจะมีวิธีทีทำให้ Cell ขยายไปตามรูปไหมครับ เพราะมันดูเล็กไปครับ ขอบคุณครับ
admin says:
อาจจะเป็น sdk คนละ version กันก็ได้ครับ
ถ้ารูปใหญ่กว่า cell อยากให้ขยายใหญ่ ต้องกำหนดขนาดของ cell ครับ
- (CGFloat)tableView:(UITableView *)tableView
September 1, 2009, 5:37 pmheightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 50;
}