View controller and navigation mode

View navigator and navigation mode

1. Navigation mode

• Tile navigation mode ： Content has no hierarchical relationship , The content of the presentation is placed on a home screen , Use split screen or paging controller for navigation , You can swipe the screen left and right or up and down to view the content .
• Label navigation mode ： The content is divided into several functional modules , There is no relationship between each functional module . Manage various functional modules through labels , Click the tab to switch function modules .
• Tree navigation mode ： The content is hierarchical , Subdivide from top to bottom or have the relationship of classification and inclusion .

2. Modal view

During navigation , Sometimes it is necessary to give up the main task and do other secondary tasks , Then return to the main task , This secondary task is done in the modal view . By default , The modal view slides out from the bottom of the screen . When finished, you need to close the module view , If you don't close , You can't do anything else , This is it. “ Modality ” The meaning of . It means response processing .

The controller responsible for controlling the modal view is called the modal view controller . The modal view controller is not a specialized class , It can be a subclass of the controller mentioned above . The controller responsible for the primary task view is called the primary view controller , It has a parent-child relationship with the modal view controller . because UIViewController Class provides the following two methods , So modal views can be rendered and closed in any view controller .

• presentViewController:animated:completion. Render modal view .
• dismissViewControllerAnimated:completion. Close modal view .
  When rendering modal views , There are two choices ：
• Code implementation ：UIViewController Of presentViewController:animated:completion Method realization .
• Interface Builder Realization ： stay storyboard The transition of （segue） To realize , No need to write code .

3. Tile navigation

3.1 Implementation based on split screen navigation

Split screen navigation is the main implementation of tile navigation mode , The controls involved are split screen controls （UIPageControl） And screen scrolling view （UIscrollView）
There are two gestures based on split screen navigation ：1、 Click the left side of the highlighted dot （ On the right ） Or above （ Underside ） Flip the screen ;2、 It is to turn the screen by sliding on the screen with your hand .** The total number of screens should be limited to 20 Within a , exceed 20 A smaller split screen control will overflow .** in fact , When an application exceeds 10 Screen time , It is not very convenient to use the split screen navigation mode .

Example ：

import UIKit
// Define the height and width of the screen 
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)
       // Set delegation object 
        self.scrollView.delegate = self
        
        // Set the size of the content view in the scroll view 
        self.scrollView.contentSize = CGSize(width: S_Width * 3, height: S_Height) // How much is expected to be put (n) screen , The corresponding width is S_Width * n
        self.scrollView.frame = self.view.frame // Set up frame Property is the current view size 
        self.scrollView.isPagingEnabled = true // Set the screen scroll view to scroll one screen at a time 
        self.scrollView.showsVerticalScrollIndicator = false
        self.scrollView.showsHorizontalScrollIndicator = false
        // Add the material picture of the view 
        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)
        
    }
    // What screen is the current page displayed on 
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
    
        //ScrollViewdelegate Implementation method of delegation agreement （ When the screen scrolls , The method is called back ）
        let offset = scrollView.contentOffset // The point from the origin of the content view to the offset of the scrolling view 
        self.pageControl.currentPage = Int(offset.x / S_Width)
        // Divide the offset distance by the screen width , Get the screen number of the current page , And highlight it on the interface 
    }
    // Switch the current page 
 @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)
            
        })
    }

} 

The effect is shown below ：

3.2 Based on the realization of e-book navigation

In the application based on e-book navigation , The required classes and protocols are UIPageViewControllerDataSourse agreement 、UIPageViewControllerDelegate The protocol and UIPageViewController class . among UIPageViewController Class has no corresponding view class .
UIPageViewControllerDataSourse There are two methods that must be implemented in the data source protocol ：

• pageViewController:viewControllerBeforeViewController:. Returns the view controller before the current view controller , For the display of the previous page .
• pageViewController:viewControllerAfterViewController:. Returns the view controller after the current view controller , For the display of the next page .
  stay UIPageViewControllerDelegate In the entrustment agreement , The most important method is pageViewController:spineLocationForInterfaceOrientation:, It sets the spine position according to the screen rotation direction （spineLocation） And initialize the home page .
  UIPageViewController There are two common attributes **： Double sided display （double Sided） And spine position （spine Location）**
• Double sided display ：doubleSided Set to true, The even page will be displayed on the back . by false Single sided display when , That is, when the user flips the page , See the back of the page is The current page is transparent , Is the opposite of the current content .
• Spine position ： It is also a very important attribute , But it's read-only . The spine position is enumerated by UIPageViewControllerSpineLocation Definition , The member variables under this enumeration type are as follows ：
  min: Defines the position of the spine of the book at the far left of the book （ Or the top ）
  max: Defines the position of the spine at the far right of the book （ Or bottom ）
  mid: Defines the position of the spine in the middle of the book .

Continue with girlGalley As an example , Do a page turning in e-book mode
The code example is as follows ：

import UIKit
// Set definitions and properties 
// Enumeration type , Indicates the direction of the page just turned 
enum DirectionForward : Int {
    
    case before = 1
    case after = 2
}
class ViewController: UIViewController,UIPageViewControllerDelegate,UIPageViewControllerDataSource{
    
// Return to the view controller before the view controller , For the display of the previous page 
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
    
        pageIndex -= 1
        if pageIndex < 0 {
    
            pageIndex = 0
            return nil
        }
        directionForward = .before
        return self.viewControllers[pageIndex]
    }
  // Return to the view controller after the view controller , For the display of the next page 
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
    
        pageIndex += 1
        if pageIndex > 2 {
    
            pageIndex = 2
            return nil
        }
        directionForward = .after
        return self.viewControllers[pageIndex]
    }
    
    var pageIndex = 0
    // Define the direction variable of page turning 
    var directionForward = DirectionForward.after
    var pageViewController:UIPageViewController!
    var viewControllers:[UIViewController]! // An array type , Save the view controller for three pages  
    // Set definitions and properties 
    override func viewDidLoad() {
    
        super.viewDidLoad()
        // Instantiate three view controllers 
        let  page_01ViewController = UIPageViewController()
            let  page_02ViewController = UIPageViewController()
            let  page_03ViewController = UIPageViewController()
// Add three view controllers to the array  
            self.viewControllers = [page_01ViewController,page_02ViewController,page_03ViewController]
        
        // Set picture size , Content , Don't forget to add them to their respective view controllers 
        let imageView_01 = UIImageView(frame: self.view.frame)
        imageView_01.image = UIImage(named: "girl_01")
        page_01ViewController.view.addSubview(imageView_01)
        
        let imageView_02 = UIImageView(frame: self.view.frame)
        imageView_02.image = UIImage(named: "girl_02")
        page_02ViewController.view.addSubview(imageView_02)
        
        let imageView_03 = UIImageView(frame: self.view.frame)
        imageView_03.image = UIImage(named: "girl_03")
        page_03ViewController.view.addSubview(imageView_03)
        /* Set the flipping style of the page ：pageCurl- Flipping effect mode ,scroll- Slide screen effect mode ; Set the page turning direction ,horizontal- level ,vertical- vertical */
        self.pageViewController = UIPageViewController(transitionStyle: .pageCurl, navigationOrientation: .horizontal, options: nil)
        // Set the delegate source and object as the current view controller 
        self.pageViewController.delegate = self
        self.pageViewController.dataSource = self
        
        //  Set the view to be displayed in the first page ,direction- Page turning direction ,forward- forward ,reverse- backward 
     self.pageViewController.setViewControllers([page_01ViewController], direction: .forward, animated: true, completion: nil)
        self.view.addSubview(pageViewController.view)
            }
    func pageViewController(_ pageViewController: UIPageViewController, spineLocationFor orientation: UIInterfaceOrientation) -> UIPageViewController.SpineLocation {
    
    // Whether to display on both sides 
        self.pageViewController.isDoubleSided = false
        // because spineLoctaion Properties are read-only , So you can only set the spine position in this method 
        return .min
    }
}