Добавление UITextView и UIImageView в UIStackView

Итак, я добавил некоторый текст (UITextView) в свой stackView и отцентрировал его вверху. Я также добавил UIImageView, который прекрасно смотрелся бы под моим UITextView. Ну, это не так. Почему-то изображение полностью закрывает текст. Если я удалю изображение, текст снова появится в центре вверху. Много играл с распределением и выравниванием стека, но безуспешно. Не уверен, что мне не хватает :( Любая помощь приветствуется!

Я добавляю в стек как UITextView, так и UIIMageView как аранжированныйSubview.

Вот мой код:

//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
person Jadiel Alfonso    schedule 12.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Надеюсь, что это ниже может помочь,

Я думаю, что ваша проблема относится к ограничениям, применяемым к представлению стека и представлению держателя. (см. ниже)

Ваш код элементов пользовательского интерфейса (TextView & Image) выглядит нормально (возможно, изображение не будет работать с шириной 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 здесь просто имеет КРАСНЫЙ фон).

Демонстрационная площадка

person Mohamed.A.A    schedule 13.11.2020