在 UIScrollView 中居中 UIButtons

Posted 2023-03-15

【中文标题】在 UIScrollView 中居中 UIButtons

【英文标题】：Center UIButtons in UIScrollView

【发布时间】：2015-10-21 07:53:53

【问题描述】：

我正在尝试在水平滚动UIScrollView 中添加一些按钮。目前我在UIScrollView 中定位按钮时遇到了一些问题。

我想达到如下效果：

按钮应该在 UIScrollView 中居中对齐 如果按钮超出 UIScrollView 框架，则 UIScrollView 应该可以水平滚动 在纵向和横向模式下，按钮的位置都必须正确

这是我目前拥有的：

我想我最好的选择是将 AutoLayout 添加到按钮中。对我有什么线索吗？

这是我与此问题相关的代码：

   class SeasonNavigatorScrollView: UIScrollView 
    private let kButtonSize:CGFloat = 50.0
    private let kSpacing:CGFloat = 10.0
    private var buttons:[UIButton] = []
    var seasonNavigatorDelegate:SeasonNavigatorDelegate?

    func setup(count:Int) 
        self.contentSize = CGSizeMake((kButtonSize+kSpacing)*CGFloat(count), self.bounds.size.height)
        for i in 0..<count 
            let button = UIButton(type: .Custom)
            button.setTitle("\(i+1)", forState:.Normal)
            button.setTitleColor(.whiteColor(), forState: .Normal)
            button.tag = i
            button.layer.cornerRadius = kButtonSize/2
            button.frame = CGRectMake((kButtonSize+kSpacing)*CGFloat(i), 0, kButtonSize, kButtonSize)
            button.backgroundColor = UIColor.clearColor()
            button.addTarget(self, action: "didClickSeason:", forControlEvents: .TouchUpInside)
            buttons.append(button)
            self.addSubview(button)
        

        if count > 0 
            self.animateButtonSelection(buttons[0])
        
    

编辑 这里有一些图片可能会澄清我在寻找什么：

1：

2：

多个：

谢谢， 大卫

编辑 2： 首先感谢@OmkarGuhilot，该解决方案在一定程度上对我有用，但是当我添加的按钮多于适合我的self.view.bounds 时，我遇到了问题。然后 FlowLayout 子类将创建第二行，而不是提供水平滚动的可能性。

这是我按预期工作的解决方案：

func collectionView(collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        insetForSectionAtIndex section: Int) -> UIEdgeInsets 
            let totalCellWidth:CGFloat =  50.0 * CGFloat(self.seasons.count)
            let viewWidth:CGFloat = self.seasonNavigator.bounds.size.width
            let totalSpacingWidth:CGFloat = 10 * (CGFloat(self.seasons.count)-1)
            print(viewWidth)
            let leftInsets = (viewWidth - (totalCellWidth + totalSpacingWidth)) / 2
            let rightInsets = leftInsets

            return UIEdgeInsetsMake(0, max(leftInsets,10), 0, max(rightInsets,10))
    

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) 
        self.seasonNavigator.collectionViewLayout.invalidateLayout()
    

【问题讨论】：

为什么不使用集合视图？它也会自己处理滚动

因为 UICollectionView FlowLayout 也从左侧开始，并且不将项目居中.. ?

您是否希望第一个项目位于中心，然后当您滚动它们时，所选项目将保持在中心，其余项目将水平滚动？

类似于水平选择器视图的东西？

@OmkarGuhilot 请查看我编辑的问题

【参考方案1】：

使用集合视图结合https://github.com/keighl/KTCenterFlowLayout

这也将自己处理滚动，它会更容易

谢谢

奥姆卡

【讨论】：

谢谢 我在使用这个解决方案时遇到了问题，但我自己找到了解决方案。我仍然接受这个答案，因为它可能是像我这样有类似问题的人的正确答案。

【参考方案2】：

您可以尝试将按钮放在子视图中，使子视图的约束适应您的按钮，并将子视图的约束“水平居中”应用到滚动视图。

storyboard

portrait