iOS Storyboard构造自定义表格UITableView

注：本文所有图片保存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;
}