其他分享
首页 > 其他分享> > 视图控制器与导航模式

视图控制器与导航模式

作者:互联网

视图导航器与导航模式

1.导航模式

2.模态视图

在导航过程中,有时候需要放弃主要任务转而做其他次要任务,然后再返回到主要任务,这个次要任务就是在模态视图中完成的。默认情况下,模态视图是从屏幕下方滑出来的。完成的时候需要关闭这个模块视图,如果不关闭,就不能做别的事情,这就是“模态”的含义。它具有响应处理的意思。
在这里插入图片描述
负责控制模态视图的控制器称为模态视图控制器。模态视图控制器并非一个专门的类,它可以是上面提到的控制器的子类。负责主要任务视图的控制器称为主视图控制器,它与模态视图控制器之间是父子关系。由于UIViewController类提供了如下两个方法,所以任何视图控制器中都可以呈现和关闭模态视图。

3.平铺导航

3.1 基于分屏导航的实现

基于分屏导航是平铺导航模式的主要实现方式,涉及的控件有分屏控件(UIPageControl)和屏幕滚动视图(UIscrollView)
基于分屏导航的手势有两种:1、点击高亮小点的左边(右边)或者上边(下边)实现翻屏;2、是用手在屏幕上滑动实现翻屏。**屏幕的总数应该限制在20个以内,超过20个小点的分屏控件就会溢出。**事实上,当一个应用超过10屏时,使用基于分屏导航模式就不是很方便了。

示例:

import UIKit
//定义屏幕的高度和宽度
let S_Width:CGFloat = UIScreen.main.bounds.size.width
let S_Height:CGFloat = UIScreen.main.bounds.size.height

class ViewController: UIViewController,UIScrollViewDelegate {
    
    var imageView_01:UIImageView!
    var imageView_02:UIImageView!
    var imageView_03:UIImageView!
    var scrollView:UIScrollView!
    var pageControl:UIPageControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.scrollView = UIScrollView()
        self.view.addSubview(self.scrollView)
       //设置委托对象
        self.scrollView.delegate = self
        
        //设置滚动视图中内容视图的大小
        self.scrollView.contentSize = CGSize(width: S_Width * 3, height: S_Height) //预计要放多少(n)屏,相应的宽度就是S_Width * n
        self.scrollView.frame = self.view.frame //设置frame属性为当前视图大小
        self.scrollView.isPagingEnabled = true //设置屏幕滚动视图每次滑动时翻一屏
        self.scrollView.showsVerticalScrollIndicator = false
        self.scrollView.showsHorizontalScrollIndicator = false
        //添加视图的素材图片
        self.imageView_01 = UIImageView(frame: CGRect(x: 0, y: 0, width: S_Width, height: S_Height))
        self.imageView_01.image = UIImage(named: "girl_01")
        self.scrollView.addSubview(self.imageView_01)
        
        self.imageView_02 = UIImageView(frame: CGRect(x: S_Width, y: 0, width: S_Width, height: S_Height))
        self.imageView_02.image = UIImage(named: "girl_02")
        self.scrollView.addSubview(self.imageView_02)
        
        self.imageView_03 = UIImageView(frame: CGRect(x: S_Width * 2, y: 0, width: S_Width, height: S_Height))
        self.imageView_03.image = UIImage(named: "girl_03")
        self.scrollView.addSubview(self.imageView_03)
        
        let pageConrolWidth:CGFloat = 300.0
        let pageControlHeight:CGFloat = 37.0
        self.pageControl = UIPageControl(frame: CGRect(x: (S_Width - pageConrolWidth)/2, y: S_Height - pageControlHeight, width: pageConrolWidth, height: pageControlHeight))
        self.pageControl.numberOfPages = 3
        self.pageControl.addTarget(self, action: #selector(changePage(_:)), for: .valueChanged)
        self.view.addSubview(self.pageControl)
        
    }
    //显示当前页面为第几屏
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //ScrollViewdelegate委托协议的实现方法(当屏幕滚动时,会回调该方法)
        let offset = scrollView.contentOffset //内容视图的原点到滚动视图偏移的点
        self.pageControl.currentPage = Int(offset.x / S_Width)
        //用偏移距离除以屏幕宽度,得出当前页面是第几屏,并通过高亮点显示到界面上
    }
    //切换当前页面
 @objc func changePage(_ sender:AnyObject){
        UIView.animate(withDuration: 0.3,animations: {
            let whichPage = self.pageControl.currentPage
            self.scrollView.contentOffset = CGPoint(x: Int(S_Width) * whichPage, y: 0)
            
        })
    }

} 

效果如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 基于电子书导航的实现

在基于电子书导航实现的应用中,需要的类和协议有UIPageViewControllerDataSourse协议、UIPageViewControllerDelegate协议和UIPageViewController类。其中UIPageViewController类没有对应的视图类。
UIPageViewControllerDataSourse数据源协议中必须实现的方法有以下两个:

标签:控制器,self,视图,scrollView,imageView,导航
来源: https://blog.csdn.net/qq_51466163/article/details/121317504