Adding UITextView and UIImageView to UIStackView

Question

So, I added some text (UITextView) to my stackView and centered to the top. I also added a UIImageView which would sit nicely under my UITextView. Well it doesn't. For some reason the image covers the text completely. If I delete the image the text comes back up nice on the top center. Played a lot with the stack distribution and alignment but no luck. Not sure what I'm missing :(. Any help is appreciated!

I'm adding both the UITextView and UIIMageView as arrangedSubview to the stack.

Here is my 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.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
    }()

score 0 · Answer 1 · answered Nov 13 '20 at 00:40

Hope this below may help,

I think your issue is relating to constraints applied to the stackview and the holder view. (See below)

Your UI Elements (TextView & Image) code seems to be fine (maybe the image will not be work with 50 width /50 height inside this particular stack view configuration. It will require a different approach IMO.

Nevertheless on my playground in order to see it, I just applied 2 constraints towards my container view in order to see your TextView well above your ImageView as you wanted.

Here is the playground I used to reproduce your issue, you can copy and paste it to see if it fits what you request.

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

Results: Your Text View is above the image center (ImageView just have a RED Background here).

Adding UITextView and UIImageView to UIStackView

1 Answers1