如何创建 Airbnb iOS App 探索标签？

Posted 2023-03-12

【中文标题】如何创建 Airbnb iOS App 探索标签？

【英文标题】：How to create Airbnb iOS App Explore tab?

【发布时间】：2017-03-20 09:23:17

【问题描述】：

---

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

现在我想添加这些页面选项卡（“为您”、“家”、“体验”和“地点”），并且对如何构建视图感到困惑。仅供参考，每个选项卡都是tableView。现在我没有页面标签的结构是：

UITabBarController UIViewController（包含UIView 标头，UITableView 内容）

我能想到的选项很少：

每个页面标签都是UITableViewDataSource，所以点击标签只是dataSource和reloadData()的变化 UIViewController 将包含一个 UIScrollView contentView，因此单击选项卡是 addSubView 到 contentView 和 addChildViewController 到控制器

根据我的研究，不推荐使用选项 #2，因为它将 tableView 放在滚动视图中。但是选项 #1 要求所有 tableView 具有相同的 cellID 才能出队？听起来是硬编码。请告诉我这种情况的最佳实践！谢谢。

【问题讨论】：

我会选择第一个选项，但尝试使用集合视图而不是 tableView

【参考方案1】：

如果您描述的话，您可能应该考虑使用 Container Views。通过这种方式，您将对所描述的每个案例有单独的视图。

给你的例子：

在故事板中：

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

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
            )
        
    

【讨论】：

谢谢！好吧，我也想到了这一点，但是如何链接标题上的动画？因为当我在 containerView 中滚动 tableView 时，标题应该扩大和缩小；这导致我的选项 #2 使用 UIScrollView

使用委托方法从容器视图中触发您的标题。

嗯，让我先试一试 :)

@program234 好吧，我的解决方案使用纯 UIView 作为标题，并且仍然能够让 tableView 反弹。你以前看过这个教程吗？ michiganlabs.com/ios/development/2016/05/31/… 希望对您有所帮助

@program234 我在这里上传了我的项目：github.com/yonasstephen/swift-of-airbnb，如果您有兴趣查看完整的实现