IOS初级:UITableView


先来看一下tableview 的结构(plain style)。


--------------------------------------       +

                  header                           table header

--------------------------------------       +


--------------------------------------        +

               section header       

--------------------------------------

                cell                          

--------------------------------------         table section

                cell                           

---------------------------------------       +

                section footer

---------------------------------------       +


---------------------------------------       +

             footer                                    talbe foot

---------------------------------------       +


1、首先要在 UITableViewController 的 viewDidLoad方法中设置  self.tableView.sectionHeaderHeight的值,不然你不会看到section的数据的。


2、在UITableViewController 的numberOfSectionsInTableView方法中返回section的个数。


3、在UITableViewController 的(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 方法中设置cell中的数据。

    static NSString *identifier = @"dataCell";//这个用于cell种类的标识
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; //按identifier查找可重用cell。也就是系统要是有identifier类型的cell给你用,就返回这个可用的cell给你,否则返回nil
    if (!cell) {//如果没有
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];//老子新建一个
        
    }
    DataGroupModel *groupModel = self.dataArray[indexPath.section];  //这里的dataArray可以是一个NSMutableArray,包含二级数据,第一级group用于section,第二级data用于cell
    DataModel *dataModel = groupModel.data[indexPath.row];  //定为到group的data级数据
    cell.imageView.image = [UIImage imageNamed:dataModel.icon];//这里cell的imageView等成员是UITableViewCell自己带的
    cell.textLabel.text = dataModel.name;
    cell.detailTextLabel.text = dataModel.detail;
    
    return cell;

4、接下来我们来设置section,我们用一个自定义的UIView类型的对象来作为section的header,也就是表头<th>。

4.1、在UITableViewController 的(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section方法中指定view。

    HeaderView *header = [HeaderView headerView:tableView];//这里的HeaderView是我们自己定义的一个继承UITableViewHeaderFooterView的类
    header.delegate = self; //设置header对象delegate为当前控制器
    header.groupModel = self.dataArray[section];//设置header对象groupModel成员为某个二级数组
    return header;//返回UIView *

4.2、接着我们定义HeaderView这个类

HeaderView.h

@protocol HeaderViewDelegate <NSObject>

@optional
- (void)clickView;  //首先定义一个代理方法,让TableViewController取实现,点击section的header时候要显示cell

@end

@interface HeaderView : UITableViewHeaderFooterView
@property (nonatomic, assign) id<HeaderViewDelegate> delegate;//有protocol的代理,肯定要有这个代理了

@property (nonatomic, strong) JKGroupModel *groupModel;//单个section的group数据
+ (instancetype)headerView:(UITableView *)tableView;//声明类的getter方法,这里说明一下instancetype,这个数据类型在这个类里就是HeaderView *,也就是self的数据类型,但这个instancetype只能做返回值,不能做参数类型。
@end

HeaderView.m

@implementation HeaderView{//我们先定义一些全局变量,全局变量也能这样写?
    UIButton *_arrowBtn;
    UILabel *_label;
}

//重写initWithReuseIdentifier
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{
    if (self = [super init]) {//先让父类自己搞他自己的那一套初始化
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//我们定义一个UIButton,在UIButton上面自己实现怎么显示数据
        [button setBackgroundImage:[UIImage imageNamed:@"header_bg"] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage imageNamed:@"header_bg_highlighted"] forState:UIControlStateHighlighted];
        [button setImage:[UIImage imageNamed:@"arrow"] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        button.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        button.imageView.contentMode = UIViewContentModeCenter;
        [button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];//点击section的header时,应该显示cell或者收起cell
        button.imageView.clipsToBounds = NO;
        _arrowBtn = button;
        [self addSubview:_arrowBtn];//添加到视图
        //创建label,显示当前在线人数
        UILabel *labelRight = [[UILabel alloc] init];
        labelRight.textAlignment = NSTextAlignmentCenter;
        _label = labelRight;
        [self addSubview:_label];//添加到视图
    }
    return self;
}

//点击section的header时,应该显示cell或者收起cell
- (void)buttonAction{
    self.groupModel.isOpen = !self.groupModel.isOpen;
    if ([self.delegate respondsToSelector:@selector(clickView)]) {//respondsToSelector这个方法是查找clickView是否存在
        [self.delegate clickView];//delegate的方法clickView的实现在TableViewController里
    }
}

//下面是一下布局和图像的东西didMoveToSuperview,layoutSubviews,setGroupModel,这里先不讲
- (void)didMoveToSuperview{
    _arrowBtn.imageView.transform = self.groupModel.isOpen ? CGAffineTransformMakeRotation(M_PI_2) :CGAffineTransformMakeRotation(0);
}
//布局
- (void)layoutSubviews{
    [super layoutSubviews];
    _arrowBtn.frame = self.bounds;
    _label.frame = CGRectMake(self.frame.size.width - 70, 0, 60, self.frame.size.height);
}
//赋值
- (void)setGroupModel:(JKGroupModel *)groupModel{
    _groupModel = groupModel;
    [_arrowBtn setTitle:_groupModel.name forState:UIControlStateNormal];
    _label.text = [NSString stringWithFormat:@"%@/%lu",_groupModel.online,(unsigned long)_groupModel.friends.count];
}

5、这里我们实现一下HeaderView中声明的一个代理clickView

- (void)clickView{
    [self.tableView reloadData];//这个reloadData会重新执行所有的UITableView显示类方法,相当刷新这个UITableView
}

6、这里我们实现点击 cell的时候push到一个视图,这里没有太多说明了

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    ViewController *viewCtrl = [[ViewController alloc] init];
    [self.navigationController pushViewController:viewCtrl animated:NO];
}

7、这里我们实现用一个TableFooterView盖住多余的section线。

- (void)clipExtraCellLine:(UITableView *)tableView{
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor clearColor];
    [self.tableView setTableFooterView:view];
}









posted on 2015-06-05 13:38  阮減显  阅读(99)  评论(0编辑  收藏  举报

导航