IOS 学习笔记 页面导航:平铺式导航 基于分屏导航的实现

 

目录

1 平铺式导航

2 视图控制器的种类

2.1 UIViewController 

2.2 UINavigationController

2.3 UITabBarController 

2.4 UIPageViewController    

2.5 UISplitViewController  

2.6 UIPopoverController

3 平铺式导航

3.1 概述

3.2 基于分屏导航的实现

3.2.1 准备图片资源用于展示翻页

3.2.2 代码实现和布局

3.3 基于电子书导航的实现

---

 

上一节：IOS 学习笔记 页面跳转

上一节初步提到了页面的跳转，也提出了页面导航的知识点，并且学习了通过 UIViewController来实现页面间的导航，这一篇笔记正式开始就几种导航模式开始深入学习。

 

1 平铺式导航

平铺式导航有分屏和分页，在内容上是没有层级关系的，展示的内容都放在一个屏幕中，可以左右或者上下滑动，如：

 

2 视图控制器的种类

视图控制器    视图控制器的在导航上的作用

 

2.1 UIViewController 

可用于自定义视图控制器的导航，用于界面间的跳转，比如用一个UIViewController控制另外2个UIViewController工作。UIViewController提供了下面两个方法来实现页面之间的导航：

presentViewControllerd:animated:completion:打开一个页面视图

dismissViewControllerAnimated：关闭当前页面视图，一般用于回到上一个视图。

或者通过Interface Builder的Segue（过渡）实现，也就是在故事板中通过Navigation Controller，连线实现，不需要写代码。

 

2.2 UINavigationController

导航控制器，可以与UITableViewController结合使用，

 

2.3 UITabBarController 

标签栏控制器，可用于构建标签式导航模式

 

2.4 UIPageViewController    

电子书风格的导航控制器，主要用电子书和电子杂志类的应用开发，是IOS最近才推出的。

 

2.5 UISplitViewController  

主要用于ipad应用开发，分割屏幕风格的视图控制器

 

2.6 UIPopoverController

主要用于ipad应用开发，气泡风格的控制器
      

 

3 平铺式导航

 

3.1 概述

实现的效果上面1.1已经展示了一个典型的应用场景，还有一种典型的场景是电子书，模拟翻页场景，这是基于电子书实现的平铺导航模式，用户模拟翻书一样在页面之间导航，并且能够看到翻页时背面的文字和图片等效果，当然一般的电子书有很多翻页的模式，左右平移，上下平移等。

平铺模式有两种实现：基于分屏导航的实现、基于电子书导航的实现

这篇只学习基于分屏导航的实现

3.2 基于分屏导航的实现

基于分屏导航是平铺导航模式的主要实现方式，主要通过UIPageControl和UIScrollView这两个控件来实现，UIPageControl是IOS标准分屏控件，它会在屏幕上显示"......"的指示器小圆点，如下图红色方框里面的便是UIPageControl控件，orange色的小圆点表示当前页面，一共有九个points，表示一共有9个页面。

 

分屏导航可以动过手势左右滑动或者点击指示器小圆点来实现翻页，下面将制作一个简单的分屏浏览图片的小demo。

 

3.2.1 准备图片资源用于展示翻页

在网络上下载9张图片并拖入到Assets.xcassets里面就可以了，之后会使用ImageView来展示图片，对ImageView不熟悉的可以看之前笔记《