23 C
New York
Thursday, November 7, 2024

ios – How you can create similar stackviews?


I’ve a Xcode undertaking.I wish to create three similar views with with textual content and icon in my fundamental stackview. I take advantage of the arrays with textual content and pictures to load this knowledge in my stackviews. I take advantage of this code to do it:

let cellCount = 3

var textArray = ["some some text", "some some text", "some some text"]
var iconArray = [UIImage(named: "envelope"), UIImage(named: "envelope"), UIImage(named: "envelope")]

non-public lazy var menuStackView: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.spacing = 16
    stackView.distribution = .fillEqually
    stackView.translatesAutoresizingMaskIntoConstraints = false
    return stackView
}()
var cellStackView: UIStackView = {
    let cell = UIStackView()
    cell.axis = .horizontal
    cell.spacing = 32
    cell.distribution = .fill
    cell.translatesAutoresizingMaskIntoConstraints = false
    return cell
}()
var titleLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()
var imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

override func viewDidLoad() {
    tremendous.viewDidLoad()
    setupView()
    setupConstraints()
    setupMenu()
}

func setupView() {
    view.addSubview(menuStackView)
}

func setupConstraints() {
    menuStackView.topAnchor.constraint(equalTo: view.topAnchor, fixed: 0.0).isActive = true
    menuStackView.bottomAnchor.constraint(equalTo: view.bottomAnchor, fixed: 0.0).isActive = true
    menuStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, fixed: 0.0).isActive = true
    menuStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, fixed: 0.0).isActive = true
}

func setupMenu() {
    for index in 1...cellCount {
        cellStackView = UIStackView()
        cellStackView.tag = index
        cellStackView.backgroundColor = .white.withAlphaComponent(0.75)
        cellStackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        cellStackView.layer.borderColor = UIColor.white.cgColor
        cellStackView.layer.borderWidth = 4
        cellStackView.layer.cornerRadius = 24
        cellStackView.translatesAutoresizingMaskIntoConstraints = false
        menuStackView.addArrangedSubview(cellStackView)
        
        titleLabel = UILabel()
        titleLabel.backgroundColor = .crimson
        titleLabel.textAlignment = .left
        titleLabel.textColor = .white
        titleLabel.font = UIFont(identify: "Marker Felt", dimension: 22)
        titleLabel.layer.shadowColor = UIColor.black.cgColor
        titleLabel.layer.shadowOffset = CGSize.zero
        titleLabel.layer.shadowOpacity = 0.4
        titleLabel.layer.shadowRadius = 4
        cellStackView.addArrangedSubview(titleLabel)
        
        imageView = UIImageView()
        imageView.backgroundColor = .blue
        imageView.contentMode = .scaleAspectFit
        imageView.sizeToFit()
        imageView.layer.shadowColor = UIColor.black.withAlphaComponent(1.0).cgColor
        imageView.layer.shadowOffset = CGSize.zero
        imageView.layer.shadowOpacity = 0.2
        imageView.layer.shadowRadius = 3
        cellStackView.addArrangedSubview(imageView)
        
        imageView.widthAnchor.constraint(equalToConstant: 32).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: 32).isActive = true
        
        ///` Загрузка данных в ячейку:
        titleLabel.textual content = textArray[index-1]
        imageView.picture = iconArray[index-1]
        
        cellStackView.layoutMargins = UIEdgeInsets(high: 8, left: 16, backside: 8, proper: 16)
        cellStackView.isLayoutMarginsRelativeArrangement = true
    }
}

However I get this consequence. I present the end in a screenshot of the iPhone:

Screenshot

The primary cell is completely different. How you can repair this?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles