如何使用UIScrollView显示下一个视图的边缘

时间:2017-08-22 16:30:32

标签: ios swift

this things that i want to get

我是ios开发的新手,我想使用scrollview初始显示下一个视图的边缘我得到了Link的帮助,这是我的视图层次结构 1)我从故事板添加了scrollview来查看控制器的顶视图 2)我以编程方式将视图作为容器视图和集合视图添加为scrollview的子视图。

我显示了下一个视图的边缘,但是当我转到下一页时,事情并不顺利,我不知道如何处理这个重要的事情,我也不知道哪种方法最适合实现这个特定的任务。这是我的代码。我真的被卡住了,我真的不知道该怎么办。

func addCollectionViewsInsideScrollView(){

    scrollView?.delegate = self;
    scrollView?.isPagingEnabled=true
    scrollView.indicatorStyle = UIScrollViewIndicatorStyle.white


    for i in 0...2 {
        if i == 0 {

            frame = CGRect(x: scrollWidth * CGFloat (i), y: 0, width: scrollWidth - 45,height: scrollHeight)

            subView1 = UIView(frame: frame)
            subView1.backgroundColor = .white
            scrollView?.backgroundColor = .white
            scrollView?.addSubview(subView1)
            subView1.addSubview(collectionView0)
            collectionView0.frame = CGRect(x: subView1.bounds.origin.x, y: 0, width: subView1.bounds.width,height: subView1.bounds.height)

        }

        if i == 1 {

            frame = CGRect(x: scrollWidth * CGFloat (i) - 20, y: 0, width: scrollWidth - 45,height: scrollHeight)

            subView2 = UIView(frame: frame)
            scrollView?.addSubview(subView2)
            subView2.addSubview(collectionView1)
            collectionView1.frame = CGRect(x: subView2.bounds.origin.x, y: 0, width: subView2.bounds.width,height: subView2.bounds.height)

        }

        if i == 2 {

            frame = CGRect(x: scrollWidth * CGFloat (i) - 40, y: 0, width: scrollWidth - 45,height: scrollHeight)
            subView3 = UIView(frame: frame)
            scrollView?.addSubview(subView3)
            subView3.addSubview(collectionView2)

            collectionView2.frame = CGRect(x: subView3.bounds.origin.x, y: 0, width: subView3.bounds.width,height: subView3.bounds.height)

        }

    }

    scrollView?.contentSize = CGSize(width: (scrollWidth * 3), height: scrollHeight)
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    setIndiactorForCurrentPage()
}




func scrollViewDidScroll(_ scrollView: UIScrollView) {


    if myPageNo == 1 {
        frame = CGRect(x: scrollWidth - 20, y: 0, width: scrollWidth - 40,height: scrollHeight)
        let subView = UIView(frame: frame)
        self.scrollView?.addSubview(subView)
        subView.addSubview(collectionView1)
        collectionView1.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
         myPageNo -= 0
    }

    if myPageNo == 2{
        frame = CGRect(x: scrollWidth * 2 - 20, y: 0, width: scrollWidth,height: scrollHeight)
        let subView = UIView(frame: frame)
        self.scrollView.addSubview(subView)
        subView.addSubview(collectionView2)
        collectionView2.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
        myPageNo -= 1
    }
}

func setIndiactorForCurrentPage()  {

    let page = (scrollView?.contentOffset.x)!/scrollWidth
    print(scrollView?.contentOffset.x ?? 0)
    pageControl?.currentPage =  Int(page.rounded())
    myPageNo = Int(page.rounded())

    if  myPageNo == 1 {
       setFrame(pageNo: 1)
    }

    if myPageNo == 2{
        setFrame(pageNo: 2)
    }

}


func setFrame(pageNo: Int){
    if(pageNo == 1){

    frame = CGRect(x: scrollWidth + 2, y: 0, width: scrollWidth - 40,height: scrollHeight)
    let subView = UIView(frame: frame)
    scrollView?.addSubview(subView)
    subView.addSubview(collectionView1)
    collectionView1.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)

    }
    else if(pageNo == 2){

        frame = CGRect(x: scrollWidth * 2, y: 0, width: scrollWidth,height: scrollHeight)
        let subView = UIView(frame: frame)
        scrollView?.addSubview(subView)
        subView.addSubview(collectionView2)
        collectionView2.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)

    }
}

当我从最后一页回到上一页时,一切都很好但是当我第一页进入下一个视图时,我无法处理显示下一个视图的边缘。

So far I achieved this thing但这不是我想要的。我想使用点按手势控制uiscroll,另外想要显示左对齐的最后一页 `这是我的代码函数scrollViewDidEndDecelerating(_ scrollView:UIScrollView){

    var visibleRect = CGRect()
    visibleRect.origin = collectionView.contentOffset
    visibleRect.size = collectionView.bounds.size
    let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
    let visibleIndexPath: IndexPath = collectionView.indexPathForItem(at: visiblePoint)

    collectionView.scrollToItem(at: visibleIndexPath, at: .left, animated: true)
    indexPathArray.removeAll()
}

`

3 个答案:

答案 0 :(得分:1)

我一直致力于几个项目,你可以看一下你可以查看的下一个项目。最好的解决方案可能是UICollectionView,因为你不会立即将每个UIViewController加载到视图中,但只有当它几乎达到时。 UICollectionView的单元重用可以解决这个问题。

确保单元格大小(可根据屏幕大小计算)与宽度相似 - 40px,这样您就可以看到下一个单元格的边缘。在每个单元格中都有一个UIViewController是完全可能的,事实上你现在甚至可以通过Interface Builder来实现它。

UICollectionView已经实现了UIScrollView,因此无需手动使用UIScrollView。你需要做的唯一事情是,当有人停止滚动时,你决定要滚动到哪个单元格(下一个单元格或保持当前单元格)并滚动到该单元格动画。为此,您需要添加手势识别器: Intercepting pan gestures over a UIScrollView breaks scrolling

然后滚动到用户停止滚动时最明显的单元格: https://developer.apple.com/documentation/uikit/uicollectionview/1618046-scrolltoitematindexpath

为此,您需要知道当时哪个单元格最明显。这个计算可能有点困难,但要点是你需要知道哪些单元格在indexPathsForVisibleItems中,然后根据它们的内容或者scrollOffset看到哪一个更多地进入视图而不是其他单元格。该路径的indexPath应该是您要滚动到视图中的indexPath。

此解决方案可扩展到数百万个项目,因为您只加载实际(即将)看到的单元格。

答案 1 :(得分:0)

如果您有很多页面,我不会使用滚动视图,但这是我的示例代码,用于在scrollview中显示下一页。

class ExampleViewController: UIViewController {

var scrollView = UIScrollView()

var container1 = UIView()
var container2 = UIView()
var container3 = UIView()

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.isPagingEnabled = true
    scrollView.clipsToBounds = false
    view.addSubview(scrollView)

    container1.backgroundColor = .red
    container2.backgroundColor = .blue
    container3.backgroundColor = .yellow

    scrollView.addSubview(container1)
    scrollView.addSubview(container2)
    scrollView.addSubview(container3)
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    scrollView.frame = CGRect(x: 0, y: 0, width: view.bounds.width - peekAmount, height: view.bounds.height)
    scrollView.contentSize = CGSize(width: 3 * scrollView.frame.width, height: scrollView.frame.size.height)
    container1.frame.size = containerSize
    container2.frame.size = containerSize
    container3.frame.size = containerSize
    var xPosition: CGFloat = 0
    container1.frame.origin = CGPoint(x: xPosition, y: 0)
    xPosition = container1.frame.maxX
    container2.frame.origin = CGPoint(x: xPosition, y: 0)
    xPosition = container2.frame.maxX
    container3.frame.origin = CGPoint(x: xPosition, y: 0)
}

var containerSize: CGSize {
    return CGSize(width: scrollView.frame.size.width, height: scrollView.frame.size.height)
}

var peekAmount: CGFloat {
    return 80
}
}

有许多不同的方法可以满足您的需求,但这很简单,可以给您一个想法。我没有添加页面控件,因为你已经有了逻辑。

答案 2 :(得分:0)

我认为,您使用UICollectionView来显示下一个视图的边缘。