DeveloperiOS DeveloperObjective CProgramming LanguageSocial Media Marketing

iOS Developer ตอนที่ 5 ปรับแต่งรูปภาพ Thumbnail บน UITableViewCell

วิธีการพัฒนาแอพพลิเคชันบน iOS ด้วย XCode กับการปรับแต่งเพิ่มรูปภาพ Thumbnail ที่แตกต่างกันลงบน UITableViewCell ครับก่อนที่จะศึกษาการทำงานของแอพพลิเคชันสำหรับการส่งค่าตัวแปรผ่าน Cell ของ UITableView ได้นั้นต้องกลับไปศึกษาวิธีการใช้งาน UITableView ก่อนนะครับที่

หากว่าเข้าใจหลักการพัฒนาเบื้องต้นเสร็จแล้ว ก็มาเริ่มกันครับ รอบนี้จะง่ายเล็กน้อยไม่ยุ่งยากอะไรมากนัก ก่อนอื่นให้เปิด Project ก่อนหน้านี้ที่อยู่ในบทความ “iOS Developer ตอนที่ 4 การเรียกใช้งาน UITableView” ขึ้นมาก่อน

หน้าจอ Project ก่อนหน้า
หน้าจอ Project ก่อนหน้า

หาบรรทัดคำสั่งตำแหน่ง

สังเกตให้ดีในส่วนของ cell.imageView.image ครับมันยังเป็นภาพ ที่เป็นภาพ thumbnail.jpg ภาพเดียวแต่ทำการแสดงผลผ่าน Loop ที่เรานับ Array เบื้องต้นออกมา ก่อนจะทำการส่งค่าลองมาเปลี่ยนภาพ Thumbnail ของแต่ละแถวบนตารางให้มีความแตกต่างกันก่อน ไปแก้ไขที่ไฟล์ ViewController.m ครับ อาจจะต้องเตรียมภาพ ขนาด 57×57 ไว้สัก 4 ภาพตั้งชื่อว่า “1.png”, “2.png” ประมาณนี้ครับ

ภาพประกอบที่หามาเพิ่ม
ภาพประกอบที่หามาเพิ่ม

เพิ่ม Source Code สำหรับ ข้อมูลประเภท Array ลงในตัวแปล “thumbnails” ที่เราได้สร้างขึ้นด้วยคำสั่ง

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

ให้เปลี่ยนเป็นคำสั่งดังนี้ครับ

คำสั่งที่เราทำการเปลี่ยนนั้นคือคำสั่งในการแสดงผล Cell ของ UITableView หรือแถวของตารางนั่นเอง โดยตารางจะมีแถวที่แสดงผลหัวข้อที่ดึงมาจากตัวแปร tableData และมีรูปภาพปรากฏจากตัวแปลของ thumbnails โดยการเรียกแสดงผลนั้น แถว หรือ Cell จะมีการแสดงผลกราฟิกรูปภาพโดยใช้ cell.imageView.image มารับค่า โดยค่าของ Array ในตัวแปรของ thumbnails นั้นจะส่งค่าออกมาเป็นแต่ละชุดต่อแถว เป็นประเภท integer หรือเลขจำนวนเต็ม เช่นชุดที่ 1 ก็คือ “0” และชุดที่ 2 ก็คือ “1” เป็นต้นผ่าน indexPath.row ในการระบุที่อยู่ของข้อมูล Array

ดังนั้นหากเราทำการ “Run” ตัวแอพพลิเคชันแล้วจะได้ผลลัพธ์ดังนี้

ปรับแต่งรูปภาพ Thumbnail บน UITableViewCell แบบซับซ้อน
ปรับแต่งรูปภาพ Thumbnail บน UITableViewCell แบบซับซ้อน

ถือว่าเป็น เคล็ดลับง่ายๆ สำหรับพัฒนาแอพพลิเคชันบน iOS นะครับกับการเปลี่ยน UITableViewCell ให้ดูน่าสนใจ

บทความที่เกี่ยวข้อง:

Source Code แจกฟรีที่นี่ครับ http://code.google.com/p/daydev/

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน