在上一章节IOS开发-TableView表视图基础的学习后,
我觉得对于表视图的学习不应只局限于基础知识的学习,应用在实战中的话想要构建丰富的多元化视图界面我想还是必须深入地再学习下。
于是有了这个LV2的学习下面学习开始。
1.定制表视图单元
1)编程方式向UITableViewCell添加子视图
首先先向主视图添加一个TableView然后把委托和数据源设置为File's Owner
接着,修改控制器头文件,定义分配标记及引用协议
//修改ViewController.h文件
#import <UIKit/UIKit.h>
#define kNameValueTag 1
#define kColorValueTage 2
@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>
{
NSArray *computers;
}
@property (nonatomic,retain) NSArray *computers;
@end
现实控制器代码
- (void)viewDidLoad
{
NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"MacBook", @"Name", @"White", @"Color", nil];
NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"MacBook Pro", @"Name", @"Silver", @"Color", nil];
NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"iMac", @"Name", @"White", @"Color", nil];
NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"Mac Mini", @"Name", @"White", @"Color", nil];
NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"Mac Pro", @"Name", @"Silver", @"Color", nil];
NSArray *array = [[NSArray alloc] initWithObjects:row1, row2,row3, row4, row5, nil];
self.computers = array;
[row1 release];
[row2 release];
[row3 release];
[row4 release];
[row5 release];
[array release];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
-(void ) viewDidUnload
{
self.computers = nil;
[super viewDidUnload];
}
-(void )dealloc
{
[computers release];
[super dealloc];
}
实现协议的方法
#pragma mark-
#pragma mark Table Data Source Methods
-(NSInteger )tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.computers count];
}
//-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
//{
// return 1;
//}
-(UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellTableIdentifier=@"CellTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier];
if(cell ==nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTableIdentifier]autorelease];
CGRect nameLabelRect = CGRectMake(0,5,70,15);
UILabel *nameLabel =[[UILabel alloc]initWithFrame:nameLabelRect];
nameLabel.textAlignment = UITextAlignmentRight;
nameLabel.text = @"Name:";
nameLabel.font = [UIFont boldSystemFontOfSize:12];
[cell.contentView addSubview:nameLabel];
[nameLabel release];
CGRect colorLabelRect = CGRectMake(0, 26, 70, 15);
UILabel *colorLabel = [[UILabel alloc]initWithFrame:colorLabelRect];
colorLabel.textAlignment = UITextAlignmentRight;
colorLabel.text = @"Color:";
colorLabel.font =[UIFont boldSystemFontOfSize:12];
[cell.contentView addSubview:colorLabel];
[colorLabel release];
CGRect nameValueRect = CGRectMake(80, 5, 200, 15);
UILabel *nameValue = [[UILabel alloc]initWithFrame:nameValueRect];
nameValue.tag = kNameValueTag;
[cell.contentView addSubview:nameValue];
[nameValue release];
// CGRect colorValueRect = CGRectMake(80, 25, 200, 15);
// UILabel *colorValue = [[UILabel alloc]initWithFrame:colorValueRect];
// colorValue.tag = kColorValueTage;
// [cell.contentView addSubview:colorValue];
// [colorValue release];
CGRect colorValueRect1 = CGRectMake(80, 25, 200,15);
UILabel *colorValue = [[UILabel alloc ] initWithFrame:colorValueRect1];
colorValue.tag = kColorValueTag;
[cell.contentView addSubview:colorValue];
[colorValue release];
}
NSUInteger row = [indexPath row];
NSDictionary *rowData = [self.computers objectAtIndex:row];
UILabel *name = (UILabel *)[cell.contentView viewWithTag:kNameValueTag];
name.text = [rowData objectForKey:@"Name"];
UILabel *color = (UILabel *) [cell.contentView viewWithTag:kColorValueTag];
color.text = [rowData objectForKey:@"Color"];//这里取值必须注意大小写 如果大小写写错则显示不出来!
return cell;
}
代码解析:
首先是再viewDidLoad方法中创建了一系列字典,再将字典放入数组,把这些数据作为视图的数据。
创建四个UILabel并添加进表视图单元[cell.contentView addSubview:colorValue];
把常量kNameValueTag分配给nameValue的Tag字段nameValue.tag = kNameValueTag;
从传入的indexPath参数确定表示在请求单元的哪一行,为请求获取正确的字典。
NSUInteger row = [indexPath row];
NSDictionary *rowData = [self.computers objectAtIndex:row];
在用tag标记检索到标签设置属性就完成数据的绑定啦~~
运行效果:2)自从一个nib文件中加载一个子视图
新建一个Empty XIB 命名为CustomCell.xib
#import <UIKit/UIKit.h>
#define kNameValueTag 1
#define kColorValueTag 2
@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>
{
NSArray *computers;
UITableViewCell *tvcell;
}
@property (nonatomic,retain) NSArray *computers;
@property (nonatomic,retain) IBOutlet UITableViewCell *tvCell;
@end
为控制器类添加一个tableviewcell的关联方法。
拉出一个TableViewCell放到CustomCell,并修改它的高为65提供更多的活动空间。
再TableViewCell上面放四个label并设置相关属性及tag值,然后选择file's owner设置class字段为ViewController接着关联tvCell。
处理完以上步骤后可以转入后台的编码~~~
这里原先的构造数据那个viewDidLoad保持不变,但需要viewDidUnload及dealloc加入对tvCell变量的释放以免造成内存泄漏。
关键数据加载的方法-(UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 修改为
{
static NSString *CustomCellIdentifier = @"CustomCellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CustomCellIdentifier];
if(cell ==nil)
{
NSArray *nib = [[NSBundle mainBundle]loadNibNamed:@"CustomCell" owner:self options:nil];
if([nib count]>0)
{
cell = self.tvCell;
}
else{
NSLog(@"fail load nib");
}
}
NSUInteger row = [indexPath row];
NSDictionary *rowData = [self.computers objectAtIndex:row];
UILabel *colorLabel = (UILabel *)[cell viewWithTag:kNameValueTag];
colorLabel.text =[rowData objectForKey:@"Color"];
UILabel *nameLabel = (UILabel *)[cell viewWithTag:kColorValueTag];
nameLabel.text =[rowData objectForKey:@"Name"];
return cell;
}
这样对nib的编码引用及数据加载就完成啦。
效果如下:
但发现行距不对,可以做点修改引用昨天学习的知识对行距做调整,
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 70;
}
最终效果如下:
源码下载 由于得去看一个小程序源码,LV2学习就到这里为止咯。