在UIViewController里用UITableView及相关的tableHeaderView、tableFooterView实现三级连动页面页面展示效果

最新推荐文章于 2019-10-18 11:36:52 发布
最新推荐文章于 2019-10-18 11:36:52 发布
阅读量9k 收藏 6
点赞数 3
分类专栏： objective-c移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgm252008/article/details/39471777
版权

就拿一本书的章、节、知识点为例实现方案思路大体如下：

   将章、和节做为一级实现在UITableview里的每个section的header里边，原因是UITableView只提供了headerView的这种两级效果

在数据判断上将章、节、知识点做好区分，可以用type=1为章、type=2为节、type=3为知识点，这样在实现章、节、知识点的点击收缩时

效果及跳转不同的UIViewController时可以用type做好判断处理，同时在cell展示时可以控制好章、节、知识点UI展示,部分关键实现代码如下


一、将章和节的UIView组织的一个统一的UIView中并加到UIArray中作为章和节的UI展示在viewForHeaderInSection里边代码如下:

/** 
 * 创建分类视图
 */
- (void)loadModel
{
    int i = 0, sectionNum=1;
    
    //移除数据
    [_recommandSections removeAllObjects];
    [_sectionsAry  removeAllObjects];
    
    GroupCateView *cateView;
    NSArray *sectionAry;
    for (NSDictionary *section in _subjectListObject.chapterAry) {
        
        //获取节基本数据高度50
        sectionAry = [_subjectListObject.sectionDic objectForKey:[section objectForKey:@"id"]];
        if (![sectionAry count]) {
            continue;
        }
        
        [_sectionsAry addObject:section];
        
        //获取章基本数据 高度85
        cateView = [[GroupCateView alloc]  initWithFrame:CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 50)];
        cateView.backgroundColor = [UIColor clearColor];
        [cateView hideViewWithSubjectSection];
        cateView.section    = 100000;
        cateView.userInteractionEnabled = NO;
        cateView.open       = NO;
        cateView.frame      = CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 85);
        cateView.type       = 0;
        
        //背景色
        UIView *_bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 85)];
        _bgView.backgroundColor = [UIColor clearColor];
        _bgView.userInteractionEnabled = NO;
        
        //顶部灰色线
        UIView *topBgLine = [[UIView alloc] initWithFrame:CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 19.5)];
        topBgLine.backgroundColor = UIBGCOLOR_245;
        [cateView addSubview:topBgLine];
        
        //分割线一
        UIView *topLine = [[UIView alloc] initWithFrame:CGRectMake(0, 19.5, FD_SCREEN_MAIN_WIDTH, .5)];
        topLine.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1.0];
        [_bgView addSubview:topLine];
        
        //第几章
        UILabel *_chapterNumLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 45, 15)];
        _chapterNumLabel.backgroundColor = [UIColor clearColor];
        _chapterNumLabel.font = [UIFont systemFontOfSize:14];
        _chapterNumLabel.text = [NSString stringWithFormat:@"第%d章", sectionNum++];
        _chapterNumLabel.textColor = [UIColor colorWithRed:58/255.0 green:135/255.0 blue:224/255.0 alpha:1.0];
        [_bgView addSubview:_chapterNumLabel];
        
        //章名称
        UILabel *_chapterNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(55, 30, FD_SCREEN_MAIN_WIDTH-55-25, 15)];
        _chapterNameLabel.backgroundColor = [UIColor clearColor];
        _chapterNameLabel.text = [section objectForKey:@"name"];
        _chapterNameLabel.textColor = [UIColor blackColor];
        _chapterNameLabel.font = [UIFont systemFontOfSize:14];
        [_bgView addSubview:_chapterNameLabel];
        
        //章描述
        UILabel *_chapterIntroLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 48, FD_SCREEN_MAIN_WIDTH-30, 20)];
        _chapterIntroLabel.backgroundColor = [UIColor clearColor];
        _chapterIntroLabel.text = [NSString stringWithFormat:@"共%@小节，%@个核心考点", [section objectForKey:@"sections"], [section objectForKey:@"points"]];
        _chapterIntroLabel.font = [UIFont systemFontOfSize:13];
        _chapterIntroLabel.textColor = [UIColor grayColor];
        [_bgView addSubview:_chapterIntroLabel];
        
        //中部灰色线
        UIView *middleBgLine = [[UIView alloc] initWithFrame:CGRectMake(0, 84.5, FD_SCREEN_MAIN_WIDTH, .5)];
        middleBgLine.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1.0];
        [_bgView addSubview:middleBgLine];
        
        cateView.backBtn.hidden = YES;
        cateView.backBtn.userInteractionEnabled = NO;
        cateView.cateName.hidden = YES;
        [cateView addSubview:_bgView];
        
        //底部灰色线
        UIView *bottomBgLine = [[UIView alloc] initWithFrame:CGRectMake(0, 85+49.5, FD_SCREEN_MAIN_WIDTH, .5)];
        bottomBgLine.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1.0];
        [_bgView addSubview:bottomBgLine];
        
        cateView.backgroundColor = [UIColor whiteColor];
        [_recommandSections addObject:cateView];
        
        for (NSDictionary *sectionDic in sectionAry) {
            
            //获取节信息
            cateView = [[GroupCateView alloc]  initWithFrame:CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 50)];
            cateView.backgroundColor = [UIColor clearColor];
            [cateView hideViewWithSubjectSection];
            cateView.delegate   = self;
            cateView.section    = i;
            cateView.open       = NO;
            //type:0章 type:1节
            cateView.type       = 1;
            
            //版块箭头左右图标
            UIImageView *_schoolArrayImgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 19, 6, 12)];
            _schoolArrayImgView.tag  = 1000+i;
            _schoolArrayImgView.image = [UIImage imageNamed:@"icon_major_array_right"];
            [cateView addSubview:_schoolArrayImgView];
            
            //版块名称
            NSString *name = [NSString stringWithFormat:[sectionDic objectForKey:@"name"], i++];
            cateView.cateName.textColor         = [UIColor colorWithRed:(51.0/255.0f) green:(51.0/255.0f) blue:(51/255.0f) alpha:1.0f];
            cateView.cateName.textAlignment     = NSTextAlignmentLeft;
            cateView.cateName.font = [UIFont systemFontOfSize:14];
            cateView.cateName.backgroundColor   = [UIColor clearColor];
            cateView.cateName.contentMode       = UIViewContentModeCenter;
            cateView.cateName.text              = name;
            [cateView addSubview:cateView.cateName];
            
            cateView.frame = CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 50);
            cateView.flag       = 0;
            
            //分割线一
            cateView.backgroundColor = [UIColor clearColor];
            UIView *topLine = [[UIView alloc] initWithFrame:CGRectMake(0, 49.5, FD_SCREEN_MAIN_WIDTH, .5)];
            topLine.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1.0];
            [cateView addSubview:topLine];
                
            //版块箭头左右图标
            _schoolArrayImgView.frame   = CGRectMake(10, 19, 6, 12);
            cateView.cateName.frame     = CGRectMake(23, 18, 260, 15);
            cateView.backBtn.frame      = CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, 50);
             cateView.backBtn.backgroundColor = [UIColor clearColor];
            
            cateView.backgroundColor = [UIColor whiteColor];
            [_recommandSections addObject:cateView];
            
            [_sectionsAry addObject:sectionDic];
            i++;
        }
    }
    
    //获取总段数
    _total = [_recommandSections count];
}

显示到section中的headerView视图里边 

#pragma mark - tableView
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    GroupCateView *CateView = [_recommandSections objectAtIndex:section];
    if(CateView.type == 0){
        return 0;
    }
    
    //获取每个分类的CELL数据
    NSDictionary *sectionDic = [_sectionsAry  objectAtIndex:section];
    if ([[sectionDic objectForKey:@"type"] intValue] == 1) {
        return 0;
    }
    
    NSString *pid = [sectionDic objectForKey:@"id"];
    return CateView.open?[[_subjectListObject.pointDic objectForKey:pid] count]:0;
}

/** cell高度 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 50;
}

/** 头部cell高度 */
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    
    float height;
    GroupCateView *cateView = [_recommandSections objectAtIndex:section];
    if (cateView.type ==  1) { //节
        height = 50;
    }else{ //章
        height = 85;
    }
    
    return height;
}

/**
 * section底部间距
 */
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 0.01;
}

/** 部cell视图 */
- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    GroupCateView *cateView = [_recommandSections objectAtIndex:section];
    return cateView;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    
    return _total;
}


heightForFooterInSection 的间距设置为0.01不设置的话用
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, FD_SCREEN_MAIN_WIDTH, FD_SCREEN_SHOW_HEIGHT)
                                              style:UITableViewStyleGrouped];
这咱方式展示时每个行会有默认间隔达不到UI上的效果

最后实现节与知识点的展示收缩效果即可，部分代码如下

#pragma mark - GroupCateViewdelegate
- (void)selectedWith:(GroupCateView *)view{
    
    UIImageView *_aImgView;
    
    if(view.tag > 5000) return;
    
    //将上一个小图标重置
    if (_tmpSection>=1000) {
        
        _aImgView = (UIImageView *)[self.view viewWithTag:(_tmpSection)];
        _aImgView.frame = CGRectMake(10, 19, 6, 12);
        _aImgView.image = [UIImage imageNamed:@"icon_major_array_right"];
    }
    
    //获取要更改的icon小图标
    _tmpSection = view.section+1000;
    _aImgView = (UIImageView *)[view viewWithTag:(1000+view.section)];
    
    if (view.open) {
        //控制icon图标方向
        _aImgView.frame = CGRectMake(10, 19, 6, 12);
        _aImgView.image = [UIImage imageNamed:@"icon_major_array_right"];
        
        for(int i = 0;i<[_recommandSections count];i++){
            
            GroupCateView *head = [_recommandSections objectAtIndex:i];
            head.open = NO;
            [head.backBtn setBackgroundImage:[UIImage imageNamed:@"btn_momal"] forState:UIControlStateNormal];
        }
        
        [_tableView reloadData];
        return;
    }else{
        
        //控制icon图标方向
        _aImgView.frame = CGRectMake(7, 23, 12, 6);
        _aImgView.image = [UIImage imageNamed:@"icon_major_array_down"];
    }
    
    _currentSection = view.section;
    [self reset];
}


/** 界面重置 */
- (void)reset
{
    for(int i = 0;i<[_recommandSections count];i++){
        GroupCateView *head = [_recommandSections objectAtIndex:i];
        
        if(head.section == _currentSection){
            head.open = YES;
            [head.backBtn setBackgroundImage:[UIImage imageNamed:@"btn_nomal"] forState:UIControlStateNormal];
            
        }else {
            [head.backBtn setBackgroundImage:[UIImage imageNamed:@"btn_momal"] forState:UIControlStateNormal];
            head.open = NO;
        }
    }
    
    [_tableView reloadData];
}

其中- (void)selectedWith:(GroupCateView *)view为GroupCateView代理这样点击每个节时就达了预期的效果:

实现效果如图:




李纲明
关注
专栏目录
ios三级展开列表TQMultistageTableView源代码设计资料
06-08
ios三级展开列表TQMultistageTableView源代码设计资料
使用TableView进行分组
GuiGen_L的博客
07-07 840
#import "ViewController.h"#define WIDTH [UIScreen mainScreen].bounds.size.width #define HEIGHT [UIScreen mainScreen].bounds.size.height@interface ViewController ()<UITableViewDataSource,UITableViewDele
UITableView的分组示例及常用方法
GuodongSun0的专栏
05-25 444
@interface ViewController ()UITableViewDelegate,UITableViewDataSource> /**  UITableView*/ @property(nonatomic,weak) UITableView * tableView; /**  分组头数据*/ @property(nonatomic
自定义UITableView，实现cell的三级分组展开收起
reborn_wood的博客
05-31 6460
自定义UITableView，实现cell的三级分组展开收起
iOS TableView多级列表
findhappy117的博客
03-12 2075
代码地址如下：http://www.demodashi.com/demo/15006.html 效果预览 一、需求 TableView多级列表：分级展开或合并，逐级获取并展示其子级数据，可以设置最大的层级数，支持多选、单选、取消选择。 二、思路 由需求和示意图可知，这些数据元素之间存在着一对多关系，很符合 数据结构与算法 – 树形结构 的特征。那么，我们就用树形结构中的结点(Node)...
UIViewController+Swizzling 实现页面统计
02-20
本篇文章将深入探讨如何通过`UIViewController+Swizzling`来实现在不修改原有代码的情况下，对页面视图控制器的生命周期进行统计。 首先，我们需要理解什么是Method Swizzling。在Objective-C中，由于其动态性，...
IOS展开三级列表效果示例
09-01
在这个例子中，我们将使用三个级别的UITableView，每个级别对应一级、二级和三级列表。为了实现展开效果，我们需要维护一个数据模型，记录当前各级列表的展开状态。 在给定的代码片段中，我们看到AppDelegate是应用...
iOS页面跳转及数据传递（三种）
01-20
在iOS开发中，页面跳转和数据传递是两个核心概念，它们构成了应用程序用户界面的基本交互。下面我们将详细探讨这三种页面跳转方式以及常见的数据传递方法。 ### 页面跳转 #### 1. 导航控制器(Navigation ...
static-cells-uitableview-in-uiviewcontroller:在iOS的UIViewController内将静态单元格添加到UITableView
05-08
如果UITableView不在UITableViewController内，则不允许将UITableView的单元格设置为静态单元格，因此，不允许在UIViewController内使用Static-Cells UITableView。如何？ 使用容器视图。有关演示的屏幕：
iOS利用Runtime实现友盟页面数据统计的功能示例
08-28
通过使用Runtime，我们可以轻松地实现页面统计的功能，而不需要在每个页面中写重复的代码。本文将详细介绍如何使用Runtime实现友盟页面数据统计的功能。 概念 在开始之前，需要了解一些基本概念。友盟页面数据统计...
tableView下拉时候tableHeaderView的动画效果
09-18
tableView下拉时候头部tableHeaderView的动画效果
【Demo】UITableView实现分组可折叠下拉列表
Mr_厚厚的博客
11-05 2897
前言UITableView作为UIKit中最重要的一个组件，应用还是很广泛很灵活的，它的特性用来实现分组列表再合适不过。可折叠分组列表最典型的是好友列表，是一个二级目录，点击每一个分组都会展开或折叠一个好友列表。这里使用TableView的section header作为分组一级目录，每个section的cell作为二级目录。section header里面放的是一个自定义的UIButton，but
三个tableView联动
璐璐的博客
12-22 202
#import "RootViewController.h" #define WIDTH self.view.frame.size.width #define HEIGHT self.view.frame.size.height @interface RootViewController ()<UITableViewDataSource,UITableViewDelegate>@property(n
IOS UITableView分组列表
weixin_34348111的博客
10-28 149
　　UITableView有两种风格：UITableViewStylePlain和UITableViewStyleGrouped。这两者操作起来其实并没有本质区别，只是后者按分组样式显示前者按照普通样式显示而已。今天我们就看看分组的使用： 1、首先我们介绍一下分组的tableView,初始化一个tableView如下 #pragma mark - 加载表视图 - (void) l...
设置列表（uitableview）顶端间隙
weixin_30872867的博客
01-18 148
self.table.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.table.bounds.size.width, 8.0f)]; 转载于:https://www.cnblogs.com/codemakerhj/p/5139691.html
在Storyboard中为UITableView添加Header和Footer
LeeCSDN77的博客
06-29 1481
在Storyboard中为UITableView添加Header和Footer 我在这里所说的Header和Footer并不是sectionHeader和sectionFooter,而是指UITableView的tableHeaderView和tableFooterView,这两个可以跟随tableView滑动的头部和尾部. 使用代码添加: 首先需要用代码(或者使用xib)创建一个继承自...
让tableView的每个section的headerview随tableview一起滚动
07-28 9856
如何让 UITableView 的 headerView跟随 cell一起滚动 UITableView 的 headerView一般是随着tableView的滚动悬浮在cell上的，但是有时候我们并不希望它是悬浮的状态，那么就要让headerView能够跟随cell一起滚动。之前只有自己用用，并没有做过总结，昨天有朋友问该怎么解决我就搜索了一下这个问题，发现解决方案并不止一种，我个人一直
Masonry自动布局：Tableview中headerview高度变化 tableview更新约束动画
qq457243496的博客
10-18 918
下面代码让约束马上生效从而拿到topview的高度 [self.topView setNeedsLayout]; // [self.topView layoutIfNeeded]; // CGSize size = [self.topView systemLayoutSizeFittingSize:UILayou...
iOS滑动页面标题颜色渐变联动效果实现
在实现颜色渐变时，通常会使用`UIView`的动画API，如`UIView.animate(withDuration:animations:)`，在一段时间内平滑地改变标题颜色。对于标题的高亮，我们可以使用`UILabel`的`attributedText`属性，通过`...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值