注:本文所有图片保存EverNote 印象笔记(www.yinxiang.com)当中, 如果有其帐号登录后即可查看全部图片。 如没有帐号可用e-mail >>点击注册免费印象笔记
iOS Storyboard构造自定义表格UITableView
在storyboard 如何构造自定义(custom cell)表格
这是一个带图像和文字表格,不用代码情况,用自定如何实现?
一.数据结构
如果没有构造专用类的情况下,我个人比较喜欢用
基于 NSDictionary的数组,它可以用key-value来存储不同类型值在头文件定义
@property (strong,nonatomic) NSMutableArray *nFinders;
viewDidLoad 初始化数组
self.nFinders = [NSMutableArray arrayWithCapacity:16];
并初始化数据
- (void)initFinderData
{
NSDictionary *finder1;
finder1 = [NSDictionary dictionaryWithObjectsAndKeys:
[NSString stringWithFormat:@"%d", 1],@"id",
@"笔记本电脑", @"name",
@"icon_laptop", @"image",
@"status_far", @"state",
@"OFF", @"power",
@"a:b:c:d:e:f", @"addr",
nil];
[ self.nFinders addObject:finder1 ];
NSDictionary *finder2;
finder2 = [NSDictionary dictionaryWithObjectsAndKeys:
[NSString stringWithFormat:@"%d", 2],@"id",
@"钱包", @"name",
@"icon_bag", @"image",
@"status_near", @"state",
@"OFF", @"power",
@"a:b:c:d:e:f", @"addr",
nil];
[ self.nFinders addObject:finder2 ];
NSDictionary *finder3;
finder3 = [NSDictionary dictionaryWithObjectsAndKeys:
[NSString stringWithFormat:@"%d", 3],@"id",
@"钥匙", @"name",
@"icon_keys", @"image",
@"status_linkloss", @"state",
@"OFF", @"power",
@"a:b:c:d:e:f", @"addr",
nil];
[ self.nFinders addObject:finder3 ];
}
在构造cell 需使用 objectForKey 来查询相应用值
NSString * imageName = [ finder objectForKey:@"image"];
二.构造自定义cell模板
在故事板中画出 cell定义,不同控件用不空的tag
那数组里数据如何与界面对应上呢?这里需要用到viewWithTag 这个方法来查找控件了,这里有详细方法
http://www.appcoda.com/ios-programming-customize-uitableview-storyboard/
具体需要修改的控件,定义不同的tag
定义表格数量
-(NSInteger)numberOfSectionsInTableView:(UITableView )tableView
{
return 1;
}
-(NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section
{
// Return the number of rows in the section.
return [ self.nFinders count ];
}
关键方法,构造Cell的方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Finder";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
NSDictionary *finder = [ self.nFinders objectAtIndex:indexPath.row];
UIImageView * ImageView = (UIImageView *)[cell viewWithTag:101];
NSString * imageName = [ finder objectForKey:@"image"];
ImageView.image = [UIImage imageNamed:imageName];
UILabel *label = (UILabel *)[cell viewWithTag:102];
NSString * name = [ finder objectForKey:@"name"];
[ label setText:name];
UISwitch * power = (UISwitch *)[cell viewWithTag:103];
NSString * isOn = [ finder objectForKey:@"power"];
if( [isOn isEqual:@"ON" ]){
[ power setOn:YES ];
}
else {
[ power setOn:NO ];
}
UIImageView * ImageState = (UIImageView *)[cell viewWithTag:104];
NSString * stateName = [ finder objectForKey:@"state"];
ImageState.image = [UIImage imageNamed:stateName];
return cell;
}
这里可以看image 的设置,用viewWithTag
UIImageView ImageView = (UIImageView )[cell viewWithTag:101];
NSString * imageName = [ finder objectForKey:@"image"];
ImageView.image = [UIImage imageNamed:imageName];
三.UITableCell 创建button 点击事件处理
在表格里按钮是动态创建的,所以事件处理也必须在cell构造用addTarget:来创建事件处理方法
UIButton button = (UIButton )[cell viewWithTag:105];
[button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
UISwitch connectSwitch = (UISwitch )[cell viewWithTag:103];
[connectSwitch addTarget:self action:@selector(connectSwitchAction:) forControlEvents:UIControlEventValueChanged];
button处理方法中,如何判断是哪一行点击?
一种方法,找出这个button的UITableCell类,进而找到这个cell在表格的行数,下面的getCellBySender就是查找cell的方法
-(IBAction) buttonClicked:(id)sender {
UITableViewCell* cell= [Utils getCellBySender:sender ];
NSIndexPath* indexPath= [self.tableView indexPathForCell:cell];
DLog(@"click row %d",indexPath.row);
NSDictionary *finder = [ self.nFinders objectAtIndex:indexPath.row];
NSString * name = [ finder objectForKey:@"name"];
NSString * title = [ NSString stringWithFormat:@"%@%@%@", @"bwRange 标签 ",name ,@"发出哔的声音."];
}
查找cell方法,注意在iOS7有所不同,他们多一层ContentView和ScrollView ,因此是4层
//iOS7 UITableViewCell -> UITableViewCellScrollView -->UITableViewCellContentView --> sender //old version UITableViewCell -> UITableViewCellContentView --> sender + (UITableViewCell *)getCellBySender:(UIView *)view { if ([[[view superview] superview] isKindOfClass:[UITableViewCell class]]) { return (UITableViewCell *)[[view superview] superview]; } else if ([[[[view superview] superview] superview] isKindOfClass:[UITableViewCell class]]) { return (UITableViewCell *)[[[view superview] superview] superview]; } else{ NSLog(@"something Panic happens"); } return nil; }