使用自动布局将图像和文本设置为按钮

Posted 2023-03-22

【中文标题】使用自动布局将图像和文本设置为按钮

【英文标题】：Setting Image and Text to Button with AutoLayout

【发布时间】：2018-10-11 16:06:15

【问题描述】：

我正在尝试以编程方式在文本右侧创建一个带有下拉箭头的按钮，如下所示：

我见过的解决方案使用了标题和图像插入，但是有没有办法以编程方式使用 autoLayout 设置这些？根据选择的选项，按钮中的文本可能会发生变化，并且文本长度会有所不同，所以我不确定标题和边缘插图是否适合。

【问题讨论】：

UIButton 在内部不以您可以访问的方式使用自动布局。您可以创建一个自定义的类似按钮的视图。

【参考方案1】：

这是一个 UIStackView 放置在主 VC 容器视图中的示例（在我的例子中，UIStackView 占用了 VC 内的所有可用空间）。在这种情况下，基本用户信息添加了电话号码。

我创建了一个电话号码容器视图 (UIView)，一个 UILabel 来包含电话号码。不。和一个UIImageView 作为下拉箭头。

let telNoContainerView: UIView = 
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
()
let telNoLabel: UILabel = 
    let view = UILabel()
    let font = UIFont.systemFont(ofSize: 15)
    view.font = font
    view.backgroundColor = UIColor.white
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
()
let telNoImageView: UIImageView = 
    let view = UIImageView()
    view.backgroundColor = UIColor.white
    view.tintColor = ACTION_COLOR
    view.image = UIImage(named: "Chevron")?.withRenderingMode(.alwaysTemplate)
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
()

在setBasicInfoViews() 中，只需将telNoContainerView 添加到UIStackView。然后将UILabel 和UIImageView 添加到包含视图telNoContainerView。之后根据需要添加约束。 您需要更改约束以适应您的 UI 设计。

fileprivate func setBasicInfoViews()
    infoStackView.addArrangedSubview(telNoContainerView)

    telNoContainerView.addSubview(telNoLabel)
    telNoContainerView.addSubview(telNoImageView)
    NSLayoutConstraint.activate([
        telNoLabel.topAnchor.constraint(equalTo: telNoContainerView.topAnchor, constant: 0.0),
        telNoLabel.bottomAnchor.constraint(equalTo: telNoContainerView.bottomAnchor, constant: 0.0),
        telNoLabel.leadingAnchor.constraint(equalTo: telNoContainerView.leadingAnchor, constant: 0.0),
        telNoLabel.trailingAnchor.constraint(equalTo: telNoContainerView.trailingAnchor, constant: 0.0)
        ])
    NSLayoutConstraint.activate([
        telNoImageView.centerYAnchor.constraint(equalTo: telNoLabel.centerYAnchor, constant: 0.0),
        telNoImageView.heightAnchor.constraint(equalToConstant: 30.0),
        telNoImageView.widthAnchor.constraint(equalToConstant: 30.0),
        telNoImageView.trailingAnchor.constraint(equalTo: telNoLabel.trailingAnchor, constant: 0.0)
        ])

【参考方案2】：

不，没有办法使用 AutoLayout 在 UIButton 上设置图像和标题布局属性。

如果您想要 UIButton 中的图像和标题的完全自定义布局，我建议创建 UIView 并使用 AutoLayout 添加 title 和 image 作为子视图，然后添加轻击手势识别器界面视图

buttonView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.buttonAction)))