将 UITextView 和 UIImageView 添加到 UIStackView答案

【问题标题】：Adding UITextView and UIImageView to UIStackView将 UITextView 和 UIImageView 添加到 UIStackView
【发布时间】：2020-11-12 23:59:33
【问题描述】：

所以，我在我的 stackView 中添加了一些文本 (UITextView) 并居中于顶部。我还添加了一个 UIImageView，它可以很好地位于我的 UITextView 下。好吧，它没有。由于某种原因，图像完全覆盖了文本。如果我删除图像，文本会在顶部中心很好地恢复。在堆栈分布和对齐方面玩了很多，但没有运气。不知道我错过了什么:(。感谢任何帮助！

我将 UITextView 和 UIIMageView 都添加到了栈中。

这是我的代码：

//stack
let stack: UIStackView = {
        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.spacing = 5
        stack.distribution = .fillProportionally
        stack.alignment = .fill

       return stack
    }()

//text
    fileprivate let title: UITextView = {
        let title = UITextView()
        title.translatesAutoresizingMaskIntoConstraints = false
        title.contentMode = .scaleAspectFit
        title.layer.cornerRadius = 10
        title.backgroundColor = .darkGray
        title.font = UIFont(name: "Megrim-Regular", size: 17)
        title.textColor = .white
        title.textAlignment = .center
        
        return title
    }()

//image
    let image: UIImageView = {
        let image = UIImageView()
        image.image = UIImage(named: "demoPic.jpg")
        image.translatesAutoresizingMaskIntoConstraints = false
        image.frame = CGRect(x: 0, y: 0, width: 50, height: 50)

        return image
    }()

【问题讨论】：

标签： ios swift iphone user-interface stackview

【解决方案1】：

希望以下内容对您有所帮助，

我认为您的问题与应用于堆栈视图和持有者视图的约束有关。（见下文）

您的 UI 元素（TextView 和图像）代码似乎没问题（在此特定堆栈视图配置中，图像可能不适用于 50 宽/50 高。这将需要 IMO 不同的方法。

尽管如此，为了在我的操场上看到它，我只是对我的容器视图应用了 2 个约束，以便根据需要查看您的 TextView 远高于您的 ImageView。

这是我用来重现您的问题的游乐场，您可以复制并粘贴它，看看它是否符合您的要求。

import UIKit
import PlaygroundSupport

/// DEMO VIEW CLASS 
final class DemoView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
    }
    
    required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented")
    }
}

// YOUR UI CODE
//stack
let stack: UIStackView = {
    let stack = UIStackView()
    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.axis = .vertical
    stack.spacing = 5
    stack.distribution = .fillProportionally
    stack.alignment = .fill
    
    return stack
}()

//text
fileprivate let title: UITextView = {
    let title = UITextView()
    title.translatesAutoresizingMaskIntoConstraints = false
    title.contentMode = .scaleAspectFit
    title.layer.cornerRadius = 10
    title.backgroundColor = .darkGray
    title.font = UIFont(name: "Megrim-Regular", size: 17)
    title.text = "TextView"
    title.textColor = .white
    title.textAlignment = .center
    
    return title
}()

//image
let image: UIImageView = {
    let image = UIImageView()
    image.backgroundColor = .red
    image.translatesAutoresizingMaskIntoConstraints = false
    image.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
    return image
}()


// PLAYGROUND DEMO VIEW TO HOLD YOUR STACK VIEW
let demoView = DemoView(frame: CGRect(x: 0, y: 0, width: 350, height: 150))

stack.addArrangedSubview(title)
stack.addArrangedSubview(image)
demoView.addSubview(stack)

demoView.addConstraints(
    NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[stackView]-0-|",
                                   options: NSLayoutConstraint.FormatOptions(rawValue: 0),
                                   metrics: nil,
                                   views: ["stackView": stack])
)

demoView.addConstraints(
    NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[stackView]-0-|",
                                   options: NSLayoutConstraint.FormatOptions(rawValue: 0),
                                   metrics: nil,
                                   views: ["stackView": stack])
)

PlaygroundPage.current.liveView = demoView

结果：您的文本视图位于图像中心上方（ImageView 此处只有红色背景）。

【讨论】：