iOS开发：仿网易新闻首页多频道视图切换

2023-12-16 15:40
文章标签 开发 切换 ios 视图 首页 新闻 网易 频道

本文主要是介绍iOS开发：仿网易新闻首页多频道视图切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

1、相信筒子们在项目中会遇到像网易新闻这样的多频道视图切换需求，而这一功能需要考虑的东西也挺多，其中最主要的就是内存问题了。

2、这种多频道视图切换一般分为两部分：上滚动视图（顶部频道列表）和下滚动视图（频道内容展示）

3、上滚动视图基本上都会用UIScrollView来做，而下滚动视图则可采用UITableView或者UIScrollView来做，UITableView可以改善UIScrollView带来的内存问题，但在使用中不是很方便。

4、此Demo采用双滚动视图的方式来实现，主要有：视图切换（延迟加载，当用户滚动到对应频道才加载页面），滚动视图的位置调整，频道切换时标题的动态变化。 未实现：数据本地缓存，释放离当前频道比较远的页面资源来降低内存占用（此基于数据本地缓存）

思路

主要是采用addChildViewController来实现
版本一、在当前页直接切换，不采用滚动视图；
版本二、采用滚动视图

版本一：

1、定义数组和视图

@property (nonatomic,strong) UIViewController * currentVC;
@property (nonatomic,strong) UIButton * currentBtn;
@property (nonatomic,strong) UIScrollView * headScrollView;
@property (nonatomic,strong) NSArray * headTitleArray;
@property (nonatomic,strong) NSMutableArray * vcArray;

2、初始化数组

-(NSArray *)headTitleArray {if (!_headTitleArray) {_headTitleArray = [NSArray arrayWithObjects:@"头条",@"娱乐",@"热点",@"体育",@"广州",@"财经",@"科技", nil];}return _headTitleArray;
}-(NSMutableArray *)vcArray {if (!_vcArray ) {_vcArray = [[NSMutableArray alloc]init];//创建内容视图[self configVCArray];}return _vcArray;
}- (void)configVCArray {CGRect childVCRect = CGRectMake(0, 64 + HEADSCROLLVIEW_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);for (int i = 0; i < self.headTitleArray.count; i ++) {ContentViewController * VC = [[ContentViewController alloc]init];VC.typeName = self.headTitleArray[i];VC.view.frame = childVCRect;[_vcArray addObject:VC];}
}

3、配置上滚动视图

- (void)configHeadScrollView {self.headScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, HEADSCROLLVIEW_HEIGHT)];self.headScrollView.backgroundColor = [UIColor purpleColor];self.headScrollView.contentSize = CGSizeMake(self.headTitleArray.count * 60, 40);self.headScrollView.bounces = NO;[self.view addSubview:self.headScrollView];[self addBtnsToHeadScrollView];
}- (void)addBtnsToHeadScrollView {for (int i = 0; i < self.headTitleArray.count; i ++) {UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];button.frame = CGRectMake(0 + 60 * i, 0, 60, 40);[button setTitle:self.headTitleArray[i] forState:UIControlStateNormal];[button setTag:1000 + i];[button.titleLabel setFont:[UIFont systemFontOfSize:12]];[self.headScrollView addSubview:button];[button addTarget:self action:@selector(headScrollViewButtonAction:) forControlEvents:UIControlEventTouchUpInside];//默认当前为第一个频道if (!i) {[button.titleLabel setFont:[UIFont systemFontOfSize:15]];[button setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];self.currentBtn = button;}}
}

4、配置默认显示的视图

- (void)configDefaultVC {//默认加载第一个标签页self.currentVC = self.vcArray[0];[self addChildViewController:self.currentVC];[self.view addSubview:self.currentVC.view];}

5、实现视图切换的方法

/***  移除当前VC，替换新的VC*/
- (void)switchNewVC:(UIViewController *)newViewController {//1、先加载新VC为ChildViewController[self addChildViewController:newViewController];//2、动画从当前VC切换到新VC/***  transitionFromViewController 方法更详细了解到：http://blog.csdn.net/yongyinmg/article/details/40619727交换两个子视图控制器的位置（由于添加的顺序不同，所以子试图控制器在父视图控制器中存在层次关系）fromViewController：当前显示的子试图控制器，将被替换为非显示状态toViewController：将要显示的子视图控制器duration：交换动画持续的时间，单位秒options：动画的方式animations：动画Blockcompletion：完成后执行的Block*/[self transitionFromViewController:self.currentVC toViewController:newViewController duration:0.2 options:UIViewAnimationOptionTransitionCrossDissolve animations:nil completion:^(BOOL finished) {if (finished) {//3、动画完毕后，移除旧VC，设置新VC为当前VC/**关于willMoveToParentViewController方法和didMoveToParentViewController方法的使用1.这两个方法用在子试图控制器交换的时候调用！即调用transitionFromViewController 方法时，调用。2.当调用willMoveToParentViewController方法或didMoveToParentViewController方法时，要注意他们的参数使用：当某个子视图控制器将从父视图控制器中删除时，parent参数为nil。即：[将被删除的子试图控制器 willMoveToParentViewController:nil];当某个子试图控制器将加入到父视图控制器时，parent参数为父视图控制器。即：[将被加入的子视图控制器 didMoveToParentViewController:父视图控制器];*/[newViewController didMoveToParentViewController:self];[self.currentVC willMoveToParentViewController:nil];[self.currentVC removeFromParentViewController];self.currentVC = newViewController;}}];
}

6、实现频道滚动视图点击的方法

- (void)headScrollViewButtonAction:(UIButton *)button {//点击频道按钮切换视图if (self.currentVC == self.vcArray[button.tag - 1000]) {//如果是当前频道，则不操作return;}else {//切换频道按钮[self.currentBtn.titleLabel setFont:[UIFont systemFontOfSize:12]];[self.currentBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[button.titleLabel setFont:[UIFont systemFontOfSize:15]];[button setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];self.currentBtn = button;//切换VCNSInteger num = button.tag - 1000;[self switchNewVC:self.vcArray[num]];}
}

7、效果图

版本一效果图

8、存在的问题和改进

问题：因为初始化VC数组把VC的view设置了Frame，因此VC会执行viewDidLoad方法，所以如果需要加载大量数据（或网络连接）的情况，要把这些方法放到viewWillApper或者DidApper来执行。
改进：可以在切换VC的时候才设置Frame

版本二：

1、声明数组和视图

@property (nonatomic,assign) int currentPage;
@property (nonatomic,strong) UIScrollView * headScrollView;
@property (nonatomic,strong) UIScrollView * contentScrollView;
@property (nonatomic,strong) NSArray * headTitleArray;

2、初始化

//频道列表
-(NSArray *)headTitleArray {if (!_headTitleArray) {_headTitleArray = [NSArray arrayWithObjects:@"头条",@"娱乐",@"热点",@"体育",@"广州",@"财经",@"科技", nil];}return _headTitleArray;
}pragma mark - 顶部频道配置
- (void)configHeadScrollView {self.headScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, HEADSCROLLVIEW_HEIGHT)];self.headScrollView.backgroundColor = [UIColor purpleColor];self.headScrollView.contentSize = CGSizeMake(self.headTitleArray.count * 60, 40);self.headScrollView.bounces = NO;[self.view addSubview:self.headScrollView];[self addBtnsToHeadScrollView];
}//加频道按钮
- (void)addBtnsToHeadScrollView {for (int i = 0; i < self.headTitleArray.count; i ++) {UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];button.frame = CGRectMake(0 + 60 * i, 0, 60, 40);[button setTitle:self.headTitleArray[i] forState:UIControlStateNormal];[button setTag:1000 + i];[button.titleLabel setFont:[UIFont systemFontOfSize:15]];[self scaleButton:button withScale:0];[self.headScrollView addSubview:button];[button addTarget:self action:@selector(headScrollViewButtonAction:) forControlEvents:UIControlEventTouchUpInside];//默认当前为第一个频道if (!i) {[self scaleButton:button withScale:1];}}
}pragma mark - 配置内容ScrollView
- (void)configContentScrollView {CGRect contentScrollViewRect = CGRectMake(0, 64 + HEADSCROLLVIEW_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);self.contentScrollView = [[UIScrollView alloc]initWithFrame:contentScrollViewRect];self.contentScrollView.contentSize = CGSizeMake(SCREEN_WIDTH * self.headTitleArray.count, contentScrollViewRect.size.height);self.contentScrollView.bounces = NO;self.contentScrollView.pagingEnabled = YES;self.contentScrollView.delegate = self;[self.view addSubview:self.contentScrollView];[self addContentVC];
}

3、加入视图控制器

/***  加入视图控制器1、先加入ChildViewController   无2、设置frame                   VC会调用viewDidLoad方法3、加入superView               VC会调用viewWillApper、viewDidApper方法*/
- (void)addContentVC {for (int i = 0; i < self.headTitleArray.count; i ++) {ContentViewController * VC = [[ContentViewController alloc]init];VC.typeName = self.headTitleArray[i];[self addChildViewController:VC];//默认加载第一页if (!i) {[self loadScrollViewWithPage:i];}}
}

4、实现视图切换的方法

- (CGRect)getRect:(int)currentPage {CGRect rect = CGRectMake(SCREEN_WIDTH * currentPage, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);return rect;
}- (void)loadScrollViewWithPage:(int)page {if (page < 0 || page >= self.headTitleArray.count) {return;}//判断页面是否已经显示，如果未显示则让其显示ContentViewController * VC = [self.childViewControllers objectAtIndex:page];if (VC.view.superview == nil) {VC.view.frame = [self getRect:page];[self.contentScrollView addSubview:VC.view];}else {return;}}

5、实现频道切换时上滚动视图的图标实时变化

//改变按钮大小
- (void)scaleButton:(UIButton *)button withScale:(CGFloat)scale {[button setTitleColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 - scale alpha:1.0] forState:UIControlStateNormal];CGFloat minScale = 0.8;CGFloat trueScale = minScale + (1 - minScale) * scale;button.transform = CGAffineTransformMakeScale(trueScale, trueScale);
}//改变频道按钮的坐标
- (void)scrollHeadScrollView {CGFloat x = self.currentPage * 60 + 60 * 0.5 - SCREEN_WIDTH * 0.5;if (x >= 0) {if (x >= self.headScrollView.contentSize.width - SCREEN_WIDTH) {x = self.headScrollView.contentSize.width - SCREEN_WIDTH;[self.headScrollView setContentOffset:CGPointMake(x, 0) animated:YES];   //向右滚动到尽头}else[self.headScrollView setContentOffset:CGPointMake(x, 0) animated:YES];}else[self.headScrollView setContentOffset:CGPointMake(0, 0) animated:YES];  //向左滚动到尽头
}//点击频道按钮切换
- (void)headScrollViewButtonAction:(UIButton *)button {NSInteger currentPage = button.tag - 1000;[self.contentScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * currentPage, 0) animated:YES];}

6、在ScrollView代理方法里面实现切换视图的判断

pragma mark - scrollViewDelegate
//用户滑动屏幕切换频道的情景：ScrollView滚动停止的时候调用该方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {if (scrollView == self.contentScrollView) {CGFloat pageWidth = SCREEN_WIDTH;self.currentPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;//加载页面[self loadScrollViewWithPage:self.currentPage];//滚动标题栏[self scrollHeadScrollView];//修正切换太快导致频道按钮出现缩放不正确的问题[self.headScrollView.subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {if ([obj isKindOfClass:[UIButton class]] && idx != self.currentPage) {[self scaleButton:obj withScale:0];}}];}}//用户点击导航频道切换内容的情景：
// 调用以下函数，来自动滚动到想要的位置，此过程中设置有动画效果，停止时，触发该函数
// UIScrollView的setContentOffset:animated:
// UIScrollView的scrollRectToVisible:animated:
// UITableView的scrollToRowAtIndexPath:atScrollPosition:animated:
// UITableView的selectRowAtIndexPath:animated:scrollPosition:
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {[self scrollViewDidEndDecelerating:self.contentScrollView];
}//用户滑动屏幕的情况：实时改变频道按钮的大小
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {CGFloat value = scrollView.contentOffset.x / SCREEN_WIDTH;//计算出需要改变大小的按钮的位置int leftBtnIndex = (int)value;int rightBtnIndex = leftBtnIndex + 1;//计算出需要改变大小的倍数CGFloat rightScale = value - leftBtnIndex;CGFloat leftScale = 1 - rightScale;//改变大小UIButton * leftBtn = [self.headScrollView.subviews objectAtIndex:leftBtnIndex];[self scaleButton:leftBtn withScale:leftScale];if (rightBtnIndex < self.headTitleArray.count) {UIButton * rightBtn = [self.headScrollView.subviews objectAtIndex:rightBtnIndex];[self scaleButton:rightBtn withScale:rightScale];}}

7、效果图

版本二效果图一

版本二效果图二

版本二效果图三

8、demo下载

下载地址（点击我）https://github.com/DaMingShen/Imitate163PageControlDemo

这篇关于iOS开发：仿网易新闻首页多频道视图切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/500994。

相关文章

使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
Pytest多环境切换的常见方法介绍

Pytest多环境切换的常见方法介绍

《Pytest多环境切换的常见方法介绍》Pytest作为自动化测试的主力框架,如何实现本地、测试、预发、生产环境的灵活切换,本文总结了通过pytest框架实现自由环境切换的几种方法,大家可以根据需要进... 目录1.pytest-base-url2.hooks函数3.yml和fixture结论你是否也遇到过
阅读更多...
Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》：本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制（Master-Slave Replication）2. 读写分离3.
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2