2

i want to make this Collection view that can scroll horizontal and vertical....but i wanna make something like this

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

from what i see theres like Collection view and some segmented controll on top of that Collection view...... i mean my only problem is how can i scroll horizontal from anywhere on screen?

like i dont have to scroll from that top segmented control, i can also swipe it from that collection view thing

Any idea how to make this? cause i really dont know if im right or not.....

Thanks

*edit, i cant use library, so i guess i need something that really do it by manual, and for the horizontal scroll i need a dynamic data, i dunno paging controller can use a dynamic data cause as long as i know its static data.

afi permana
  • 207
  • 3
  • 17
  • Use a `UIPageViewController` and a `UICollectionView` for that. – PGDev Sep 29 '20 at 05:26
  • so i should stack tha page and collection view is that what you meant sir? – afi permana Sep 29 '20 at 05:27
  • Use a pageViewController for showing different pages (Vouchers, Subscriptions etc.) and use collectionView too show content of each page. – PGDev Sep 29 '20 at 05:31
  • ohhh okay so i dont need to use segmented controller for vouchers, etc? i just need page view controller and that collectionview for the content? – afi permana Sep 29 '20 at 05:47
  • If you are using SwiftUI, you can add an event listener to monitor the user swipe directions, then return corresponding collection view and hide the other one. Since there are two collection views, you can use the same or different data sources. – Bryce Chan Oct 19 '20 at 09:19

2 Answers2

3
  • take a viewcontroller

  • add a view2 give it top constrain and height to 44

  • add scrollview and give apropreate constrain (programaticaly or using storyborad choice is your)

  • add 3 buttons for voucher , subscription , misson .

  • create 3 diffrent ViewControllers for voucher, subscription, misson.

  • add 3 viewcontrollers in scrollview

// 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)
  }
}


  • function for spacific button(top 3 buttons) click
    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)
    }

i hope it will work for you :)

Shivam Parmar
  • 1,520
  • 11
  • 27
  • ahh okay sir i will try you method – afi permana Oct 20 '20 at 07:01
  • sir i forget, i try your method and it seems like youre method is kinda static, i need a dynamic so i can put my catalog like data like "voucher, subscription, misson", cause the data is coming from api and i cant use your method, what if theres 10 i need to make the catalog? i cant just make 10 different view controller for each data i want to show – afi permana Oct 20 '20 at 09:23
  • i understan data came from api but if design of every viewcontroller will different then you have to create it statically – Shivam Parmar Oct 20 '20 at 09:29
  • oh no sir, the design of every controller is the same, because i use collectionview and every cell is using and xib file that i make, so the design of every controller will be the same – afi permana Oct 20 '20 at 10:31
  • then you can use this code dynamically , you can call one viewcontroller multyple time and as par count of your viewcontrollers set width for scrollview, in short i just give you method how to do that you have to use it dynamically by your own :) – Shivam Parmar Oct 20 '20 at 11:15
  • and also if you facing problem because of top buttons then you can also set horizontal collectionview in place of buttons – Shivam Parmar Oct 20 '20 at 11:18
  • ahh since you say about horizontal collection view, so basicly i use 2 collection view for horizontal and vertical scroll, so did have have to merge 2 collection view into 1 or is it just 2 seperate collection view and i just have to control it seperatly? – afi permana Oct 21 '20 at 06:48
  • okay.....how do i do that? i mean how i can combine 2 collection view into 1? cause i try to browse it and i cant seems to find it – afi permana Oct 21 '20 at 08:07
  • visit this answer for it https://stackoverflow.com/questions/44614743/add-uicollectionview-in-uicollectionviewcell – Shivam Parmar Oct 21 '20 at 08:27
  • sir sorry for asking again, but can i just use page controller for your method? it seems its a little bit simpler with a page controller – afi permana Oct 21 '20 at 22:58
  • no dear i don't mention its page controller , but you can also do it using page controller – Shivam Parmar Oct 22 '20 at 04:49
2

add collection view to every single view controller(screen), and apply Parchment framework for your required output.

you can get more information about Parchment on :- https://github.com/rechsteiner/Parchment

attaching some similar frameworks (select according to your requirement)

Shivam Parmar
  • 1,520
  • 11
  • 27