星空网 > 软件开发 > 操作系统

IOS UITableView分组列表

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

IOS UITableView分组列表images/loading.gif' data-original="http://images2015.cnblogs.com/blog/708076/201510/708076-20151028155656966-380628383.png" />

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;  }

效果图如下:

IOS UITableView分组列表

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

IOS UITableView分组列表

- (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);    }  }];  }

完成后效果如下:

IOS UITableView分组列表

动画瞬间效果

IOS UITableView分组列表

 

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



原标题:IOS UITableView分组列表

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流