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



Clound SSD Virtual Server

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad) ในการแสดงผลข้อมูลในหน้าจอ Application สิ่งที่เราพบเห็นได้บ่อย ๆ ก็คือ การแสดงข้อมูลเป็น Table หรือตารางที่แบ่งข้อมูลออกเป็นหลาย ๆ แถว และในแต่ล่ะแถว จะประกอบด้วยข้อมูลหลาย ๆ Column เช่นเดียวกัน และทุก ๆ Application ก็ล้วนมีความจำเป็นจะต้องใช้ Table มาแสดงผลข้อมูลต่าง ๆ สำหรับ Control หรือ Object ที่อยุ่ใน iOS จะมีชื่อว่า TableView ใช้ Class ของ UITableView เข้ามาจัดการข้อมูลการและการแสดงข้อมูลต่าง ๆ ของ Table โดยใน TableView สามารถรองรับข้อมูลที่เป็น DataSource ได้หลากหลายรูปแบบ เช่น Object ที่เป็น Array หรือข้อมูลชนิดอื่น ๆ

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

iOS and TableView


สำหรับบทความนี้จะแสดงข้อมูลที่อยุ่ใน Object ของ Array โดยนำข้อมูลเหล่านั้นมาแสดงบน TableView แบบง่าย ๆ เพียง Column เดียว (ดูภาพประกอบ)

ในการแสดงข้อมูลบน TableView อาจจะขั้นตอนที่ยุ่งยากและซับซ้อนนิดหนึ่ง แต่ถ้านั่งไล่ ๆ ดูแล้วเราจะเข้าใจรูปแบบของมันได้โดยไม่ยากเช่นเดียวกัน

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

เริ้มต้นจากการสร้าง Application แบบ Single View Application

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

ใส่ชื่อ Project และตรง Checkbox ไม่ต้องเลือกอะไร








iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

หลังจาก Project ได้ทำการ Create และโหลดเรียบร้อยให้เปิดหน้าจอ View แล้วจาก Object ใน Interface Builder ที่มีชื่อว่า Table View

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

จากนั้นทำการสร้าง IBOutlet ของ Table ดังรูป

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

ใส่ชื่อเป็น myTable (อันที่จริงไม่ต้องสร้าง IBOutlet ก็ได้ เพียงแต่เวลาสร้างแล้ว ตัว Code มันจะทำการ Get ตัว dealloc ใน Class ของ .m ให้ นั้นหมายถึงให้ทำการ Clear resource ต่าง ๆ หลังจากไม่ได้ใช้ Table แล้ว)

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

ได้ IBOutlet ของ myTable เรียบร้อยแล้ว

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

กลับมายังหน้า View ของ TableViewให้คลิกขวาที่ TableView ซึ่งจะปรากฏกล่องสีดำ ๆ ดังรูปประกอบ

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

ขั้นตอนนี้เราจะเชื่อม dataSource และ deleGate ให้ลาก dataSource ไปเชื่อมกับ File's Owner

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

ลาก deleGate ไปเชื่อมกับ File's Owner

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

สังเกตุว่าตอนนี้ทั้ง dataSource และ deleGate ถูกเชื่อมกับ File's Owner เรียบร้อยแล้ว








อธิบาย
dataSource คือการเชื่อม Object กับข้อมูล ที่จะแสดงผลบน TableView
deleGate คือการ implement Object กับ Method ต่าง ๆ เช่น Event เกี่ยวกับการอ่านจำนวนแถว การ BindData เป็นต้น

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

เมื่อกลับมาดูที่ไฟล์ .m จะเห็นว่าตอนนี้ยังไม่มีอะไร มีแต่ myTable ที่ถูกประกาศไว้แบบ dealloc คือจะ Clear resource เมื่อไม่มีการใช้งาน Table แล้ว

จากนั้นให้ใส่ Code ทั้งหมดดังนี้

ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    
    IBOutlet UITableView *myTable;
}

@end

ViewController.m
#import "ViewController.h"

@interface ViewController ()
{
    NSMutableArray *myObject;
}

@end

@implementation ViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    myObject = [[NSMutableArray alloc] init];
    //myObject = [NSMutableArray arrayWithObjects:@"ThaiCreate.Com 1",@"ThaiCreate.Com 2", nil];
    [myObject addObject:@"ThaiCreate.Com 1"];
    [myObject addObject:@"ThaiCreate.Com 2"];
    [myObject addObject:@"ThaiCreate.Com 3"];
    [myObject addObject:@"ThaiCreate.Com 4"];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return myObject.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        // Use the default cell style.
        cell = [[[UITableViewCell alloc] initWithStyle : UITableViewCellStyleSubtitle
                                       reuseIdentifier : CellIdentifier] autorelease];
    }
    
    
    NSString *cellValue = [myObject objectAtIndex:indexPath.row];
    cell.textLabel.text = cellValue;
    
    return cell;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)dealloc {
    [myTable release];
    [super dealloc];
}
@end


อธิบาย
@interface ViewController () { NSMutableArray *myObject; // ประกาศตัวแปร Pointer แบบ *NSMutableArray ; } - (void)viewDidLoad // Method นี้จะทำงานแรกสุดเมื่อโปรแกรมโหลดทำงาน เป็น Method Default ที่โปรแกรมให้มา { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // สร้างชุดข้อมูล Array myObject = [[NSMutableArray alloc] init]; [myObject addObject:@"ThaiCreate.Com 1"]; [myObject addObject:@"ThaiCreate.Com 2"]; [myObject addObject:@"ThaiCreate.Com 3"]; [myObject addObject:@"ThaiCreate.Com 4"]; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return myObject.count; // หาจำนวนแถวของ Table } // Method นี้แค่ทำการ Map ข้อมูลและ Bind ข้อมูลลงใน Rows ของแต่ล่ะ Table โดยจะทำงานตาม Loop ของข้อมูล - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; // มีการ Create Cell ขึ้นมาใหม่ หรือถ้ามีแล้วก็ไม่ต้องสร้าง UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { // Use the default cell style. cell = [[[UITableViewCell alloc] initWithStyle : UITableViewCellStyleSubtitle reuseIdentifier : CellIdentifier] autorelease]; } NSString *cellValue = [myObject objectAtIndex:indexPath.row]; cell.textLabel.text = cellValue; // เป็น Label ที่เป็น Default Column ปกติอยู่หลายตัว return cell; }


Screenshot

iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)

แสดงผลบน Table แบบง่าย ๆ



ในกรณีต้องการแสด Item ที่ถูกเลือกสามารถเพิ่ม method นี้เข้าไป
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellValue = [myObject objectAtIndex:indexPath.row];
    UIAlertView *alert =[[UIAlertView alloc]
                                  initWithTitle:@"คุณเลือกรายการ"
                                  message:cellValue
                                  delegate:self
                                  cancelButtonTitle:@"ปิด"
                                  otherButtonTitles: nil];
    [alert show];
}


ปกติแล้วความสามารถของ TableView สามารถแสดงผลได้หลากหลายมาก และเราจำเป็นอย่างนิ่งที่จะต้องเรียนรู้วิธีการใช้งานมันให้เป็น และในบทความถัด ๆ ไป จะยกตัวอย่างการใช้งาน Table แบบอื่น ๆ เช่น แสดงหลาย Column หรือแสดงพวกรุปภาพ และรายละเอียดอื่น ๆ ภายใน Cell ของ Table

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-10-23 22:06:29 / 2017-03-25 23:45:47
  Download : Download  iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)
 Sponsored Links / Related

 
iOS/iPhone TableView Passing Data to Another View (Objective-C,iPhone,iPad)
Rating :

 
iOS/iPhone Table View Master-Detail and Passing Data (Objective-C,iPhone)
Rating :

 
iOS/iPhone Table View Static Cell and Section Group (iPhone, iPad)
Rating :

 
iOS/iPhone Master Detail Wizard Application (Add/Insert/Delete/Table View)
Rating :

 
iOS/iPhone Table View(UITableView) Sections from an NSArray/NSMutableArray/NSDictionary (Objective-C,iPhone, iPad)
Rating :

 
iOS/iPhone Table View Image Column Multiple Column (Objective-C,iPhone)
Rating :

 
iOS/iPhone Table View and Table View Cell - Custom Cell Column (iPhone, iPad)
Rating :

 
iOS/iPhone Table View from NSDictionary - UITableview and NSMutableDictionary
Rating :


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 04
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 อัตราราคา คลิกที่นี่