Question

所以我正在观看来自WWDC 2015的视频，其中主持人展示了一个桌面视图，底部有一个固定的条形图，并且在其中放置了一个进度条和一些标签。该视频是关于按需资源的，因此他没有详细介绍该栏的实施方式。但我真的很感兴趣它是如何实施的：

视图的控制器是UITableViewController的子类，因此该控制器的根视图必须是表视图。据我所知，没有简洁的方法来修复表视图中的一些UI视图。

它看起来不像导航控制器中的工具栏，因为标签位于中心，进度条横跨整个栏。我想你只能把离散的按钮放在工具栏里面？也许情况并非如此，但从表视图控制器的大小来看，似乎他没有编写太多代码来实现它。

我想知道这个底栏是如何实现的？你可以看到它at this moment of the video。

（我想知道在这里粘贴WWDC视频截图是否合法？）

Answer 1

实际上，它看起来很像是使用导航控制器提供的工具栏。

您可以向工具栏添加自定义视图，并且可以使用灵活空间项目居中项目。以下是如何做到这几行：

// In your tabble view controller subclass
override func viewDidLoad()
{
    super.viewDidLoad()

    // ...

    let label = UILabel(frame: CGRect(x: 0.0, y: 0.0, width: UIScreen.main.bounds.size.width, height: 44.0))
    label.textAlignment = .center
    label.text = "Hello world!"
    let toolBarItem = UIBarButtonItem(customView: label)
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    self.setToolbarItems([flexibleSpace, toolBarItem, flexibleSpace], animated: false)
    self.navigationController?.isToolbarHidden = false

    let progressView = UIProgressView(progressViewStyle: .bar)
    progressView.frame = CGRect(x: 0.0, y: 0.0, width: UIScreen.main.bounds.size.width, height: 2.0)
    progressView.trackTintColor = .lightGray
    progressView.progress = 0.5
    self.navigationController?.toolbar.addSubview(progressView)
}

Answer 2

所以我无法抗拒好奇心，我发了一封电子邮件给Tony Parker（演讲者）寻求帮助。他非常友好地向我发送了iTravel的源代码。现在我知道它是如何在故事板中实现的。

诀窍是你需要在控制器中创建一个停靠视图（即在场景停靠栏中放置常规UIView），将文本和进度条放入其中，然后使用自动布局进行布局。

然后在表视图控制器中，添加此方法：

override func viewWillAppear(_ animated: Bool) {
    self.navigationController?.setToolbarHidden(false, animated: animated)

    overallView?.translatesAutoresizingMaskIntoConstraints = false
    self.navigationController?.toolbar.addSubview(overallView!)

    self.navigationController?.toolbar.leadingAnchor.constraint(equalTo: (overallView?.leadingAnchor)!).isActive = true
    self.navigationController?.toolbar.trailingAnchor.constraint(equalTo: (overallView?.trailingAnchor)!).isActive = true
    self.navigationController?.toolbar.topAnchor.constraint(equalTo: (overallView?.topAnchor)!).isActive = true
    self.navigationController?.toolbar.bottomAnchor.constraint(equalTo: (overallView?.bottomAnchor)!).isActive = true

    super.viewWillAppear(animated)
}

其中overallView是停靠的UIView商店。

归功于iTravel应用程序的作者（很可能是Tony Parker）。

如何在UITableView上实现这个固定的底栏

2 个答案: