前言

今天要實作一個常見的功能，就是向左向右滑，可以切換 table view，效果如下

除此之外，滑動到哪個 table view 也會一併跟改上方 collection view item 的顏色

1.效果原理說明

• 共有四個 table view ，寬度剛好是整個螢幕畫面的寬度，高度則是整個螢幕高度扣掉 collection view 的高度
• 一個大小剛好是四個 table view 寬度的 scroll view， 高度則是與 table view 等高
• 一個 collection view 用來放置 title 選單
  

當我們在螢幕上向左滑的時候，畫面就切換到 2nd table view，繼續向左滑就切換到 3rd table view，以此類推。反之，當我們在 2nd table view 的時候向右滑，就會回到 1st table view。

2.建立 collection view controller

建立一個 collection view controller，此範例命名為 TitleCollectionViewController，並在 Attributes 屬性頁面中設定 Scroll Direction 為 Horizontal

除此之外，這個 collection view controller 也是我們進入 App 後的第一個 controller

PS:細節我都跳過

3.建立 table view controller

我們分別建立四個 table view controller，並分別給予 Storyboard ID:
FirstTableViewController
SecondTableViewController
ThirdTableViewController
FourthTableViewController

4.在 TitleCollectionViewController 中加入 scroll view，並把 table view 加入 scroll view 中

拖曳一個 scroll view 元件進來，並在 Attributes 屬性頁面中設定 Scrolling >> Paging Enabled 打勾。這個打勾之後 scroll view 在滑動的時候，會以螢幕大小為單位去滑動。
也要記得把 scroll view 的代理權交給 TitleCollectionViewController！！這步很重要！！這步很重要！！這步很重要！！

接著在 viewDidLoad中，初始化四個 table view

        let mainStoryboard = UIStoryboard(name: "Main", bundle: nil)
        let firstViewController =  mainStoryboard.instantiateViewController(withIdentifier: "FirstTableViewController") as! FirstTableViewController
        let secondViewController = mainStoryboard.instantiateViewController(withIdentifier:  "SecondTableViewController") as! SecondTableViewController
        
        let thirdViewController = mainStoryboard.instantiateViewController(withIdentifier:  "ThirdTableViewController") as! ThirdTableViewController
        
        let fourthViewController = mainStoryboard.instantiateViewController(withIdentifier:  "FourthTableViewController") as! FourthTableViewController
        

設定各 table view 在 scroll view 中的原點位置
PS: 第一個 table view 本身就預設位置在 (0,0)，這邊就不設定了

    secondViewController.view.frame.origin.x = self.view.frame.width
    secondViewController.view.frame.origin.y = 0
    
    thirdViewController.view.frame.origin.x = self.view.frame.width * 2
    thirdViewController.view.frame.origin.y = 0
    
    fourthViewController.view.frame.origin.x = self.view.frame.width * 3
    fourthViewController.view.frame.origin.y = 0

加入畫面，並設定 scroll view 大小
scroll view 的寬度就由 menu(決定幾個table view) 的數量乘上螢幕寬度

        self.showScrollView.addSubview(firstViewController.view)
        firstViewController.didMove(toParentViewController: self)
        
        self.addChildViewController(secondViewController)
        self.showScrollView.addSubview(secondViewController.view)
        secondViewController.didMove(toParentViewController: self)
        
        self.addChildViewController(thirdViewController)
        self.showScrollView.addSubview(thirdViewController.view)
        thirdViewController.didMove(toParentViewController: self)

        self.addChildViewController(fourthViewController)
        self.showScrollView.addSubview(fourthViewController.view)
        fourthViewController.didMove(toParentViewController: self)
        
        showScrollView.contentSize = CGSize(width: self.view.frame.width * CGFloat(menuList.count),
                                          height: self.view.frame.height)

5. 呼叫 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView)

這個方法是用 scroll view 滑動停止後會自動調用的方法，如果沒反應，可能是 scroll view 的代理沒設好，記得要檢查檢查！！

我們在這裡加入判斷式來判斷 scroll view 的 x 軸位移量，來確認目前切換到哪個 table view 了

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        // 判斷目前切換頁面，注意要取商數 (round 的方法) 
        let pageNum = Int(round(showScrollView.contentOffset.x / showScrollView.frame.size.width))
        
        //把所有 collection view item 全部都取消選擇
        for i in 0...menuList.count-1 {
            collectionView(menuCollectionView, didDeselectItemAt: [0, i])
        }
        
        //對應目前頁面，選擇適當的 item
        switch pageNum {
        case 0 : 
            collectionView(menuCollectionView, didSelectItemAt: [0, 0])
        case 1 :
            collectionView(menuCollectionView, didSelectItemAt: [0, 1])
        case 2 :
            collectionView(menuCollectionView, didSelectItemAt: [0, 2])
        case 3 :
            collectionView(menuCollectionView, didSelectItemAt: [0, 3])
        default:
            print("unknow location")
            return
        }
}

6. collection view item 顏色變換

變換的方法是寫在
collectionView (didSelectItemAt: IndexPath)
collectionView (didDeselectItemAt: IndexPath)
裡面。
大家請參考昨天的文章Day27 - 更改被點選儲存格的顏色