Swift - How could I use uicollectionview to make this? - ios

Question

Hi I wanted to achieve the below design using swift .Please find image below for reference.
.
The only way I can think about do it is using a UICollectionView with a scrollbar but the UICollectionView needed custom spacing padding which made the scrollbar stop in the middle of the object.

Answer 1

Its better to make a UICollectionView view with cell width and height the same as UICollectionView's width and height and take a UIView inside it in order to achieve custom space padding which will contain your label and text.
I just created a Sample for you.
The main idea already suggested to take a view inside the Custom Collection View cell in order to achieve custom space padding.
I have taken two IBOutlets in ViewController, a myCollectionView and a pageControl.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var pageControl: UIPageControl!
#IBOutlet weak var myCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
}
extension ViewController:UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
//MARK:- CollectionView Datasource
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
return cell
}
//MARK:- CollectionView Delegate
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
//MARK:- ScrollView Delegates
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageWidth = myCollectionView.frame.size.width;
let page = floor((myCollectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1
pageControl.currentPage = Int(page)
print(page)
}
}
scrollViewDidEndDecelerating will decide in which index you are and you can update the above mapView accordingly. A page number 0 indicates its the first cell (indexPath.row = 0). As you slide to second index, it will print 1.0 which means the second index.
This is my Custom Cell class of UICollectionViewCell
import UIKit
class CustomCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var cellView: UIView!
override func awakeFromNib() {
super.awakeFromNib()
//To make corners round
cellView.layer.cornerRadius = 10.0
}
}
My view heirarchy
And the output
Hope you get some idea.

Answer 2

That bottom part looks like a UIScrollView with isPagingEnabled set to true. The 3 dots at the bottom is a UIPageControl.
Use UIScrollViewDelegate and scrollViewDidEndDecelerating to manage your other content changes.