Question

我希望stackView位于中心scrollView。 stackView的项目可以等于2项或15项。但是元素应始终位于中心。

例如，如果我们只有一个元素，则它位于中心屏幕中。如果我们有10个项目并且比移动屏幕大stackView，则可以滚动ScrollView并查看所有元素。

看看我的屏幕截图，希望对我尝试做的工作有所帮助。

Answer 1

如果您要使用@Jack所说的UICollectionView，则可以使用以下方法根据为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)
}

Answer 2

此代码对我来说很好。

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

    }

}

中间的stackView scrollView

2 个答案: