Swift 如何将 UIStackView 放置在 ImageView 的特定角落

Posted 2023-03-10

【中文标题】Swift 如何将 UIStackView 放置在 ImageView 的特定角落

【英文标题】：Swift How to Place UIStackView in a Specific Corner of ImageView

【发布时间】：2020-08-03 21:17:57

【问题描述】：

所以基本上我有一个 ImageView 和一个 HorizontalStackView (the one circled in red) 。用户单击按钮后，我试图在图片的右上角覆盖 stackview 布局。不用说，我无法控制 ImageView 中加载的图片，因为它是从互联网上获取的。我在 Apple 文档上读到 .contentMode 会得到我正在寻找的结果。因此，这是我的代码示例

 case .UpRight:
        repostLayout.contentMode = .topRight
        imageView.addSubview(repostLayout)

正如您所料，运行应用程序时没有任何变化。有人可以指出正确的方向，我将如何完成它？

提前谢谢...

【参考方案1】：

如果我理解您想要实现的目标，为什么不让包装 UIView 同时包含图像和 stackView 作为子视图，并简单地将图像限制在视图的尺寸范围内，并将 stackview 限制在右上角？

举个例子：

class MyViewController: UIViewController 
    let wrapperView: UIView = 
        let view = UIView()
        view.backgroundColor = .clear
        return view
    ()
    
    //Your existing stack
    private let stackView: UIStackView = 
        let stack = UIStackView()
        stack.axis = .horizontal
        return stack
    ()
    
    //Your existing imageView
    private let imageView: UIImageView = UIImageView()
    
    override func viewDidLoad() 
        super.viewDidLoad()
        
        
        //Shouldn't necessarily be in viewDidLoad, but just for example:
        view.addSubview(wrapperView)
        //Set wrapperView's constraints to where the image currently is
        
        imageView.translatesAutoresizingMaskIntoConstraints = false
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        wrapperView.addSubview(imageView)
        wrapperView.addSubview(stackView)
        imageView
            .topAnchor
            .constraint(equalTo: wrapperView.topAnchor)
            .isActive = true
        imageView
            .bottomAnchor
            .constraint(equalTo: wrapperView.bottomAnchor)
            .isActive = true
        imageView
            .leadingAnchor
            .constraint(equalTo: wrapperView.leadingAnchor)
            .isActive = true
        imageView
            .trailingAnchor
            .constraint(equalTo: wrapperView.trailingAnchor)
            .isActive = true
        
        stackView
            .topAnchor
            .constraint(equalTo: wrapperView.topAnchor)
            .isActive = true
        stackView
            .trailingAnchor
            .constraint(equalTo: wrapperView.trailingAnchor)
            .isActive = true
        
        //Make sure your stack view is not too wide or too tall for the wrapper
        //Either by using constraints or by any other method.
    

同样可以通过故事板轻松实现。如果您遇到困难，我会为情节提要发布相同的内容。