Swift UI special training 43 Swift APP boot page, swiftui

Swift UI special training 43 Swift APP boot page, swiftui

When an APP is loaded for the first time, a boot page is usually used to show features or tell users how to use them. Open our Storyboard, import a Page View Controller, make the following settings, and modify the Transition Style:

Set the storyboard ID to PageViewController for our Page View Controller.

Now you should want to know how we can edit our pageviewcontroller. It does not seem to be editable. First you need to know how it works.

The page view controller is defined as a view controller administrator who organizes and manages multiple pages, and each page is managed by its own view controller. Therefore, we need to add a view controller first. You may wonder why I want to create only one view controller for three boot pages. Because the boot page structure is very similar, we can take components on the page. Then we drag two labels in viewcontroller (Text center, and the second label is large enough) and an imageview,

Set the storyboardID of the viewcontroller to pagecontentviewcontroller, create a class with the same name, and add the following code to the class:

 @IBOutlet weak var headingLabel:UILabel!    @IBOutlet weak var subHeadingLabel:UILabel!    @IBOutlet weak var contentImageView:UIImageView!var index : Int = 0    var heading : String = ""    var imageFile : String = ""    var subHeading : String = ""

The index indicates the order of the boot page. For example, the first index is 0.

Add the following to the viewDidLoad method:

 headingLabel.text = heading        subHeadingLabel.text = subHeading        contentImageView.image = UIImage(named: imageFile)

Then, connect the label and image in the Code to the interface on the storyboard.

Now that the page of the content is complete, we can switch the page. Add these boot pages to Page view Controller so that you can switch between them. We can use the on-demand VOD method. In this method, we need to create a data source. When the user switches, the data source tells us which viewcontroller the pageviewcontroller needs to play. The data source inherits from PageViewControllerDataSource. You need to implement the following two methods:

Now we create a file PageViewController, which belongs to UIPageViewController and inherits PageViewControllerDataSource.

Input the data we want to display on the page:

Var pageHeadings = ["Shake food", "map positioning", "food sharing"] var pageImages = ["fiveleaves", "mapintro ", "homei"] var pageSubHeadings = ["Shake your mind and get food done with ease", "Find your favorite restaurant, SoFun navigation", "share your findings, establishing food and goods friendship "]

Implement two proxy methods:

func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {        var index = (viewController as PageContentViewController).index                index++                return self.viewControllerAtIndex(index)    }        func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {        var index = (viewController as PageContentViewController).index                index--                return self.viewControllerAtIndex(index)    }

When we move forward or backward, we first get the index value of the current page and then auto-increment or auto-subtraction to return adjacent pages.

Now we have added two auxiliary methods:

 func viewControllerAtIndex(index: Int) -> PageContentViewController? {                if index == NSNotFound || index < 0 || index >= self.pageHeadings.count {            return nil        }                // Create a new view controller and pass suitable data.        if let pageContentViewController = storyboard?.instantiateViewControllerWithIdentifier("PageContentViewController") as? PageContentViewController {                        pageContentViewController.imageFile = pageImages[index]            pageContentViewController.heading = pageHeadings[index]            pageContentViewController.subHeading = pageSubHeadings[index]            pageContentViewController.index = index                        return pageContentViewController        }                return nil    }

Add the following code to the viewDidLoad method:

// Set the data source to itself        dataSource = self                // Create the first walkthrough screen        if let startingViewController = self.viewControllerAtIndex(0) {            setViewControllers([startingViewController], direction: .Forward, animated: true, completion: nil)        }

Now our boot page is basically complete. Before placing the boot page on the first page of the program, add the following code to the viewDidLoad method of your first page code:

if let pageViewController = storyboard?.instantiateViewControllerWithIdentifier("PageViewController") as? PageViewController {        self.presentViewController(pageViewController, animated: true, completion: nil)        }

You can run it!

Slide to switch

Now let's add some control, and then add the following two methods to pageviewcontroller:

    func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {        return pageHeadings.count    }        func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {        if let pageContentViewController = storyboard?.instantiateViewControllerWithIdentifier("PageContentViewController") as? PageContentViewController {            return pageContentViewController.index        }                return 0    }

Run the following command to see at the bottom of the screen:

An indicator is displayed, indicating the total number of pages and the page we are currently staying on.

We can see that the page indicator provided by the call system is easy to implement, but its style is fixed. We want to define a indicator ourselves.

Comment out the above code, and then drag a page control to the top of heading in the storyboard.

Set the background color and the selected color as follows:

Controller on the current page

Add the corresponding object to pagecontentviewcontroller and associate it:

 @IBOutlet weak var pageControl:UIPageControl!

Add the following code to the viewDidLoad method to mark the current page count:

        pageControl.currentPage = index

The page indicator is available. Previously we switched by sliding the page and could not be switched out. Now we add a button to implement page switching and switching.

Button style self-designed

Continue to associate with the class. The third-party library is used for the buttons I started to experience here, so the effect is the same instead of UIButton.

    @IBOutlet weak var getStartedButton:MKButton!    @IBOutlet weak var forwardButton:UIButton!

Add the following code to viewDidLoad:

      getStartedButton.hidden = (index == 2) ? false : true        forwardButton.hidden = (index == 2) ? true: false

The forward button is displayed on the first two pages. The forward button is hidden on the last page and the start experience button is displayed.

Then add two methods to associate two buttons:

@IBAction func close(sender: AnyObject) {                dismissViewControllerAnimated(true, completion: nil)    }        @IBAction func nextScreen(sender: AnyObject) {        let pageViewController = self.parentViewController as PageViewController        pageViewController.forward(index)    }

}

@ IBAction func nextScreen (sender: AnyObject) {let pageViewController = self. parentViewController as PageViewController pageViewController. forward (index )}

The nextScreen method calls the forward auxiliary method in pageViewController. This method has not been implemented yet. Now return to pageViewController and add the following code:

func forward(index: Int) {                if let nextViewController = self.viewControllerAtIndex(index + 1) {            setViewControllers([nextViewController], direction: .Forward, animated: true, completion: nil)        }    }

Run it now to see the effect!

Now the last problem is left: Make sure that the boot page appears only when it is opened for the first time. The ios sdk has a class NSUserDefault to map application and user settings. For example, you can use it to save a status bit to determine whether to start the boot page. For example, if the user identifies a price, you can use this class to record the currency type used by the user to indicate the price. The NSUserDefault class uses the excuse associated with the operating system, that is, the data you configured in the class still works when the APP is disabled. Now we need to re-write the close method. Once closed, the user's usage changes:

@IBAction func close(sender: AnyObject) {        let defaults = NSUserDefaults.standardUserDefaults()        defaults.setBool(true, forKey: "hasViewedWalkthrough")                dismissViewControllerAnimated(true, completion: nil)    }

We set a Boolean value for the number of systems whose key value is "hasViewedWalkthrough". When the boot page runs once, it becomes true, modify the following in the viewDidLoad method on the first page of our system:

       let hasViewedWalkthrough = defaults.boolForKey("hasViewedWalkthrough")              if hasViewedWalkthrough == false {           if let pageViewController = storyboard?.instantiateViewControllerWithIdentifier("PageViewController") as? PageViewController {                               self.presentViewController(pageViewController, animated: true, completion: nil)            }        }

All done. Come and try it!