• IOS UITableView分组列表


      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/ 
    版权声明:本文版权归杰瑞教育技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    技术咨询:JRedu技术交流
     
  • 相关阅读:
    hdu 5269 ZYB loves Xor I && BestCoder Round #44
    Hibernate之关于多对多单向关联映射
    測试CPU支持指令集AVX,AVX2,SSE情况的代码【VS2010调试通过】
    联想教育应用使用说明(7.6版本号)——第5章 常见的问题与解答
    java.lang.ClassNotFoundException: org.springframework.web.content.ContextLoaderListener
    IETF和W3C的区别
    [ppurl]从”皮皮书屋”下载电子书的姿势
    javaEE面试重点
    HDU-1095-A+B for Input-Output Practice (VII)(多一个空格?)
    WinCC7.3 Win764位系统安装教程
  • 原文地址:https://www.cnblogs.com/jerehedu/p/4917639.html
Copyright © 2020-2023  润新知