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。

相关文章

这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
v0.dev快速开发

v0.dev快速开发

探索v0.dev：次世代开发者之利器 今之技艺日新月异，开发者之工具亦随之进步不辍。v0.dev者，新兴之开发者利器也，迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势，助汝速速上手，提升开发之效率。 何谓v0.dev？ v0.dev者，现代化之开发者工具也，旨在简化并加速软件开发之过程。其集多种功能于一体，助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2