iOS开发那些事-平铺导航–基于分屏导航及案例实现

2024-04-17 15:08

本文主要是介绍iOS开发那些事-平铺导航–基于分屏导航及案例实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

平铺导航模式是非常重要的导航模式。一般用于简单的扁平化信息浏览或任务。扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京、上 海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航。

从一个案例开始介绍平铺导航。如果我想为开发一个基于iPhone的“画廊”应用,目前只有3幅名画(左图是达芬奇-蒙娜丽莎、中图是罗丹-思想者、右图是毕加索-哭泣)收录到应用中。由于这3幅名画之间没有层次关系,他们之间是扁平的。

1

基于分屏导航实现

基于分屏导航是平铺导航模式的主要实现方式,主要涉及的控件有:分屏控件(UIPageControl)和ScrollView,分屏控件是iOS标准控件。

基于分屏导航的手势有两种,一个是点击小点的左边(上边)或右边(下边)实现翻屏,另一个是用手在屏幕上滑动实现翻屏。屏幕的总数应该限制在20个 以内,超过20个分屏控件的小点就会溢出。事实上,如果一个应用超过10屏,此时使用基于分屏导航的平铺导航模式已经不是很方便了。

下面我们采用基于分屏导航模式实现“画廊”应用。使用Single View Application模板创建一个名为PageControlNavigation的工程。将ScrollView和PageControl控件拖曳到 设计界面,将其摆放到合适的位置,通过属性将视图背景设置为黑色。

 2

在Interface Builder中选中ScrollView控件,打开其属性检查器,设置Scrollers中的属性,此时该ScrollView控件不显示水平和垂直滚动条,但可以滚动也可以分屏。

 3

在Interface Builder中选中PageControl控件,打开其属性检查器,设置Pages中“# of Pages”(总屏数)属性为3,Current(当前屏)属性为0。再打开尺寸检查器,修改Width(宽度)属性为200,将这个属性设置大一些是为 了便于手指点击。

4 5

最后,还需要为这两个控件定义输出口并连线,而且要为分屏控件控件定义响应屏幕变化事件的方法changePage:并连线。

完成之后,ViewController.h文件中增加的代码如下:

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;
下面设计3个视图,将3个View Controller视图控制器拖曳到MainStoryboard.storyboard的设计界面中,然后再并分别拖曳3个ImageView到3个不同视图上。

6

然后再分别修改3个ImageView的Image属性为名画的文件名。

7

设置完成ImageView的Image属性后,再依次选中视图控制器,将Storyboard ID分别修改为page1、page2、page3。与模态视图的例子不同,我们不需要再创建视图控制器的子类。就本例而言,我们只需展示一些图片。如果 需要处理动作事件,则需要自定义视图控制器的子类。

设计完成后,我们看看程序代码ViewController.h:

#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIScrollViewDelegate>@property (strong, nonatomic) UIView *page1;@property (strong, nonatomic) UIView *page2;@property (strong, nonatomic) UIView *page3;@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;@end
由于需要响应UIScrollView的事件,我们在ViewController中实现了UIScrollViewDelegate协议。

下面我们看看ViewController.m中viewDidLoad方法的代码:

- (void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.self.scrollView.contentSize  = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height);self.scrollView.frame = self.view.frame;UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];self.page1 = page1ViewController.view;self.page1.frame = CGRectMake(0.0f, 0.0f, 320.0f, 420.0f);UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];self.page2 = page2ViewController.view;self.page2.frame = CGRectMake(320.0f, 0.0f, 320.0f, 420.0f);UIViewController* page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"];self.page3 = page3ViewController.view;self.page3.frame = CGRectMake(2 * 320.0f, 0.0f, 320.0f, 420.0f);self.scrollView.delegate = self;[self.scrollView addSubview:self.page1];[self.scrollView addSubview:self.page2];[self.scrollView addSubview:self.page3];}


该方法主要进行控件初始化,由于需要计算各个控件的位置,代码比较多,但是基本上没什么难点。self.scrollView.delegate = self是把当前视图控制(UIScrollViewDelegate实现对象)分配给ScrollView控件,以便响应事件处理,其他事件是 scrollViewDidScroll:,其代码如下:

- (void) scrollViewDidScroll: (UIScrollView *) aScrollView{CGPoint offset = aScrollView.contentOffset;self.pageControl.currentPage = offset.x / 320.0f;}


当左右滑动屏幕,ScrollView控件滚动完成的时候,要计算和设定分屏控件的当前屏currentPage。当点击分屏控件时屏幕发生变化,此时触发changePage:方法,其代码如下:

- (IBAction)changePage:(id)sender{[UIView animateWithDuration:0.3f animations:^{int whichPage = self.pageControl.currentPage;self.scrollView.contentOffset = CGPointMake(320.0f * whichPage, 0.0f);}];}


在上述代码中,我们根据分屏控件当前屏幕属性(currentPage)重新调整了ScrollView控件的偏移量,而且为了使屏幕变化产生动画 效果,使用了[UIView animateWithDuration:0.3f animations:^{ …}]代码,重新调整ScrollView控件偏移量。

运行代码,得到的效果

 8

这篇关于iOS开发那些事-平铺导航–基于分屏导航及案例实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912131

相关文章

这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企业开发案例调优场景

需求 (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

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

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

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

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

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

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

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

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来