UIPickerView 放置在视图顶部答案

【问题标题】：UIPickerView placement on top of viewUIPickerView 放置在视图顶部
【发布时间】：2019-01-24 05:02:08
【问题描述】：

当单击按钮时，我试图在我的 TableView 顶部放置一个 UIPickerView。我尝试使用情节提要，但它将表格的行向下移动。我想要的是选择器在单击按钮时显示为弹出框，然后在选择选项时消失。

这是我用来显示选择器的代码：

let picker = UIPickerView()

let container = UILayoutGuide()
view.addLayoutGuide(container)

picker.backgroundColor = UIColor.white
picker.dataSource = self
picker.delegate = self
view.addSubview(picker)
picker.leadingAnchor.constraint(equalTo: container.leadingAnchor).isActive = true
picker.trailingAnchor.constraint(equalTo: container.trailingAnchor).isActive = true
picker.topAnchor.constraint(equalTo: container.topAnchor).isActive = true
picker.heightAnchor.constraint(equalToConstant: 100).isActive = true
picker.setContentHuggingPriority(UILayoutPriority.required, for: .horizontal)

但是，选择器显示如下：

我不明白为什么选择器视图没有拉伸到最后，因为我将trailingAnchor 设置为父视图的trailingAnchor。

【问题讨论】：

你为什么不直接给视图约束。而不是 UILayoutGuide ？ .如果您使用的是 UILayoutGuide，那么它可以不受任何限制地工作（我不知道 UILayoutGuide）？

标签： ios swift constraints

【解决方案1】：

您是否将选择器视图的translatesAutoresizingMaskIntoConstraints 设置为false？除非你这样做，否则它会忽略约束

【讨论】：

这应该是评论而不是答案。
但它不在示例代码中。我问是否将其设置在其他地方。如果不是，这就是约束什么都不做的原因。看不出为什么这应该是一个评论，因为它确切地说明了为什么示例代码不起作用，尽管它可能是一个问题的形式。

【解决方案2】：

如果 尾随锚 不起作用，则尝试将 left、top 和 right 设置为 0 并 同时提供高度（如果您不想覆盖完整的 tableView) 。

另外，将您的 pickerView 添加到您的 tableView 顶部要应用的约束

如果您希望以编程方式进行，您可以在创建 UIPickerView 对象时提供约束

let pickerView = UIPickerView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50))

【讨论】：

如何在表格视图的顶部添加选择器视图？而不是下推表格行？
tableView.addSubView(pickerView)
我的意思是在 IB。

【解决方案3】：

您可以直接将表格视图用作相对视图，而不是布局指南。

编码示例：

    func addPickerView() {
        let picker = UIPickerView()

//        let container = UILayoutGuide()
//        view.addLayoutGuide(container)

        picker.translatesAutoresizingMaskIntoConstraints = false

        picker.backgroundColor = UIColor.red
        picker.dataSource = self
        picker.delegate = self
        view.addSubview(picker)
        picker.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        picker.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        picker.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        picker.heightAnchor.constraint(equalToConstant: 100).isActive = true
        picker.setContentHuggingPriority(UILayoutPriority.required, for: .horizontal)

    }

以上代码产生以下输出，该输出被拉伸到其父视图。

【讨论】：

我将普通视图保持为相对状态，以限制选取器视图。它显示选择器视图正在延伸到其父级前导和尾随。

【解决方案4】：

将约束设置为等于父视图然后显示完美。

let topBarHeight = UIApplication.shared.statusBarFrame.size.height +
        (self.navigationController?.navigationBar.frame.height ?? 0.0)
let picker = UIPickerView()
picker.translatesAutoresizingMaskIntoConstraints = false
let container = UILayoutGuide()
view.addLayoutGuide(container)

picker.backgroundColor = UIColor.lightGray
picker.dataSource = self
picker.delegate = self
view.addSubview(picker)
picker.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
picker.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
picker.topAnchor.constraint(equalTo: view.topAnchor, constant: topBarHeight).isActive = true
picker.heightAnchor.constraint(equalToConstant: 200).isActive = true
picker.setContentHuggingPriority(UILayoutPriority.required, for: .horizontal)

【讨论】：

【解决方案5】：

我在 Interface Builder 本身中找到了最好的方法。我必须将 TableViewController 更改为 ViewController 并将 TableView 放入其中（将 ViewController 设置为 TableViewDelegate 和 TableViewDataSource）。这允许我将 PickerView 放置在 IB 上，作为表格单元格顶部的分层视图。然后我可以通过为它创建一个 IBOutlet 并适当地设置 .isHidden 属性来隐藏和显示它。

更多信息在这里：Swift: TableView in ViewController

【讨论】：