Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > บทความจากสมาชิก > Beginner Guide iOS 5 Development : ใช้งาน UITableView กับการส่งค่าผ่าน StoryBoard อย่างง่าย



 
Clound SSD Virtual Server

Beginner Guide iOS 5 Development : ใช้งาน UITableView กับการส่งค่าผ่าน StoryBoard อย่างง่าย

Beginner Guide iOS 5 Development : ใช้งาน UITableView กับการส่งค่าผ่าน StoryBoard อย่างง่าย ก่อนที่จะศึกษาการทำงานของแอพพลิเคชันสำหรับการส่งค่าตัวแปรผ่าน Cell ของ UITableView ได้นั้นต้องกลับไปศึกษาวิธีการใช้งาน UITableView ก่อนนะครับที่



ถ้าหากว่าทำได้แล้วก็มาต่อกัน จาก Project ตัวเดิมเลยครับ ซึ่งในรอบนี้จะเป็นการนำตัวแอพพลิเคชันที่เราพัฒนาขึ้นผ่าน UITableView มาทำการส่งค่าระหว่างหน้าโดยใช้ StoryBoard ของตัว Xcode IDE มาเป็นตัวช่วยในการศึกษาการทำงาน โดยเราอาจจะใช้ตัวอย่างจากบทเรียนก่อนหน้านี้ในส่วนของ UITableView ที่เราได้ทำไปมาพัฒนาต่อเนื่องกัน

แอพพลิเคชันก่อนหน้านี้

หน้าจอ แอพพลิเคชันจากบทที่แล้ว

ก่อนจะทำการส่งค่าลองมาเปลี่ยนภาพ Thumbnail ของแต่ละแถวบนตารางให้มีความแตกต่างกันก่อน ไปแก้ไขที่ไฟล์ ViewController.m ครับ อาจจะต้องเตรียมภาพ ขนาด 57x57 ไว้สัก 4 ภาพตั้งชื่อว่า "1.png", "2.png" ประมาณนี้ครับ

ใส่ภาพลงไป

ภาพประกอบที่นำมาในรอบนี้

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

ViewController.m
thumbnails = [NSArray arrayWithObjects:@"1.png",@"2.png",@"3.png",@"4.png",@"5.png", nil];


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

ViewController.m
cell.imageView.image =[UIImage imageNamed:@"thumbnail.png"];


ให้ทำการเปลี่ยนเป็น

ViewController.m
cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];


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

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

Run ตัวแอพพลิเคชัน

ลอง "Run" ดูก่อน จะได้แอพพลิเคชันรายการภาพยนตร์ขึ้นมา ซึ่งผลลัพธ์การแสดงผลที่รูปภาพกราฟิกในแต่ละแถวและข้อมูลที่แสดงผลนั้น แตกต่างกัน

หลังจากทำการตรวจสอบ และตรวจตราดูแล้วว่า แอพพลิเคชันของเรานั้น ทำงานได้ปรกติไม่มีข้อผิดพลาดใดๆปรากฏให้ทำการเข้าไปยัง MainStoryboard ของตัวแอพพลิเคชันผ่าน Xcode IDE อีกครั้ง คลิกที่ ViewController ของตัวแอพพลิเคชันของเราให้เกิดเส้นขอบสีน้ำเงินปรากฏขึ้น แล้วเลือกเมนูด้านบน "Editors -> Embed In -> Navigation Controller”

สร้าง Navigation Comtroller จาก Story Board ขึ้นา

หากว่าทำขั้นตอนดังกล่าวเสร็จแล้วจะเห็นว่า หน้า ViewController ที่เรามีอยู่เดิมนั้นจะมี Navigation Controller เพิ่มมาด้านซ้ายเป็นตัวควบคุม Flow การทำงานของแอพพลิเคชันอีกที สิ่งนี้คือ Storyboard ครับ

Storyboard ต้องเป็นแบบนี้

ถ้าไม่มีอะไรผิดพลาดหน้าจอ Xcode IDE ส่วน Storyboard ต้องเป็นแบบนี้

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

สร้าง View Controller
สร้าง View Controller ขึ้นมาใหม่อีกตัวลากลงไปวางที่หน้า MainStoryboard

ทำการเพิ่มหน้า ViewController

ทำการเพิ่มหน้า ViewController ขึ้นมาใหม่อีกตัว

หลังจากทำการเพิ่มหน้า ViewController ใหม่ขึ้นมาแล้ว เราอาจจะนำ UILabel หรือ UIImageView ไปวางตกแต่งเล่นๆ ไว้ก่อนในหน้าข้างในได้ครับ

ทำการวาง UILabel ลงไป

ทำการวาง UILabel ลงไปเป็นตัวอย่าง

กลับไปยังหน้า ViewController เดิมที่เราสร้าง UITableView รับค่าไว้แล้ว ให้เลือกที่ UITableViewCell ดังภาพ ให้ทำการเพิ่ม identifier ของ Cell นั้นในแท็บของ Attribute Inspector โดยให้ใส่ชื่อว่า "Item” ซึ่งสอดคล้องกับ คำสั่ง Source Code จากบทก่อนหน้านี้ นั่นคือคำสั่ง

ViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier =@"Item";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if(cell==nil)
    {
        cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    return cell;
}


สังเกตให้ดีจะพบว่า นั่นคือชื่อตัวแปล simpleTableIdentifier ที่ผมได้สร้างขึ้น และประกาศตัวแปรเป็น static NSString นั่นเอง ซึ่งในตัวอย่างนั้นผมตั้งชื่อให้กับมันว่า "Item” ครับ

ขั้นตอนการทำงานของ Cell ผ่าน Navigation Controller นั้นก็คือการส่งค่าระหว่างกันผ่านตัวแปร Integer เช่นเดียวกับการแสดงผลของจำนวน Cell หรือแถวใน UITableView เพียงแค่ว่าสำหรับ Navigation Controller นั้นจะเป็นการส่งค่าผ่านไปมา ระหว่างที่มีการกด หรือ แตะยังตำแหน่งของ Cell ในแต่ละ Cell บน UITableViewCel นั่นเองครับ

 Attribute Inspector แล้วตั้งชื่อว่า "Item”

กดที่ Cell แล้วไปที่แท็บ Attribute Inspector แล้วตั้งชื่อว่า "Item”

เบื้องต้นเราสามารถสร้าง Event หลังจากทำการแตะที่ Cell ได้ผ่าน Storyboard อย่างง่ายครับ โดยการกดแป้นคีย์บอร์ด Control ค้างไว้ แล้วคลิกที่ Cell ที่ชื่อ item แล้วลากไปวางยังหน้า ViewController ตัวใหม่ที่เราสร้างขึ้นครับ

link ซักหน่อย

ทำการคลิกที่ Cell แล้วกด Control ค้างไว้ แล้วลากไปยัง View Controller ตัวใหม่ที่สร้างขึ้น

เมื่อทำการเชื่อมต่อแล้ว จะมีเมนูปรากฏขึ้นมาให้เลือก Storyboard Segues ให้เราทำการเลือก Event ว่า "Push” ครับ

ผลลัพธ์แบบนี้

ถ้าไม่มีข้อผิดพลาดอะไร หน้าจอ Storyboard จะต้องปรากฏผลลัพธ์แบบนี้

ทำการ "Run” ตัวแอพพลิเคชันที่ทำการเชื่อมต่อ Navigation Controller ของ Storyboard ดูอีกครั้ง จะเห็นว่า เมื่อทำการกด ที่แถวข้อมูล หน้าจอของแอพพลิเคชันจะทำการเลื่อนไปยังหน้าใหม่ และมีปุ่ม Back กลับไปยังหน้าแรกของแอพพลิเคชันปรากฏขึ้นด้วย

จิ้มก็เลื่อนแล้ว

ผลลัพธ์ของหน้าจอหลังใช้ Navigation Controller

สิ่งที่ได้จากบทเรียนนี้: วิธีการใช้ Navigation Controller เบื้องต้นในการสร้าง Flow การทำงาน และการแสดงผลของแอพพลิเคชัน


Reference : http://www.daydev.com





   
Share
Bookmark.   

  By : Daydev
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-10-04
  Download : No files
Sponsored Links
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่