Swift How to Place UIStackView in a Specific Corner of ImageView

Question

So basically I have an ImageView and a HorizontalStackView (the one circled in red) . I am trying to overlay the stackview layout in the TopRight Corner of the picture once the user has clicked on the button. Needless to say that I do not have control over the picture being loaded in ImageView since it is being fetched from the internet. I read on Apple doc that .contentMode will get the result I am looking. Thus, this is my code sample

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

As you can expect there is no change when running the app. Can someone point me in the right direction how I would be able to get it done?

Thanks in advance...

Answer 1

If I understood what you are trying to achieve, why not have a wrapping UIView contain both the image and stackView as subviews and simply constraint the image to the view's dimensions and the stackview to the top right corner?

So as an example:

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.
    }
}

The same can easily be achieved via Storyboards. If you get stuck i'll post the same for storyboards.