Блог

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

Я добавляю как UITextView, так и UIImageView как arrangedSubview в стек.

Вот мой код:

 //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
    }()
  

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

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

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