在StackView中的UIImage上添加UILabel

Question

我的故事板的部分看起来像第一张照片。在第二张照片上我提出了约束。我想要实现的是将UILabel放在UIImageView的底部（带有照片“DJI_0049”）。

Answer 1

您不能在堆栈视图中重叠这样的视图。

您最好的选择是使用常规自动布局约束来布局其中一个视图（可能是图像），然后使用堆栈视图或约束来布置您想要的视图。

Answer 2

使用UIStackView这不起作用（因为我知道UIStackView？！）。但是可以通过以下约束轻松实现：

设置从UIImageView到他的超级视图的前沿，上边缘和后边缘。为UIImageView定义一些高度。

其次，设置从UILabel到UIImageView的前沿和后沿。确保UILabel和UIImageView共享相同的superview。

最后，将UILabel的底部设置为UIImageView的底部。

Answer 3

将标签添加到与UIStackView相同的视图中，以便它们是兄弟/相邻视图。将imageView添加到stackView，然后将标签约束到imageView。

因为他们是兄弟姐妹，所以会奏效。请注意，标签不能是stackView的排列子视图。否则将导致破坏的约束。

例：

//
//  ViewController.swift
//  TestSO
//
//  Created by Brandon on 2018-02-28.
//  Copyright © 2018 XIO. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let label = UILabel()
        let imageView = UIImageView()
        let otherView = UIView()
        let otherView2 = UIView()

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fill

        self.view.addSubview(stackView)
        self.view.addSubview(label)
        stackView.addArrangedSubview(imageView)
        stackView.addArrangedSubview(otherView)
        stackView.addArrangedSubview(otherView2)


        label.text = "Hello World"
        label.textColor = UIColor.white
        imageView.backgroundColor = UIColor.purple
        otherView.backgroundColor = UIColor.red
        otherView2.backgroundColor = UIColor.blue

        stackView.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            stackView.leftAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor),
            stackView.rightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor),
            stackView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
        ])

        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: imageView.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: imageView.centerYAnchor),
            label.leftAnchor.constraint(greaterThanOrEqualTo: imageView.leftAnchor),
            label.rightAnchor.constraint(lessThanOrEqualTo: imageView.rightAnchor),
            label.topAnchor.constraint(greaterThanOrEqualTo: imageView.topAnchor),
            label.bottomAnchor.constraint(lessThanOrEqualTo: imageView.bottomAnchor)
        ])


        NSLayoutConstraint.activate([
            imageView.heightAnchor.constraint(equalToConstant: 100.0),
            otherView.heightAnchor.constraint(equalToConstant: 100.0),
            otherView2.heightAnchor.constraint(equalToConstant: 100.0)
        ])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}