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

Question

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

我现在有一个 UIButton 子类，它在整个应用程序中无处不在。因为它只是一个子类(而不是 .xib 中的自定义类)，所以我不确定如何更新它以满足我的需要。

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

通常我会将按钮约束到superview.bottom，并在按钮的.xib 中将内容(titleLabel、buttonImage 等)约束到safearea。底部。

既然这在这里是不可能的，我该怎么做呢？

我尝试在 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。

应用适当的布局约束以获得理想的 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 中

方法 2:

您可以通过使用按钮的 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
    }
}