利用 scroll view & container view 水平滑動切換頁面

我們時常在 iOS App 上見到類似 Instagram 的畫面設計,點選 button 或水平滑動可切換頁面。

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • 在 scroll view 加入水平排列的 stack view,stack view 將裝著每一個分頁。
  • 在 stack view 加入多個 container view,每個 container view 連接的 view controller 負責不同的分頁。
Image for post
Image for post

加入切換分頁的 segment control

分別顯示電影和音樂頁面。

Image for post
Image for post
Image for post
Image for post

加入 scroll view

在 segmented control 下加入 scroll view。

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

在 scroll view 裡加入 horizontal stack view

Image for post
Image for post
Image for post
Image for post

在 stack view 裡加入兩個 container view

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

設定 stack view 的 Alignment & Distribution

Alignment 設為 Fill,Distribution 設為 Fill Equally

Image for post
Image for post

加入呈現電影和音樂頁面的 table view controller,將 container view 連接到 table view controller

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

將裝著 container view 的 view controller 類別設為自訂的 HomeViewController(繼承 UIViewController)

Image for post
Image for post

將 2 個 table view controller 的類別分別設為自訂的 MovieTableViewController & MusicTableViewController (繼承 UITableViewController)

Image for post
Image for post
Image for post
Image for post

定義抓取 iTunes 資料的網路程式,在 MovieTableViewController & MusicTableViewController 呼叫抓資料的 function

參考範例的 ItunesService.swift,ItunesFeed.swift,MovieTableViewController & MusicTableViewController。

  • 點選 segmented control 無法切換分頁。
Image for post
Image for post

水平滑動切換分頁時更新 segmented control

  • 設定 scroll view 的 delegate 為 HomeViewController。
Image for post
Image for post
@IBOutlet weak var segmentedControl: UISegmentedControl!
extension HomeViewController: UIScrollViewDelegate {
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let index = Int(scrollView.contentOffset.x / scrollView.bounds.width)
segmentedControl.selectedSegmentIndex = index
}
}

點選 segmented control 切換分頁

  • 連接 segmented control 的 action (HomeViewController.swift)。
@IBAction func changePage(_ sender: UISegmentedControl) {}
@IBOutlet weak var scrollView: UIScrollView!
@IBAction func changePage(_ sender: UISegmentedControl) {

let x = CGFloat(sender.selectedSegmentIndex) * scrollView.bounds.width
let offset = CGPoint(x: x, y: 0)
scrollView.setContentOffset(offset, animated: true)

}
Image for post
Image for post
Image for post
Image for post

One more thing,點選 cell 時顯示照片

當我們在 container view 的 controller 操作時,能不能通知裝著 container view 的 controller 呢 ? 比方在 MovieTableViewController & MusicTableViewController 的 cell 點選時,在 HomeViewController 顯示對應的照片。

Image for post
Image for post
Image for post
Image for post
@IBOutlet weak var imageView: UIImageView!
Image for post
Image for post
  • HomeViewController 的 children 是 MovieTableViewController & MusicTableViewController。
Image for post
Image for post
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let controller = parent as? HomeViewController
let result = results[indexPath.row]
controller?.imageView.kf.setImage(with: result.artworkUrl100)
}
Image for post
Image for post
Image for post
Image for post

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store