如何创建Airbnb iOS应用程序探索选项卡？

Question

​

​

我正在尝试创建一个类似Airbnb应用程序截图的提要页面。我从一个UITableViewController开始，并在滚动头上添加了动画；标题是绿松石颜色的区域。

现在，我想添加那些页面选项卡(“为您”、“家”、“体验”和“位置”)，并对如何构建我的视图感到困惑。每个选项卡都是一个tableView。现在，我没有页面选项卡的结构是：

1. UITabBarController
2. UIViewController (包含UIView标头、UITableView内容)

我想不出有几种选择：

1. 每个页面选项卡都是一个UITableViewDataSource，所以单击一个选项卡只是dataSource和reloadData()的一个变化。
2. UIViewController将包含一个UIScrollView contentView，因此单击选项卡是指向contentView的addSubView，单击控制器的是addChildViewController。

根据我的研究，不建议选择2，因为它将tableView放在scrollView中。但是选项1要求所有tableView都有相同的脱队列cellID？听起来很硬。请告诉我这个场景的最佳实践！谢谢。

Answer 1

您可能应该考虑使用容器视图，以便进行描述。通过这种方式，您将对所描述的每一种情况都有单独的视图。

给你的例子：

中的故事板：

​

​

听到的是转换视图的代码。

class ViewController: UIViewController {
    @IBOutlet weak var containerViewA: UIView!
    @IBOutlet weak var containerViewB: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func showComponent(_ sender: UISegmentedControl) {
        if sender.selectedSegmentIndex == 0 {
            UIView.animate(withDuration: 0.5, animations: {
                self.containerViewA.alpha = 1
                self.containerViewB.alpha = 0
            })
        } else {
            UIView.animate(withDuration: 0.5, animations: {
                self.containerViewA.alpha = 0
                self.containerViewB.alpha = 1
            })
        }
    }
}