CODEWITHSUNDEEP
iosswiftuiscrollviewuistackview
Yurii Petrov
Yurii Petrov

Reputation: 341

stackView in the center scrollView

I want stackView will be in the center scrollView. Items of stackView can be equals 2 items or 15 items. But the elements always should be in the center.

For example, if we have only one element it locates in center screen. If we have 10 items and stackView larger than a mobile screen we can scroll ScrollView and see all elements.

my project

Look upon my screenshots, I hope it helps to understand that I try doing.

Upvotes: 2

Views: 1137

Answers (2)

Yurii Petrov
Yurii Petrov

Reputation: 341

This code work for me fine.

import UIKit

class ViewController: UIViewController {

    //MARK - Properties
    let countImages: CGFloat = 21
    let widthImage: CGFloat = 40
    let spacingImage: CGFloat = 10.0
    let scrollViewHeigh: CGFloat = 48.0
    let stackViewHeigh: CGFloat = 28.0

    //MARK - ViewController Life cycle
    override func viewDidLoad() {
        super.viewDidLoad()

        prepareUIView()

    }

    //MARK - Methods
    func prepareUIView() {

        //Stack View
        let stackView = UIStackView()
        stackView.axis = UILayoutConstraintAxis.horizontal
        stackView.distribution  = UIStackViewDistribution.equalSpacing
        stackView.alignment = UIStackViewAlignment.center
        stackView.spacing = spacingImage

        //set images to stack view
        let imageViews = getImageView()
        imageViews.forEach {
            stackView.addArrangedSubview($0)
        }

        //scroll View
        let scrollView = UIScrollView()
        scrollView.showsVerticalScrollIndicator = false
        scrollView.showsHorizontalScrollIndicator = false

        scrollView.addSubview(stackView)
        view.addSubview(scrollView)

        scrollView.backgroundColor = UIColor.lightGray

        //Constraints
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
        scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollView.heightAnchor.constraint(equalToConstant: scrollViewHeigh).isActive = true

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0).isActive = true
        stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        stackView.heightAnchor.constraint(equalToConstant: stackViewHeigh).isActive = true

        let allImagesWidth = countImages * widthImage
        let allSpacingWidth = (countImages - 1) * spacingImage

        let screenWidth = UIScreen.main.bounds.width
        let stackWidth = allImagesWidth + allSpacingWidth

        let halfScreenWidth = screenWidth * 0.5
        let halfStackWidth = stackWidth * 0.5

        let leadingStackViewConstant = halfScreenWidth - halfStackWidth

        scrollView.contentInset = UIEdgeInsets(top: 0, left: leadingStackViewConstant, bottom: 0, right: 0)

    }

    private func getImageView() -> [UIImageView] {

        var imageViews = [UIImageView]()

        for _ in 0..<Int(countImages) {
            let imageView = UIImageView()
            imageView.image = #imageLiteral(resourceName: "mastercardIcon")
            imageViews.append(imageView)
        }

        return imageViews

    }

}

Upvotes: 0

Iraniya Naynesh
Iraniya Naynesh

Reputation: 1165

In case you are going with the UICollectionView as @Jack said then you can use below approach Calculate the number of cell and screen width based on that set left values for UIEdgeInsets 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let leftPadding: CGFloat = collectionView.bounds.width/2 - 20 // image width/2 = 20 in your case
    return UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
}

Upvotes: 1

Related Questions