Question

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

Answer 1

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

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

Answer 2

使用UIStackView 这将无效（据我所知UIStackView？！）。但是可以通过以下约束轻松实现：

将UIImageView的前沿，上边和后边设置为超视图。为UIImageView定义一些高度。

其次，将UILabel的前沿和后沿设置为UIImageView。确保UILabel和UIImageView共享相同的超级视图。

最后，将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.
    }


}

Answer 4

通过将标签作为子视图添加到图像视图中，我还能够在stackview中做到这一点。

        cell.avatarImage.leadingAnchor.constraint(equalTo: cell.cellBodyStackView.leadingAnchor, constant: 10).isActive = true
        cell.avatarImage.topAnchor.constraint(equalTo: cell.cellBodyStackView.topAnchor).isActive = true
        cell.avatarImage.bottomAnchor.constraint(equalTo: cell.cellBodyStackView.bottomAnchor).isActive = true
        cell.avatarImage.trailingAnchor.constraint(equalTo: cell.commentLabel.leadingAnchor, constant: -10).isActive = true
        cell.avatarImage.widthAnchor.constraint(lessThanOrEqualToConstant: cellWidth * 0.25).isActive = true

        cell.avatarImage.addSubview(cell.usernameLabel)
        cell.usernameLabel.trailingAnchor.constraint(equalTo: cell.avatarImage.trailingAnchor).isActive = true
        cell.usernameLabel.leadingAnchor.constraint(equalTo: cell.avatarImage.leadingAnchor).isActive = true
        cell.usernameLabel.bottomAnchor.constraint(equalTo: cell.avatarImage.bottomAnchor).isActive = true
        cell.usernameLabel.centerXAnchor.constraint(equalTo: cell.avatarImage.centerXAnchor).isActive = true
        cell.usernameLabel.textAlignment = .center
        cell.usernameLabel.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        cell.usernameLabel.textColor = UIColor.white

在StackView中的UIImage上添加UILabel

4 个答案: