สร้าง Project ใหม่
ผมสร้าง Project ชื่อ TableViewCustomCell
เริ่มจากการสร้าง Class CustomTableViewCell สำหรับออกแบบ Cell ของ Table
เพิ่ม File ใหม่เลือก Add -> New File… ที่ Objective-C class ตรง Subclass of เลือก UITableViewCell
สร้าง XIB File เลือก Add -> New File… ที่ User Interface เลือก Empty XIB ตั้งชื่อเดียวกับชื่อ Class
เปิด CustomTableViewCell.xib
เพิ่ม UITableViewCell แล้วไปที่ Inspector ที่ Class Identify เลือก Class เป็น CustomTableViewCell
เปิด TableViewCell ที่สร้างขึ้นมา (ใน IB)
ทำการออกแบบหน้าตา Cell แบบที่ต้องการ
ผมใส่ UIView สีน้ำเงิน Slider และ Label เข้าไป จัดตำแหน่ง
ไปที่ CustomTableVIewCell.h เราจะสร้าง Outlet สำหรับเชื่อม User Interface และ Code เข้าด้วยกัน
#import <UIKit/UIKit.h>
@interface CustomTableViewCell : UITableViewCell {
IBOutlet UIView *_colorView;
IBOutlet UILabel *_cellName;
IBOutlet UISlider *_cellSlider;
}
@property (nonatomic, retain) UILabel *cellName;
@property (nonatomic, retain) UIView *colorView;
@property (nonatomic, retain) UISlider *cellSlider;
@end
ไปที่ CustomTableViewCell.m
@synthesize cellName = _cellName;
@synthesize cellSlider = _cellSlider;
@synthesize colorView = _colorView;
- (void)dealloc {
[_cellName release];
[_cellSlider release];
[_colorView release];
[super dealloc];
}
ไปที IB (Interface Builder)
ทำการ Link Property (CTRL + Drag)
ในส่วนของ interface ไปที่ File TableViewCustomCell.h
import Class ของ TableViewCell ที่เราสร้างไว้ CustomTableViewCell.h
ใส่ Delegate และ DataSource ของ UITableView
เพิ่ม Property UITableView และ NSArray ที่ใช้แสดง Table
#import <UIKit/UIKit.h>
#import "CustomTableViewCell.h"
@interface TableViewCustomCellAppDelegate : NSObject <UITableViewDelegate, UITableViewDataSource, UIApplicationDelegate> {
UIWindow *window;
UITableView *_tableView;
NSArray *_tableData;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@end
ที่ TableViewCellCustomCell.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
_tableData = [[NSArray alloc] initWithObjects:@"Cell 1", @"Cell 2", @"Cell 3", nil];
_tableView = [[UITableView alloc]
initWithFrame:CGRectMake(0, 0, 300, 500) style:UITableViewStylePlain];
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.center = window.center;
[window addSubview:_tableView];
[window makeKeyAndVisible];
return YES;
}
Implement Protocol
สร้าง Cell
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
CustomTableViewCell *cell = (CustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"tableCell"];
if (cell == nil) {
NSArray *cellArray = [[NSBundle mainBundle] loadNibNamed:@"CustomTableViewCell" owner:self options:nil];
for (int i = 0; i < [cellArray count]; ++i) {
id obj = [cellArray objectAtIndex:i];
if ([obj isKindOfClass:[CustomTableViewCell class]]) {
cell = obj;
cell.cellName.text = [_tableData objectAtIndex:indexPath.row];
}
}
}
return cell;
}
กำหนดความสูงของ Cell
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 100.0f;
}
จำนวน Cell
-(NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section{
return [_tableData count];
}
ลอง Build & Run ดูครับ
ใน TableViewCell ที่เราสร้างเองสามารถประยุกต์ใช้ได้ครับ
User Interface ที่ใส่เข้าไป เช่น UIView หรือ UISlider ใส่เข้าไปเพื่อให้เห็นลักษณะของ Cell ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น