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

Question

我正在尝试使用标签对图像视图进行布局。我得到了在英语语言环境中工作的布局，但它给出了以下约束错误。它无法在阿拉伯语模式下呈现，其中 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
}()

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

Answer 1

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

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

标签是垂直的 UIStackView，然后堆栈视图和图像是水平的。

在运行时，当用户切换到 right-to-left 语言环境时，删除图像并将其重新插入到外部堆栈视图的 end 处。切换回 left-to-right.

时执行相反的操作

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

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

How to layout UIImageView with text right to it programatically for en and ar locale?

uiimageview

ios

nslayoutconstraint

swift