UIButton 子类，填充 SafeArea，插入内容

Question

在 .xib/.storyboard.

中使用自定义 UI 元素时，我掌握了使用安全区域的窍门

我现在有一个 UIButton subclass 在整个应用程序中随处使用的情况。因为它只是一个 subclass（而不是 .xib 中的自定义 class），所以我不确定如何更新它以满足我的需要。

见下图：这里黄色的是 UI 按钮。在 'regular' iPhone 上，此黄色位于屏幕底部。我想要实现的是让按钮一直到达安全区域的底部，同时仍处于相同位置（安全区域上方）。

通常我会将按钮限制为 superview.bottom，而在按钮的 .xib 中将内容（titleLabel、buttonImage 等）限制为 safearea.bottom。

既然这里不可能，我该怎么做？

我尝试在 UI 按钮子 class 中以编程方式添加约束，但没有用。

示例：

if #available(iOS 11.0, *) {
    NSLayoutConstraint.activate([
        (titleLabel?.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor))!,
        (titleLabel?.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor))!
        ])
} else {
    // Fallback on earlier versions
}

提前致谢！

Answer 1

您可以使用以下方法，

创建 UIView.
在上面创建的 view 中添加一个 UILabel 作为 subView。
在上面创建的 view 中添加一个 UIButton 作为 subView。

应用适当的 layout constraints 以获得理想的 UI。

func addSaveButton() {
    let height: CGFloat = 60 + self.view.safeAreaInsets.bottom //Height based on safe area

    //Custom View
    let customView = UIView(frame: CGRect.init(x: 0, y: self.view.bounds.height - height, width: self.view.bounds.width, height: height))
    customView.backgroundColor = #colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)

    //Save Label
    let label = UILabel()
    label.text = "Save"
    label.textColor = UIColor.black

    //Button
    let button = UIButton(frame: customView.bounds)
    button.addTarget(self, action: #selector(onTapSaveButton), for: .touchUpInside)

    //Add label, button as subview in customView
    customView.addSubview(label)
    customView.addSubview(button)
    self.view.addSubview(customView)

    customView.translatesAutoresizingMaskIntoConstraints = false
    label.translatesAutoresizingMaskIntoConstraints = false
    button.translatesAutoresizingMaskIntoConstraints = false

    //Add constraints
    NSLayoutConstraint.activate([
        self.view.leadingAnchor.constraint(equalTo: customView.leadingAnchor),
        customView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        customView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        customView.heightAnchor.constraint(equalToConstant: height),

        label.topAnchor.constraint(equalTo: customView.topAnchor, constant: 10),
        label.trailingAnchor.constraint(equalTo: customView.trailingAnchor, constant: -10),

        button.topAnchor.constraint(equalTo: customView.topAnchor),
        button.leadingAnchor.constraint(equalTo: customView.leadingAnchor),
        button.trailingAnchor.constraint(equalTo: customView.trailingAnchor),
        button.bottomAnchor.constraint(equalTo: customView.bottomAnchor)
        ])

}

@objc func onTapSaveButton() {
    print("Save button pressed")
}

在iPhone-X

在iPhone-8

方法二：

您可以通过使用 button's titleEdgeInsets.

来遵循更简单的方法

func addSaveButton() {
    let height: CGFloat = 60 + self.view.safeAreaInsets.bottom

    //Button
    let button = UIButton(frame: CGRect.init(x: 0, y: UIScreen.main.bounds.height - height, width: UIScreen.main.bounds.width, height: height))
    button.setTitle("Save", for: .normal)
    button.backgroundColor = #colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)
    button.contentHorizontalAlignment = .right
    button.contentVerticalAlignment = .top
    button.titleEdgeInsets.top = 10
    button.titleEdgeInsets.right = 10
    button.addTarget(self, action: #selector(onTapSaveButton), for: .touchUpInside)

    self.view.addSubview(button)
    button.translatesAutoresizingMaskIntoConstraints = false

    //Add constraints
    NSLayoutConstraint.activate([
        self.view.leadingAnchor.constraint(equalTo: button.leadingAnchor),
        button.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        button.heightAnchor.constraint(equalToConstant: height)
        ])
}

您可以在 storyboard/subclassing 中轻松地做同样的事情。我觉得这个比上一个好

方法三：

子类 UIButton 并使用它以编程方式创建您的按钮。

class CustomButton: UIButton {
    override func draw(_ rect: CGRect) {
        self.contentHorizontalAlignment = .right
        self.contentVerticalAlignment = .top
        self.titleEdgeInsets.top = 10
        self.titleEdgeInsets.right = 10
    }
}

UIButton 子类，填充 SafeArea，插入内容

UIButton subclass, fill up SafeArea, inset content

ios

swift

safearealayoutguide