码迷,mamicode.com
首页 > 移动开发 > 详细

IOS UITableView分组列表

时间:2015-10-28 17:03:12      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

  UITableView有两种风格:UITableViewStylePlain和UITableViewStyleGrouped。这两者操作起来其实并没有本质区别,只是后者按分组样式显示前者按照普通样式显示而已。今天我们就看看分组的使用:

技术分享

1、首先我们介绍一下分组的tableView,初始化一个tableView如下

#pragma mark - 加载表视图

- (void) loadTableView{
    
      _tableView=[[UITableView alloc] initWithFrame:CGRectMake(0,20, kWidth, kHeight) style:UITableViewStyleGrouped];
    
    //设置代理
    _tableView.delegate=self;
    _tableView.dataSource=self;
    
    //设置行高
    _tableView.rowHeight=60;
    //隐藏分组脚的高度
    _tableView.sectionFooterHeight=0;
    [self.view addSubview:_tableView];

}

2、加载数据,分组数据我们已经在plist文件中定义,加载代码如下:

#pragma mark - 加载数据
- (void)loadData{
    
    NSString * path=[[NSBundle mainBundle] pathForResource:@"friends.plist" ofType:nil];
    _array=[NSArray arrayWithContentsOfFile:path];
    

}

3、初始化代理方法

#pragma mark - 设置分组的个数
- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView{
    return _array.count;
}
#pragma mark - 设置分组的高度
- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 40;
}
#pragma mark - 自定义分组头
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
   
    
    NSDictionary *dic=_array[section];
    NSString * title=dic[@"group"];

    //1 自定义头部
    UIView * view=[[UIView alloc] init];
     view.backgroundColor=[UIColor grayColor];
    view.layer.borderWidth=1;
    view.layer.borderColor=[UIColor whiteColor].CGColor;
    
    // 2 增加按钮
    UIButton * button=[UIButton buttonWithType:UIButtonTypeCustom];
    [button setTitle:title forState:UIControlStateNormal];
    button.frame=CGRectMake(0, 0, kWidth, 40);
    button.tag=section;
    [button addTarget:self action:@selector(clickTheGroup:) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:button];
    
    //3 添加左边的箭头
    UIImageView * imageView=[[UIImageView alloc] initWithFrame:CGRectMake(5, 40/2.0-30/2.0, 30, 30)];
    imageView.image=[UIImage imageNamed:@"disclosure.png"];
    imageView.tag=101;
    [button addSubview:imageView];
    [_headImageView setObject:imageView forKey:@(section)];

    return view;

}


#pragma mark - UITableViewDataSource

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
 
        return 0;
    
}

效果图如下:

技术分享

  4、我们就可以点击某个分组进行刷新数据了,通过控制当前分组中数据的个数来达到该效果,由于当前的分组状态有两个关闭和打开,因此我们需要定义一个字典来控制状态,该字典的key为当前分组的索引,值为1 的时候为打开,值为2的时候为关闭。每次点击的时候我们需要给当前的状态重新初始化,当前状态改变的时候对应的分组包含的数据条数置为0

技术分享

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    int flag=[_state[@(section)] intValue];
    NSDictionary *dic=_array[section];
    NSArray * friends=dic[@"friends"];
    if(flag){
        return friends.count;
    }else{
        return 0;
    }
   
}

5、刷新需要控制三角号图标的旋转,因此我们需要通过动画,完成当前效果

#pragma mark - 点击分组信息
- (void) clickTheGroup:(UIButton * ) button{

    int groupIndex=(int)button.tag;
    int flag=0;//用来控制重新实例化按钮
    
    if([_state[@(groupIndex)] intValue]==0){
        [_state setObject:@(1) forKey:@(groupIndex)];
        flag=0;
    }else{
        [_state setObject:@(0) forKey:@(groupIndex)];
        flag=1;
       
    }

 
    //刷新当前的分组
    NSIndexSet * set=[[NSIndexSet alloc] initWithIndex:groupIndex];
    
    [_tableView reloadSections:set withRowAnimation:UITableViewRowAnimationNone];
    
    UIImageView * imageView=_headImageView[@(groupIndex)];
    
    //模拟动画,每次都重新刷新了因此仿射变化恢复到原始状态了
    if(flag){
        imageView.transform=CGAffineTransformRotate(imageView.transform, M_PI_2);
    }
    
    [UIView animateWithDuration:0.3 animations:^{
        
        if(flag==0){
            imageView.transform=CGAffineTransformMakeRotation( M_PI_2);
        }else{
            imageView.transform=CGAffineTransformMakeRotation(0);

        }
    }];
   
}

完成后效果如下:

技术分享

动画瞬间效果

技术分享

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归杰瑞教育技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:技术分享
 

IOS UITableView分组列表

标签:

原文地址:http://www.cnblogs.com/jerehedu/p/4917639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!