【Demo】UITableView实现分组可折叠下拉列表

最新推荐文章于 2023-04-11 10:16:00 发布

Mr_厚厚

最新推荐文章于 2023-04-11 10:16:00 发布

阅读量2.8k

点赞数 1

分类专栏： iOS沉思录文章标签： uitableview uikit uibutton

本文链接：https://blog.csdn.net/cordova/article/details/53046914

版权

iOS沉思录专栏收录该内容

55 篇文章 19 订阅

订阅专栏

前言

UITableView作为UIKit中最重要的一个组件，应用还是很广泛很灵活的，它的特性用来实现分组列表再合适不过。可折叠分组列表最典型的是好友列表，是一个二级目录，点击每一个分组都会展开或折叠一个好友列表。
这里使用TableView的section header作为分组一级目录，每个section的cell作为二级目录。section header里面放的是一个自定义的UIButton，button的图片设置为折叠指示箭头，button的文字为分组名称，为这个button定义代理，点击按钮时通知刷新对应的section的数据即可展开或者折叠该分组。

这里写图片描述

自定义section header头部按钮以及协议

头部按钮的制作主要有三点：一个是定义点击后的通知代理，二是调整按钮图片和文字的frame成左图右文字的样式（通过contentRect代理回调来调整），三是点击后按钮图片的旋转动画（tranform旋转90）。

//
//  SectionHeaderView.h
//  JXHDemo
//
//  Created by 919575700@qq.com on 10/23/15.
//  Copyright (c) 2015 Jiangxh. All rights reserved.
//  section头部视图，是一个buntton

#import <UIKit/UIKit.h>

@class SectionHeaderView;
/**
 * 自定义协议
 */
@protocol SectionHeaderDelegate <NSObject>

//点击了section header
- (void)sectionDidClicked:(SectionHeaderView *)sender;

@end

@interface SectionHeaderView : UIButton

/**
 *  记录是否已经展开
 */
@property (nonatomic)BOOL isOpen;

/**
 *  协议
 */
@property (nonatomic, weak) id<SectionHeaderDelegate>delegate;

@end

//
//  SectionHeaderView.m
//  JXHDemo
//
//  Created by 919575700@qq.com on 10/23/15.
//  Copyright (c) 2015 Jiangxh. All rights reserved.
//
#define sectionMargin 10
#define sectionIconSize 20
#import "SectionHeaderView.h"

@interface SectionHeaderView()

@end

@implementation SectionHeaderView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        //设置按钮属性
        [self setButton];
    }
    return self;
}

/**
 *  设置按钮属性
 */
- (void)setButton {
    _isOpen = NO;
    //背景色
    self.backgroundColor = [UIColor whiteColor];
    // 文字颜色
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    // 添加指示图片
    [self setImage:[UIImage imageNamed:@"arrow"] forState:UIControlStateNormal];
    // 图片模式
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;

    // 添加下分割线
    UIImageView *underLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.frame.size.height-1, self.frame.size.width, 1)];
    // 贴图
    [underLine setImage:[UIImage imageNamed:@"line"]];
    //改变线的透明度
    [underLine setAlpha:0.3];
    [self addSubview:underLine];

    // 添加点击事件
    [self addTarget:self action:@selector(clicked:) forControlEvents:UIControlEventTouchUpInside];

}

/**
 *  点击
 */
- (void)clicked:(SectionHeaderView *)sender {

    // 如果没展开，顺时针旋转90度
    if (!_isOpen) {
        [sender.imageView setTransform:CGAffineTransformMakeRotation(M_PI_2)];
    }
    // 如果展开了，逆时针旋转90度
    else {
        [sender.imageView setTransform:CGAffineTransformMakeRotation(-M_PI_2)];
    }

    // 通知代理
    [_delegate sectionDidClicked:sender];

    // 状态取反
    _isOpen = !_isOpen;
}

/**
 *  返回代理需要的标题尺寸和图片尺寸
 */
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    return CGRectMake(55, 0, contentRect.size.width, contentRect.size.height);
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    return CGRectMake(20, 5, contentRect.size.height-10, contentRect.size.height-10);
}

@end

自定义cell

cell的样式根据需要可以随便设计，这里设置一个最简单的：一个头像，一个名字。

//
//  AccountCell.h
//  JXHDemo
//
//  Created by Xinhou Jiang on 3/11/16.
//  Copyright © 2016年 Jiangxh. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface AccountCell : UITableViewCell

// 头像
@property (nonatomic, strong) UIImageView *avatar;

// 昵称
@property (nonatomic, strong) UILabel *name;

@end

//
//  AccountCell.m
//  JXHDemo
//
//  Created by Xinhou Jiang on 3/11/16.
//  Copyright © 2016年 Jiangxh. All rights reserved.
//
#define cellH 40 // cell高度
#define ApplicationW [UIScreen mainScreen].bounds.size.width // 屏幕宽度

#import "AccountCell.h"

@implementation AccountCell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 头像
        _avatar = [[UIImageView alloc]initWithFrame:CGRectMake(5, 5, cellH-10, cellH-10)];
        _avatar.layer.cornerRadius = (cellH-10)/2;
        [self.contentView addSubview:_avatar];

        // 账号
        _name = [[UILabel alloc]initWithFrame:CGRectMake(cellH, 0, ApplicationW - cellH, cellH)];
        _name.font = [UIFont systemFontOfSize:12.0];
        [self.contentView addSubview:_name];
    }

    return self;
}

@end

数据模型

数据主要是section分组的一个数据数组和每个分组的cell数据数组，这里为了简单固定返回了一组死数据，具体有了数据源在request的函数内将数据对应接入即可。

/**
 *  记录section的展开状态
 */
@property (nonatomic, strong)NSMutableArray *isOpen;

/**
 *  记录section的标题数组
 */
@property (nonatomic, strong)NSArray *titles;

/**
 *  请求数据
 */
- (void)initValue {
    // 标题数组假数据
    _titles = @[@"朋友", @"同学", @"家人", @"同事"];

    // 初始化所有section都是折叠状态
    _isOpen = [[NSMutableArray alloc] initWithCapacity:_titles.count];
    for (int i = 0; i<_titles.count; i++) {
        [_isOpen addObject:@NO];
    }
}


/**
 *  cell
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *identifier = @"identifier";
    // 具体可以自制cell组件
    AccountCell *cell = [[AccountCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    // 头像，具体应该从好友数据中取
    [cell.avatar setImage:[UIImage imageNamed:@"male"]];
    // 昵称，具体应该从好友数据中取
    cell.name.text = @"夏明";
    //cell颜色
    //cell.backgroundColor = RGBColor(200, 200, 200);

    return cell;
}

UITableView分组下拉列表

主体就是TableView的一个完整应用，包括section和cell的管理。

//
//  FolderTableViewController.h
//  JXHDemo
//
//  Created by 919575700@qq.com on 10/23/15.
//  Copyright (c) 2015 Jiangxh. All rights reserved.
//  可折叠section的表格

#import <UIKit/UIKit.h>

@interface FolderTableViewController : UITableViewController

@end

//
//  FolderTableViewController.m
//  JXHDemo
//
//  Created by 919575700@qq.com on 10/23/15.
//  Copyright (c) 2015 Jiangxh. All rights reserved.
//
#define sectionHeaderH 30 //组头部的高度
#define ApplicationW [UIScreen mainScreen].bounds.size.width // 屏幕宽度
#define RGBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0] // 通过RGB创建颜色

#import "FolderTableViewController.h"
#import "SectionHeaderView.h"
#import "AccountCell.h"

@interface FolderTableViewController ()<SectionHeaderDelegate>

/**
 *  记录section的展开状态
 */
@property (nonatomic, strong)NSMutableArray *isOpen;

/**
 *  记录section的标题数组
 */
@property (nonatomic, strong)NSArray *titles;

@end

@implementation FolderTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 表格基本设置
    self.title = @"可展开的TableView";
    self.view.backgroundColor = RGBColor(240, 240, 240);
    // 清除底部多余cell
    [self.tableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];
    // 清除分割线
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    // 请求数据
    [self initValue];
}

/**
 *  请求数据
 */
- (void)initValue {
    // 标题数组假数据
    _titles = @[@"朋友", @"同学", @"家人", @"同事"];

    // 初始化所有section都是折叠状态
    _isOpen = [[NSMutableArray alloc] initWithCapacity:_titles.count];
    for (int i = 0; i<_titles.count; i++) {
        [_isOpen addObject:@NO];
    }
}

#pragma mark - 组设置
/**
 *  多少组
 */
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return _titles.count;
}
/**
 *  section header的高度
 */
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return sectionHeaderH;
}
/**
 *  section header的视图
 */
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

    // section头部视图
    SectionHeaderView *sectionHeader = [[SectionHeaderView alloc] initWithFrame:CGRectMake(0, 0, ApplicationW, sectionHeaderH)];
    // 标题
    [sectionHeader setTitle:[_titles objectAtIndex:section] forState:UIControlStateNormal];
    // 为headerview打上tag
    [sectionHeader setTag:section];
    // 代理
    sectionHeader.delegate = self;

    return sectionHeader;
}
#pragma mark SectionHeader实现代理
/**
 *  实现代理，sectionheader 点击
 */
- (void)sectionDidClicked:(SectionHeaderView *)sender {

    // 取反状态
    BOOL reverse = ![_isOpen[sender.tag] boolValue];
    _isOpen[sender.tag] = [NSNumber numberWithBool:reverse];

    /***  这里刷新后section的header也会被刷新，导致指示箭头又恢复到旋转之前的状态，待解决  ***/
    // 刷新点击的分区（展开或折叠）
    [self.tableView reloadSections:[[NSIndexSet alloc] initWithIndex:sender.tag] withRowAnimation:UITableViewRowAnimationNone];
}

#pragma mark - 组内行设置
/**
 *  每组多少行
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if ([_isOpen[section] boolValue]) {
        return 5; // 具体应该返回该分组好友的个数
    }else {
        return 0;
    }
}
/**
 *  cell
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *identifier = @"identifier";
    // 具体可以自制cell组件
    AccountCell *cell = [[AccountCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    // 头像，具体应该从好友数据中取
    [cell.avatar setImage:[UIImage imageNamed:@"male"]];
    // 昵称，具体应该从好友数据中取
    cell.name.text = @"夏明";
    //cell颜色
    //cell.backgroundColor = RGBColor(200, 200, 200);

    return cell;
}

@end

组件的调用

组件的使用很简单，一句话加入，引入TavleViewController类，实例化为一个子viewcontroller即可。

- (void)viewDidLoad {
    [super viewDidLoad];

    // 显示折叠视图
    FolderTableViewController *foldableVC = [[FolderTableViewController alloc]init];
    [self addChildViewController:foldableVC];
    [self.view addSubview:foldableVC.view];

}

这里写图片描述

存在的问题（待解决）

存在的一个问题是，点击分组按钮时，刷新的是整个section，包括头部的header按钮，因此虽然头部按钮点击后箭头旋转了，但由于马上被更新了换了新的头部按钮，导致箭头看上去没有反应，而TableView并没有只更新某个section的所有cell而不更新section的header的方法。暂时没有想到比较优雅的解决办法，探索中…orz

Demo下载（不想花积分的请回复邮箱）
http://download.csdn.net/detail/cordova/9673964

Mr_厚厚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Demo】UITableView实现分组可折叠下拉列表

前言UITableView作为UIKit中最重要的一个组件，应用还是很广泛很灵活的，它的特性用来实现分组列表再合适不过。可折叠分组列表最典型的是好友列表，是一个二级目录，点击每一个分组都会展开或折叠一个好友列表。这里使用TableView的section header作为分组一级目录，每个section的cell作为二级目录。section header里面放的是一个自定义的UIButton，but
复制链接

扫一扫