iOS/iPhone Table View Image Column Multiple Column (Objective-C,iPhone) |
iOS/iPhone Table View Multiple Column and Image Column (Objective-C,iPhone,iPad) บทความนี้เป็นขั้นสูงขึ้นมาอีกขั้นหนึ่งเกี่ยวกับการแสดงผล Multiple Column และ Image Column บน Table View ก่อนที่จะไปรายละเอียดอื่น ๆ ขออธิบายเกี่ยวกับ Table View นิดหนึ่งว่า ปกติแล้ว Table View ซึ่งจะประกอบด้วยหลาย ๆ Rows หรือแถวนั้น ในแต่ล่ะแถวที่เราเรียกว่า Cell ซึ่งตอนนี้จะมีค่า Default ที่เป็น Style อยู่ 2-3 ประเภท ตามที่เราได้ Set ใน Inspector เช่น เป็นแบบ Title หรือเป็นแบบ Title มี Detail หรือมีรูปภาพ Image ด้วย ซึ่งเราจะเห็นว่ามี Object ที่เป็น Label และ Image ชื่อว่า imageView, textLabel และ detailTextLabel ซึ่ง Object เหล่านี้เป็นค่า Default ที่มีมาให้ และจะไม่มีอะไรที่ซับซ้อนไปมากกว่านี้ และปกติแล้วถ้าเราต้องการที่จะกำหนด Cell ให้มีรูปแบบตามต้องการ เราจะต้องทำแบบ Custom Cell ด้วยการสร้าง Table View Cell ซึ่งจะได้อ่านในบทความถัดไปจากบทความนี้
iOS/iPhone Table View Multiple Column and Image Column
เพื่อความไม่สับสนและเข้าใจบทความนี้ ถ้ายังไม่มีพื้นฐานแนะนำให้อ่านบทความนี้ก่อน เกี่ยวกับ Table View จะได้อ่านแล้ว ทำตามและสามารถเข้าใจได้อย่างรวดเร็ว
ขั้นแรกให้ Copy ไฟล์รูปภาพไปไว้ใน Project ของเรา
ทำการ Add Files รุปภาพเข้ามาใน Project ของเรา
เลือกไฟล์รูปภาพ
ได้ไฟล์เรียบร้อยแล้ว ที่เหลือก็คือการเขียน Code ด้วยภาษา Objective-C
ViewController.h
//
// ViewController.h
//
// Created by Weerachai on 10/23/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
IBOutlet UITableView *myTable;
}
@end
ViewController.m
//
// ViewController.m
// tableViewApp
//
// Created by Weerachai on 10/23/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#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 1", nil];
[myObject addObject:@"girl1.jpg,Girl 1,Girl 1 Description"];
[myObject addObject:@"girl2.jpg,Girl 2,Girl 2 Description"];
[myObject addObject:@"girl3.jpg,Girl 3,Girl 3 Description"];
[myObject addObject:@"girl4.jpg,Girl 4,Girl 4 Description"];
}
- (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];
NSArray *array = [cellValue componentsSeparatedByString:@","]; // Split String
UIImage* theImage = [UIImage imageNamed:array[0]];
cell.imageView.image = theImage;
cell.textLabel.text = array[1];
cell.detailTextLabel.text= array[2];
return cell;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc {
[myTable release];
[super dealloc];
}
@end
สำหรับตัวอย่างนี้จะใช้ NSMutableArray ซึ่งจะใช้เครื่องหมาย ( , ) คอมมา ในการแบ่งข้อมูล แต่ถ้าต้องการใช้ NSDictionary สามารถอ่านได้ที่บทความนี้
iOS/iPhone Table View from NSDictionary - UITableview and NSMutableDictionary
Screenshot
แสดงรูปภาพแบบแบ่ง Column และแสดงรูปภาพ Image บน Table View
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-10-29 15:21:28 /
2017-03-26 09:41:36 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|