如何使UIScrollView的子视图居中

时间:2016-08-14 18:40:59

标签: ios swift uiscrollview

我是创建自定义视图的初学者。我尝试使用滚动视图和按钮创建自定义UIView,如下所示:enter image description here

我在scrollView中添加一个视图(带有页码标签的视图),具体取决于页数。这应该是怎么回事?

目前它看起来像这样:

enter image description here

我的问题是如何将scrollview的子视图居中?接下来这个代码有什么问题?为什么我只能在视图中看到1个标签?而另一个并没有出现。如果在滚动视图中看不到页码,如何滚动到所选页面?

这是我的代码:

func addPageNumberViewWithCount(count: Int) {

        var pageNumberViewX: CGFloat! = 0
        let pageNumberViewDistance: CGFloat! = 10

        for i in 1...count {

            let pageNumberView = UIView(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
            pageNumberView.backgroundColor = UIColor.redColor()
            pageNumberView.layer.cornerRadius = pageNumberView.frame.height / 2
            pageNumberView.layer.masksToBounds = true
            pageNumberView.clipsToBounds = true

            // add number label
            let label = UILabel(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
            label.center = pageNumberView.center
            label.text = "\(i)"
            label.textAlignment = .Center
            pageNumberView.addSubview(label)

            // update x for next view
            pageNumberViewX = pageNumberView.frame.origin.x + pageNumberView.frame.width + pageNumberViewDistance

            // add view inside scrollview
            scrollView.addSubview(pageNumberView)


            if i == count {
                scrollView.contentSize = CGSizeMake(pageNumberViewX + pageNumberView.frame.width, 30)
            }

        }

    }

2 个答案:

答案 0 :(得分:1)

也许你应该有一个UICollectionView,每个按钮都有一个单元格。这是一种更好的方法,当屏幕旋转并改变宽度时,你可以再次将它布局。

这些单元格将向左偏移布局。你可以这样解决:

let pageNumberViewTotalWidth = 30 * count + (pageNumberViewDistance * count - 1)

self.collectionView.contentInset.left = (self.collectionView.frame.size.width - pageNumberViewTotalWidth) / 2

标签未显示,因为您将其框架的x设置为与页码视图的x相同。它的框架应该是相对于它的超级视图,在这种情况下是pageNumberView

答案 1 :(得分:1)

你的第一个问题"如何将scrollview的子视图居中?"

解决方案:假设您总共有50页,并且您希望在滚动视图中一次显示5个页面。

然后制作10个相等宽度的子视图,其中每个子视图宽度将等于集合视图的可见部分

   self.view.size.width - 2*(width of toggle button)

然后在每个容器视图中添加5个以相等距​​离放置的pageNumberView

   lets pageNumberViewWidth = container.width/5 - 2*margin

   now pageNumberView frame will be (margin,0,pageNumberViewWidth,height)

以这种方式,在每个容器视图中,您的pageNumberViews将被平等放置,看起来好像您已将它们居中。

第二个问题"为什么我只能在视图中看到1个标签?"

答案:因为你设置的标签框不正确

  let label = UILabel(frame: CGRectMake(pageNumberViewX, 0, 30, 30))

这里label是pageNumberView的子视图所以你必须根据它的父视图是pageNumberView来设置它的框架,所以把它改成

  let label = UILabel(frame: CGRectMake(0, 0, 30, 30))

第一次是正确的,因为pageNumberViewX在第一次迭代后为0,之后它变成了一些正值,这使得它的帧向右移动但是它的父宽度很小,因此它对你来说是不可见的。

第三个问题:"如果在滚动视图中看不到页码,如何滚动到所选页面?"

为此,您需要找到所选页面的框架:

您可以使用用于创建pageNumberView的偏移量来完成此操作。

(每个pageNumberView的宽度)* pageNumber =所需pageNumberView的起始点。

  let frame : CGRect = CGRectMake(calculated offset above, 0,30, 30)
 //where you want to scroll 

  self.scrollView.scrollRectToVisible(frame, animated:true)

我希望这可以帮助您解决问题

编辑第一个问题

func addPageNumberViewWithCount(count: Int) {

            var containerViewX: CGFloat! = 0
            let pageNumberViewDistance: CGFloat! = 10


            let pageNumberViewPerSubview = 5
            var numberOfSubview = count/pageNumberViewPerSubview

            if(count % pageNumberViewPerSubview > 0){
                numberOfSubview = numberOfSubview + 1
            }

            var pagesLeft = count

            for i in 1...numberOfSubview {

                var pageNumberViewX: CGFloat! = 0

                let containerView : UIView = UIView(frame:CGRectMake(containerViewX,0,scrollView.frame.size.width,scrollView.frame.size.height))

                if(pagesLeft < pageNumberViewPerSubview){
                    for k in 1...pagesLeft{

                    }
                }
                else{
                    for j in 1...pageNumberViewPerSubview{
                        let pageNumberView = UIView(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
                        pageNumberView.backgroundColor = UIColor.redColor()
                        pageNumberView.layer.cornerRadius = pageNumberView.frame.height / 2
                        pageNumberView.layer.masksToBounds = true
                        pageNumberView.clipsToBounds = true

                        // add number label
                        let label = UILabel(frame: CGRectMake(0, 0, 30, 30))
                        label.text = "\(i)"
                        label.textAlignment = .Center
                        pageNumberView.addSubview(label)

                        // update x for next view
                        pageNumberViewX = pageNumberView.frame.origin.x + pageNumberView.frame.width + pageNumberViewDistance

                        containerView.addSubview(pageNumberView)
                    }

                    containerViewX = containerViewX + scrollView.frame.size.width
                    // add view inside scrollview
                    scrollView.addSubview(containerView)

                    pagesLeft = pagesLeft - pageNumberViewPerSubview
                }






                if i == count {
                    scrollView.contentSize = CGSizeMake(numberOfSubview*scrollView.frame.size.width, 30)
                }

            }

        }