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

最新推荐文章于 2019-04-10 07:04:00 发布
最新推荐文章于 2019-04-10 07:04:00 发布
阅读量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代理这样点击每个节时就达了预期的效果:

实现效果如图:




李纲明
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
Masonry自动布局：Tableview中headerview高度变化 tableview更新约束动画
qq457243496的博客
10-18 895
下面代码让约束马上生效从而拿到topview的高度 [self.topView setNeedsLayout]; // [self.topView layoutIfNeeded]; // CGSize size = [self.topView systemLayoutSizeFittingSize:UILayou...
UIViewController+Swizzling 实现页面统计
02-20
本篇文章将深入探讨如何通过`UIViewController+Swizzling`来实现在不修改原有代码的情况下，对页面视图控制器的生命周期进行统计。 首先，我们需要理解什么是Method Swizzling。在Objective-C中，由于其动态性，...
三个tableView联动
璐璐的博客
12-22 190
#import "RootViewController.h" #define WIDTH self.view.frame.size.width #define HEIGHT self.view.frame.size.height @interface RootViewController ()<UITableViewDataSource,UITableViewDelegate>@property(n
设置列表（uitableview）顶端间隙
weixin_30872867的博客
01-18 139
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 1471
在Storyboard中为UITableView添加Header和Footer 我在这里所说的Header和Footer并不是sectionHeader和sectionFooter,而是指UITableView的tableHeaderView和tableFooterView,这两个可以跟随tableView滑动的头部和尾部. 使用代码添加: 首先需要用代码(或者使用xib)创建一个继承自...
让tableView的每个section的headerview随tableview一起滚动
07-28 9811
如何让 UITableView 的 headerView跟随 cell一起滚动 UITableView 的 headerView一般是随着tableView的滚动悬浮在cell上的，但是有时候我们并不希望它是悬浮的状态，那么就要让headerView能够跟随cell一起滚动。之前只有自己用用，并没有做过总结，昨天有朋友问该怎么解决我就搜索了一下这个问题，发现解决方案并不止一种，我个人一直
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的动画效果
iOS三级联动选择器的实现代码示例
08-29
本篇文章主要介绍了iOS三级联动选择器的实现代码示例，这里整理了详细的代码,有需要的小伙伴可以参考下
ios-tableView下的三级分类.zip
07-11
使用tableView显示三级分类，点击第一个tableView分类的某行,如果有数据显示第二个tableView，点击第二个tableView的某行，如果有数据显示第三个tableView
UITableView的Grouped模式下，tableHeaderView与第一个section之间的空隙变大问题
weixin_34278190的博客
03-15 254
　　在开发项目中，碰到一个特别奇怪的现象，就是tableHeaderView和第一个section之间的空隙会无缘无故的变大。我前面也设置了UITableview的代理方法 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 8.0; }...
tableview头视图与 tableview中间有空隙
Scarlett的博客
03-10 1414
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {     return 0.1; } 高度设成0.1就好了
tableview Footerview有多余的间距
weixin_34221332的博客
04-10 742
调整footerView的高度 UIView *footerV = [[UIView alloc] initWithFrame:CGRectMake(0, 0, Main_Screen_Width, 1)]; UILabel *footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, Mai...
iOS 适配iPhoneX上tableHeaderView发生了高度拉伸、UI出现的空白间距
weixin_30416497的博客
07-12 374
记录下前阵子遇到的一个问题，草稿箱里记录的有点潦草，讲下大概吧。 异常如下，粉色区域作为tableHeader放上去的（注意不是sectionHeader） header初始化之后一切正常，frame并未发生变化，但是展示时就出现了穿帮 经layoutSubviews 方法内打印之后发现frame因未知原因确实发生了高度拉伸 两种方案让他恢复正常的显示： 1.手写t...
用Objective-c纯代码在页面中输出一个日历表格
最新发布
06-04
可以通过使用 UITableView 来实现一个日历表格。具体实现步骤如下： 1. 创建一个继承自 UIViewController 的类，例如名为 `CalendarViewController`。 2. 在 `CalendarViewController` 中创建一个 UITableView，并将其添加到当前视图中。 3. 实现 UITableViewDataSource 和 UITableViewDelegate 协议中的方法，以便为 UITableView 提供数据和响应用户的操作。 4. 在 UITableView 中创建 UITableViewCell，并为其添加子视图，例如 UILabel，来显示日期等信息。 5. 根据需要，可以使用 NSDate 和 NSCalendar 等类来计算日期和星期等信息。 6. 在 UIViewController 的 viewDidLoad 方法中，设置 UITableView 的数据源和代理为当前的 `CalendarViewController` 对象。 下面是一个简单的示例代码，可以根据需要进行修改和扩展： ``` // CalendarViewController.h #import <UIKit/UIKit.h> @interface CalendarViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> @property (nonatomic, strong) UITableView *tableView; @end // CalendarViewController.m #import "CalendarViewController.h" @interface CalendarViewController () @end @implementation CalendarViewController - (void)viewDidLoad { [super viewDidLoad]; // 创建 UITableView self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain]; self.tableView.dataSource = self; self.tableView.delegate = self; [self.view addSubview:self.tableView]; } #pragma mark - UITableViewDataSource - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // 返回日历表格的总共行数 return 6; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // 返回每一行日历表格的列数 return 7; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"CalendarCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; } // 计算当前单元格对应的日期 NSCalendar *calendar = [NSCalendar currentCalendar]; NSDateComponents *components = [[NSDateComponents alloc] init]; components.day = indexPath.row + indexPath.section * 7; NSDate *date = [calendar dateByAddingComponents:components toDate:[NSDate date] options:0]; // 显示日期 NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; formatter.dateFormat = @"d"; cell.textLabel.text = [formatter stringFromDate:date]; return cell; } #pragma mark - UITableViewDelegate - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:YES]; } @end ``` 在使用时，可以创建一个 `CalendarViewController` 对象，并将其添加到当前视图中即可： ``` CalendarViewController *calendarViewController = [[CalendarViewController alloc] init]; [self addChildViewController:calendarViewController]; [self.view addSubview:calendarViewController.tableView]; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值