ios - 如何以编程方式为 en 和 ar 语言环境布局带有文本的 UIImageView？

Question

我正在尝试使用标签对 ImageView 进行布局。我得到了在英语语言环境中工作的布局，但它给出了以下约束错误。它无法在阿拉伯语模式下呈现，其中 UIImageView 未将其位置切换到右侧。

英文语言环境的屏幕截图。

2019-05-28 17:32:09.889997+0530 App[33841:7264068] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x60000039c640 h=--& v=--& UIImageView:0x7fab2cf7c3c0.midX == 38   (active)>",
    "<NSLayoutConstraint:0x6000003a63f0 UIImageView:0x7fab2cf7c3c0.width == 38   (active)>",
    "<NSLayoutConstraint:0x6000003a6350 H:|-(0)-[UIImageView:0x7fab2cf7c3c0]   (active, names: '|':UIView:0x7fab2cf73120 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000003a63f0 UIImageView:0x7fab2cf7c3c0.width == 38   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

// UI.swift
static func imageView(_ imageName: String) -> UIImageView {
    let iv = UIImageView(image: UIImage(named: imageName))
    iv.translatesAutoresizingMaskIntoConstraints = true
    iv.clipsToBounds = true
    return iv
}

// ProfileViewController.swift
lazy var profileImageView: UIImageView = {
    let iv = UI.imageView("profile-placeholder")
    return iv
}()
lazy var welcomeLbl: UILabel = {
    let lbl = UI.label(text: UI.lmsg("Welcome"))
    lbl.font = UIFont(name: "Roboto", size: 16)
    return lbl
}()
lazy var nameLbl: UILabel = {
    let lbl = UI.label(text: "username placeholder")
    lbl.font = UIFont(name: "Roboto-Bold", size: 16)
    return lbl
}()
lazy var profileHeaderView: UIView = {
    let v = UI.view()
    v.translatesAutoresizingMaskIntoConstraints = false
    let lblView = UI.view()
    lblView.translatesAutoresizingMaskIntoConstraints = false
    lblView.addSubview(welcomeLbl)
    lblView.addSubview(nameLbl)
    lblView.layer.borderColor = UIColor.red.cgColor
    lblView.layer.borderWidth = 1.0
    // label view
    NSLayoutConstraint.activate([
        welcomeLbl.topAnchor.constraint(equalTo: lblView.topAnchor, constant: 0),
        welcomeLbl.leadingAnchor.constraint(equalTo: lblView.leadingAnchor, constant: 0),
        welcomeLbl.trailingAnchor.constraint(equalTo: lblView.trailingAnchor, constant: 0),
        welcomeLbl.bottomAnchor.constraint(equalTo: nameLbl.topAnchor, constant: -8)
    ])
    NSLayoutConstraint.activate([
        nameLbl.topAnchor.constraint(equalTo: welcomeLbl.bottomAnchor, constant: 8),
        nameLbl.leadingAnchor.constraint(equalTo: lblView.leadingAnchor, constant: 0),
        nameLbl.trailingAnchor.constraint(equalTo: lblView.trailingAnchor, constant: 0),
        nameLbl.bottomAnchor.constraint(equalTo: lblView.bottomAnchor, constant: 0)
    ])
    v.addSubview(profileImageView)
    v.addSubview(lblView)
    NSLayoutConstraint.activate([
        profileImageView.centerYAnchor.constraint(equalTo: v.centerYAnchor, constant: 0),
        profileImageView.leadingAnchor.constraint(equalTo: v.leadingAnchor, constant: 0),
        profileImageView.trailingAnchor.constraint(equalTo: lblView.leadingAnchor, constant: -8),
        profileImageView.widthAnchor.constraint(equalToConstant: 38)
    ])
    NSLayoutConstraint.activate([
        lblView.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor, constant: 0),
        lblView.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
        lblView.trailingAnchor.constraint(equalTo: v.trailingAnchor, constant: -8)
    ])
    v.layer.borderColor = #colorLiteral(red: 0.2745098174, green: 0.4862745106, blue: 0.1411764771, alpha: 1)
    v.layer.borderWidth = 1.0
    return v
}()

然后我将 profileHeaderView 添加到 stackView 中。如何解决这个问题？

Answer 1

在这里使用嵌套的 UIStackView 会更容易，这样约束就不成问题了。你想要的是像

.____________________________.
|.________. ._______________.|
||        | |._____________.||
||        | ||Welcome      |||
||        | |'-------------'||
||        | |._____________.||
||        | ||username     |||
||        | |'-------------'||
|'--------' '---------------'|
'----------------------------'

标签位于垂直 UIStackView 中，然后堆栈 View 和图像位于水平 View 中。

在运行时，当用户切换到从右到左的语言环境时，移除图像并将其重新插入到外部堆栈 View 的末尾。切换回从左到右时执行相反的操作。

这里唯一需要的约束是图像的尺寸和最外层堆栈 View 相对于其父级的位置。堆栈 View 的 spacing 和 alignment 属性取代了嵌套项的约束。