开始用Swift开发iOS 10 - 19 使用UIPageVi

作者: Andy_Ron | 来源:发表于2017-07-30 23:22 被阅读313次

继续上一篇开始用Swift开发iOS 10 - 18 Search Bar 和 UISearchController ，这一篇使用UIPageViewController构建介绍页面，与使用LaunchScreen.storyboard的启动页不同。

向Storyboard中添加UIPageViewController

在Storyboard拖进一个UIPageViewController。修改相关属性。

修改UIPageViewController的 storyboard ID 为 WalkthroughController。

类似UINavigationController，UIPageViewController也是一种容器类型的控制器。这种容器类型的控制器是用来管理其它多个控制器的。

如果容器内的控制器页面元素类似（上图就是这种情况），可以通过一个控制器重复利用。

设计介绍页

下载介绍页所需的图片，拖到Assets.xcasset。
拖动一个新的View Controller到SB中（作为重复使用的控制器），做一些UI设计：
- 设置背景为红色
- 添加一个Label名为Personalize，选择合适的字体和大小，居中。
- 添加一个Image View，300*232，居中。
- 添加另一个Label名为Pin your favorite restaurants and create your own food guide，282*64，行数为0，居中，选择合适的字体和大小。
- 添加一些约束
设置新的View Controller的 storyboard ID 为 WalkthroughContentViewController。
最后大概如下：

创建WalkthroughContentViewController

创建WalkthroughContentViewController类文件，继承至UIViewController，并关联上面添加的新View Controller。

添加三个接口，关联两个Label和一个image view；添加四个变量，其中index是指多个介绍页的索引。

@IBOutlet var headingLabel: UILabel!
@IBOutlet var contentLabel: UILabel!
@IBOutlet var contentImageView: UIImageView!

var index = 0
var heading = ""
var imageFile = ""
var content = ""

修改viewDidLoad为：

  override func viewDidLoad() {
      super.viewDidLoad()

      headingLabel.text = heading
      contentLabel.text = content
      contentImageView.image = UIImage(named: imageFile)
  }

实现 UIPageViewController

新建类WalkthroughPageViewController，继承至UIPageViewController。

让WalkthroughPageViewControlle符合UIPageViewControllerDataSource协议。

 class WalkthroughPageViewController: UIPageViewController, UIPageViewControllerDataSource

新建几个变量，用于显示介绍页中的内容。

  var pageHeadings = ["Personalize", "Locate", "Discover"]
  var pageImages = ["foodpin-intro-1", "foodpin-intro-2", "foodpin-intro-3"]
  var pageContent = ["Pin your favorite restaurants and create your own foodguide", "Search and locate your favourite restaurant on Maps", "Find restaurants pinned by your friends and other foodies around the world"]

实现UIPageViewControllerDataSource协议的两个方法，分别在介绍页翻到下一个和翻到上一个时调用。contentViewController函数的作用是根据介绍页的索引获取不同的数据。instantiateViewController方法根据storyboard的中storyboard ID生成视图控制器。

  func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
      
      var index = (viewController as! WalkthroughContentViewController).index
      index -= 1
      return contentViewController(at: index)
  }
  
  func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
      
      var index = (viewController as! WalkthroughContentViewController).index
      index += 1
      return contentViewController(at: index)
  }
  
  func contentViewController(at index: Int) -> WalkthroughContentViewController? {
      
      if index < 0 || index >= pageHeadings.count {
          return nil
      }
      
      if let pageContentViewController = storyboard?.instantiateViewController(withIdentifier: "WalkthroughContentViewController") as? WalkthroughContentViewController {
          
          pageContentViewController.imageFile = pageImages[index]
          pageContentViewController.heading = pageHeadings[index]
          pageContentViewController.content = pageContent[index]
          pageContentViewController.index = index
          
          return pageContentViewController
      }
      
      return nil
  }

修改viewDidLoad：

  override func viewDidLoad() {
      super.viewDidLoad()

      dataSource = self
      if let startingViewController = contentViewController(at: 0) {
          setViewControllers([startingViewController], direction: .forward, animated: true, completion: nil)
      }
  }

setViewControllers方法是设置UIPageViewController管理的视图控制器。

让介绍页在首页显示后跳出。在RestaurantTableViewControlle中添加：

  override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
      if let pageViewController = storyboard?.instantiateViewController(withIdentifier: "WalkthroughController") as? WalkthroughPageViewController {
          present(pageViewController, animated: true, completion: nil)
      }
  }

添加默认页面指示

页面指示就是一般在页面下用于分辨当前是第一个页面的几个小点。
实现UIPageViewControllerDataSource协议的两个方法：presentationCount(for:)表示总共有几个小点（页面）。
presentationIndex(for:)表示当前页面的索引。

    func presentationCount(for pageViewController: UIPageViewController) -> Int {
        return pageHeadings.count
    }
    
    func presentationIndex(for pageViewController: UIPageViewController) -> Int {
        if let pageContentViewController = storyboard?.instantiateViewController(withIdentifier: "WalkthroughContentViewController") as? WalkthroughContentViewController {
            return pageContentViewController.index
        }
        return 0
    }

修改页面指示的样式

不用默认的页面指示，就要把上面两个方法删除，然后使用UIPageControl。

删除上面实现的两个方法。从对象库中拖一个Page Control到walkthrough content view controller底部，在属性检查器中修改适当属性，并添加约束。
在WalkthroughContentViewController中添加接口@IBOutlet var pageControl: UIPageControl!并与Page Control关联。在viewDidLoad中添加pageControl.currentPage = index

添加NEXT/DONE按钮

在walkthrough content view controller右下角添加一个按钮名为NEXT。
在WalkthroughContentViewController中添加接口，并按钮关联。
```
  @IBOutlet var forwardButton: UIButton!
```

在viewDidLoad中添加根据索引判断按钮名的代码：

      switch index {
      case 0...1: forwardButton.setTitle("NEXT", for: .normal)
      case 2: forwardButton.setTitle("DONE", for: .normal)
      default: break
      }

添加点击按钮的action，并与按钮关联

  @IBAction func nextButtonTapped(sender: UIButton) {
      switch index {
      case 0...1:
          let pageViewController = parent as! WalkthroughPageViewController
          pageViewController.forward(index: index)
      case 2:
          dismiss(animated: true, completion: nil)
      default: break
      }
  }

在WalkthroughPageViewController中添加方法：

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

完成类似下面：

但因为之前是利用RestaurantTableViewController的viewDidAppear方法显示介绍页的，而viewDidAppear方法是页面显示后就调用一下，这样就出现不停进入介绍页。实际上只需要第一次打开app的时显示介绍页就可以了。

UserDefaults的使用

UserDefaults是用来管理应用和用户相关的设置的。也就是可以用UserDefaults存储一些用户相关的少量数据，比如上面的是否看过介绍页，也就是是否点击过DONE按钮了。
UserDefaults也是通过单例模式进行操作的，通过类属性standard获取单例。

nextButtonTapped中点击DONE按钮时设置一个值标志：

  @IBAction func nextButtonTapped(sender: UIButton) {
      switch index {
      case 0...1:
          let pageViewController = parent as! WalkthroughPageViewController
          pageViewController.forward(index: index)
      case 2:
          UserDefaults.standard.set(true, forKey: "hasViewedWalkthrough")
          dismiss(animated: true, completion: nil)
      default: break
      }
  }

再到RestaurantTableViewController的viewDidAppear判断对应key值。

  override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
      
      if UserDefaults.standard.bool(forKey: "hasViewedWalkthrough") {
          return
      }
      
      if let pageViewController = storyboard?.instantiateViewController(withIdentifier: "WalkthroughController") as? WalkthroughPageViewController {
          present(pageViewController, animated: true, completion: nil)
      }
  }

完成介绍页。学习了UIPageViewController和UserDefaults。

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书《Beginning iOS 10 Programming with Swift》的一篇记录

系列文章目录

网友评论

EdLiya:是原创的吗？
Andy_Ron:@EdLiya
第19个，代码与标题的数字是对应的
https://github.com/andyRon/Beginning-iOS-Programming-with-Swift/tree/master/19
EdLiya:@Andy_Ron 这一篇的代码是第几啊，我怎么没找到
Andy_Ron:@EdLiya 是学习appcode网站出的一本书的笔记。

本文标题：开始用Swift开发iOS 10 - 19 使用UIPageVi

本文链接：https://www.haomeiwen.com/subject/kgxklxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

开始用Swift开发iOS 10 - 19 使用UIPageVi

向Storyboard中添加UIPageViewController

设计介绍页

创建WalkthroughContentViewController

实现 UIPageViewController

添加默认页面指示

修改页面指示的样式

添加NEXT/DONE按钮

UserDefaults的使用

代码

说明

系列文章目录

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

开发杂谈

程序员

iOS程序猿

iOS Developer