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 เข้าไปดังนี้ครับ

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

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

table_with_image

Row Selection

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

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

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

table_with_row_selected

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

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

table_with_row_delegate

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

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

table_with_delegate_alert

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

6 thoughts on “iPhone Programming VI : Table View ( Path 2 )”

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

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

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

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

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

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

    cell.imageView.cell = image;

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

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

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

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

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

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

Leave a Reply