//  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起。
//  ViewController.m
//  实现类似QQ的折叠效果
//
//  Created by skg_Myfly on 16/3/3.
//  Copyright © 2016年 skg_Myfly. All rights reserved.
//

#import "ViewController.h"
#import "QQCellModel.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
/** tableview */
@property (nonatomic , strong ) UITableView *tableView;

/** 全局数据源 */
@property (nonatomic , strong ) NSMutableArray *dateArray;

@end

@implementation ViewController
//懒加载
-(NSMutableArray *)dateArray{
    if (!_dateArray) {
        self.dateArray = [NSMutableArray array];
    }
    return _dateArray;
}

- (void)viewDidLoad {

    [super viewDidLoad];
    //添加数据
    for (int i = 'A';  i <= 'Z'; i ++) {
        QQCellModel* model =   [[QQCellModel alloc] init];
        model.name =  [NSString stringWithFormat:@"%c",i];
//        model.isShow = YES;
        for (int j = 0;  j < 10; j ++) {
            [model.array addObject: [NSString stringWithFormat:@"%c - %d",i,j]];
        }
       
        [self.dateArray addObject:model];
       
    }
//实例化表单
    _tableView =  [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStyleGrouped];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    _tableView.rowHeight = 50;
    [self.view addSubview:_tableView];
   
   
}
 
//合计多少组
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
   
    return  [_dateArray count];
}
 
//每组里面含多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    QQCellModel* model =  [_dateArray objectAtIndex:section];
    if (model.isShow) {
        return  model.array.count;
    }else{
       
        return 0;
    }
}
//添加每行显示的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString* ID = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID ];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
    }
   
    QQCellModel* model =  [_dateArray objectAtIndex:indexPath.section];
    NSString* str =  [[model array] objectAtIndex:indexPath.row];
    cell.textLabel.text = str;
    return cell;
}
// 定义头标题的视图,添加点击事件
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    QQCellModel* model =  [_dateArray objectAtIndex:section];
   
    UIButton* btn =[UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 50);
    [btn setTitle:model.name forState:UIControlStateNormal];
    btn.tag = section;
    [btn addTarget:self action:@selector(btnClick:with:) forControlEvents:UIControlEventTouchUpInside];
    if (section % 2) {
        btn.backgroundColor =  [UIColor darkGrayColor];
       
    }else{
        btn.backgroundColor =  [UIColor lightGrayColor];
       
    }
    return btn;

}

 
//点击后事件相应
-(void)btnClick:(UIButton*)btn with:(NSInteger*)section{
    QQCellModel* model =  [_dateArray objectAtIndex:btn.tag];
   
    if ([model isShow]) {
        [model setIsShow:NO];
    }else{
        [model setIsShow:YES];
    }
   
    [_tableView reloadSections:[NSIndexSet indexSetWithIndex:btn.tag] withRowAnimation:UITableViewRowAnimationFade];
//    [_tableView reloadRowsAtIndexPaths:<#(nonnull NSArray<NSIndexPath *> *)#> withRowAnimation:<#(UITableViewRowAnimation)#>]
}
@end
 
 
-------------------------------------------------------------------------------------------
//
//  QQCellModel.h
//  实现类似QQ的折叠效果
//
//  Created by skg_Myfly on 16/3/3.
//  Copyright © 2016年 skg_Myfly. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface QQCellModel : NSObject
/**名字 */
@property (nonatomic ,copy ) NSString* name;
/**是否展开 */
@property (nonatomic , assign ) BOOL isShow;
/** 每组的数据 */
@property (nonatomic , strong ) NSMutableArray *array;

@end

实现类似QQ的折叠效果的更多相关文章

  1. js仿qq分组折叠效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  3. WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  4. winform-实现类似QQ停靠桌面上边缘隐藏的效果

    //实现类似QQ停靠桌面上边缘隐藏的效果! private void timer1_Tick(object sender, EventArgs e) { System.Drawing.Point pp ...

  5. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

  6. MVC实现类似QQ的网页聊天功能-ajax(下)

    此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...

  7. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  8. .net winForm 实现类似qq 弹出新闻

    .net winForm 实现类似qq 弹出新闻   一.背景: echong 之前一直用 公司大牛c语言写的一个弹出托管,前几天写东西的时候发现com调用不是那么好使.而手头上写的这个东西又是.ne ...

  9. 用C#代码实现类似QQ窗体的“上、左、右”停靠功能

    大家都知道QQ有一个自动停靠功能,即“上.左.右”,当你把窗体拖到屏幕边缘,然后移开鼠标它会自动缩放,然后只显示一小小点出来,我们仔细观察会发现其实它只露3像素左右的边缘,当你鼠标移上去它又会伸出来, ...

随机推荐

  1. JQUERY1.9学习笔记 之基本过滤器(六) 页眉选择器

    页眉选择器jQuery( ":header" ) 描述:选择页眉的所有标签,如 h1,h2, h3 等. <!DOCTYPE html><html lang=&q ...

  2. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  3. 微星b85(b85i b85-gaming) 系列dsdt

    从网友得了一个b85-gaming 的dsdt,发现跟我的b85i的dsdt错误都是一样的. 发布上来给需要的人参考. 微星这个系列的dsdt不能用dsdt editor的fix功能,不然文件会越来越 ...

  4. 消息通信机制NSNotificationCenter -备

    消息通信机制NSNotificationCenter的学习.最近写程序需要用到这类,研究了下,现把成果和 NSNotificationCenter是专门供程序中不同类间的消息通信而设置的,使用起来极为 ...

  5. 用GOACCESS分析NGINX日志

    参考URL: http://4b3r.com/goaccess-analyze-nginx-access-log/64/ http://jesuspan.sinaapp.com/crontab%E6% ...

  6. 关于mysql的自增

    http://my.oschina.net/zimingforever/blog/136599 http://flandycheng.blog.51cto.com/855176/280224 http ...

  7. google官方提供的下拉刷新控件SwipeRefreshLayout

    摘自:http://www.stormzhang.com/android/2014/03/29/android-swiperefreshlayout/ SwipeRefreshLayout Swipe ...

  8. HDOJ(HDU) 1562 Guess the number(水题,枚举就行)

    Problem Description Happy new year to everybody! Now, I want you to guess a minimum number x betwwn ...

  9. Lazy Foo:Game Loops

    英文原文连接:http://lazyfoo.net/articles/article04/index.php 废话我也就不翻译了,贴个代码然后注释一下吧. 1.游戏住循环 接收信息,然后操作,最后渲染 ...

  10. solr索引

    solr索引 当我们真正进入到Lucene源代码之中的时候,我们会发现: • Lucene的索引过程,就是按照全文检索的基本过程,将倒排表写成此文件格式的过程. • Lucene的搜索过程,就是按照此 ...