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

Question

在.xib/.storyboard 中使用自定义 UI 元素时，我已经掌握了使用安全区域的窍门。

我现在有一个 UIButton 子类在整个应用程序中随处使用的情况。由于它只是一个子类（而不是 .xib 中的自定义类），我不确定如何更新它以满足我的需求。

见下图： 这里的黄色是 UIButton。在“普通”iPhone 上，这个黄色是屏幕的底部。 我想要实现的是让按钮一直到安全区域的底部，同时仍然处于相同的位置（安全区域上方）。

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

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

我尝试在 UIButton 子类中以编程方式添加约束，但没有成功。

例子：

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

您可以使用以下方法，

1. 创建一个UIView。
2. 将UILabel 添加到上面创建的view 作为subView。
3. 将UIButton 添加到上面创建的view 作为subView。

应用适当的layout constraints 以获得理想的用户界面。

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 中

方法2：

您可以通过使用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 中做同样的事情。我觉得这个比上一个好。

方法 3：

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

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