【问题标题】:Swift Collection view Horizontal and vertical scrollSwift Collection 视图水平和垂直滚动
【发布时间】:2020-09-29 05:23:03
【问题描述】:

我想做这个可以水平和垂直滚动的集合视图....但我想做这样的事情

https://giphy.com/gifs/lWshqs2BuvilYuE4Fl/html5

据我所见,Collection 视图和该 Collection 视图顶部的一些分段控件......我的意思是我唯一的问题是如何从屏幕上的任何位置水平滚动?

就像我不必从那个顶部分段控件滚动一样,我也可以从那个集合视图中滑动它

知道怎么做吗?因为我真的不知道我是否正确.....

谢谢

*编辑,我不能使用库,所以我想我需要一些真正手动完成的东西,而对于水平滚动,我需要动态数据,我不知道分页控制器可以使用动态数据,只要我知道它的静态数据。

【问题讨论】:

  • 为此使用UIPageViewControllerUICollectionView
  • 所以我应该堆叠页面和集合视图是您的意思吗先生?
  • 使用 pageViewController 来显示不同的页面(凭证、订阅等)并使用 collectionView 来显示每个页面的内容。
  • 哦,好吧,所以我不需要为凭证等使用分段控制器?我只需要页面视图控制器和内容的集合视图?
  • 如果你使用的是SwiftUI,你可以添加一个事件监听器来监听用户滑动方向,然后返回对应的collection view并隐藏另一个。由于有两个集合视图,您可以使用相同或不同的数据源。

标签: ios swift uisegmentedcontrol collectionview


【解决方案1】:
  • 获取视图控制器

  • 添加一个 view2 将其顶部约束和高度设置为 44

  • 添加滚动视图并给予适当的约束(以编程方式或使用故事板选择是你的)

  • 为凭证、订阅、任务添加 3 个按钮。

  • 为凭证、订阅、任务创建 3 个不同的 ViewController。

  • 在滚动视图中添加 3 个视图控制器

// define this variable globally
var previousPageXOffset: CGFloat = 0.0
var pagenumber = 0

// add this in viewdidload
let aViewController = self.storyboard!.instantiateViewController(withIdentifier: "voucher") as! voucher

  let bViewController = self.storyboard!.instantiateViewController(withIdentifier: "subscription") as! subscription
  
  let cViewController = self.storyboard!.instantiateViewController(withIdentifier: "misson") as! misson
  
  let bounds = UIScreen.main.bounds
  let width = bounds.size.width
  let height = CGFloat(1.0)
  
  let viewControllers = [aViewController, bViewController, cViewController]
  
  self.scrollview!.contentSize = CGSize(width: CGFloat(self.totalscreen)*width, height: height)
  
  var idx:Int = 0
  
  for viewController in viewControllers {
      self.addChild(viewController)
      let originX:CGFloat = CGFloat(idx) * width
      viewController.view.frame = CGRect(x: originX, y: 0, width: self.scrollview.frame.width, height: self.scrollview.frame.height)
      self.scrollview!.addSubview(viewController.view)
      print("change")
      viewController.didMove(toParent: self)
      idx+=1
  }

// delegate for scrollview 

extension yourVC: UIScrollViewDelegate{
  
  func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
      
      previousPageXOffset = scrollView.contentOffset.x
  }
  
  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
      
      let targetOffset = targetContentOffset.pointee
      
      if targetOffset.x == previousPageXOffset {
          // page will not change
      } else if targetOffset.x < previousPageXOffset {
          print("left")
          pagenumber = pagenumber - 1
      } else if targetOffset.x > previousPageXOffset {
          print("ryt")
          pagenumber = pagenumber + 1
      }
      
      if pagenumber <= 0 {
          
          //set buttons colors or bottom line in your case if first page is selected
          
      }else if pagenumber == 1{
          //set buttons colors or bottom line in your case if second page is selected
      }else{
          //set buttons colors or bottom line in your case if third page is selected
      }
      print(pagenumber)
      previousPageXOffset = targetOffset.x
      print(previousPageXOffset)
  }
}


  • 空间按钮(前 3 个按钮)单击的功能
    func scrollToPage(page: Int, animated: Bool) {
        var frame: CGRect = self.scrollview.frame
        frame.origin.x = frame.size.width * CGFloat(page)
        frame.origin.y = 0
        self.scrollview.scrollRectToVisible(frame, animated: animated)
    }

我希望它对你有用:)

【讨论】:

  • 啊,好吧,先生,我会试试你的方法
  • 先生,我忘了,我试试你的方法,你的方法似乎有点静态,我需要一个动态的,所以我可以把我的目录像“凭证,订阅,任务”这样的数据,导致数据来自api,我不能用你的方法,如果有10个我需要制作目录怎么办?我不能只为要显示的每个数据制作 10 个不同的视图控制器
  • 我了解数据来自 api 但如果每个视图控制器的设计都不同,那么您必须静态创建它
  • 哦,不,先生,每个控制器的设计都是一样的,因为我使用collectionview,每个单元都使用我制作的xib文件,所以每个控制器的设计都是一样的
  • 那么您可以动态使用此代码,您可以多次调用一个视图控制器,并作为您的视图控制器的标准数量为滚动视图设置宽度,简而言之,我只是给您方法如何做到这一点,您必须使用它由你自己动态地:)
【解决方案2】:

将集合视图添加到每个视图控制器(屏幕),并为所需的输出应用Parchment 框架。

您可以通过以下方式获取有关 Parchment 的更多信息:- https://github.com/rechsteiner/Parchment

附加一些类似的框架(根据您的要求选择)

【讨论】:

  • 啊,好吧,谢谢你的回答,这真的有助于我想怎么做
  • 但是当你说将集合视图添加到每个视图时我有点困惑......所以当我实现那个羊皮纸时我仍然可以使用集合视图对吗?
  • 我的意思是说创建凭证、订阅和任务的 3 个视图控制器并将所有内容添加到给定的框架中
  • 啊,好吧,先生,我会试试这个方法
  • 先生,对不起,我不得不撤消您的回答,原来我需要手动完成,我不能为此使用任何库,所以您有什么想法吗?我想像双层的水平和垂直视图的集合视图
猜你喜欢
  • 2015-08-04
  • 1970-01-01
  • 2015-12-21
  • 1970-01-01
  • 2017-02-03
  • 1970-01-01
  • 2011-01-03
相关资源
最近更新 更多