[英]Swift - How could I use uicollectionview to make this?
Hi I wanted to achieve the below design using swift .Please find image below for reference. 嗨,我想使用swift实现以下设计。请在下面找到图片以供参考。
.
。
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. 我能想到的唯一的办法做到这一点是使用
UICollectionView
有滚动条,但UICollectionView
需要自定义的间隔填充这在对象的中间所做的滚动停止。
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. 最好使一个
UICollectionView
视图的单元格宽度和高度与UICollectionView's
宽度和高度相同,并在其中放入一个UIView
,以实现将包含标签和文本的自定义空格填充。
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. 已经提出了主要想法,建议在“ Custom Collection View”单元中进行查看,以实现自定义空间填充。
I have taken two IBOutlets in ViewController
, a myCollectionView
and a pageControl
. 我在
ViewController
拍摄了两个IBOutlet,一个myCollectionView
和一个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. scrollViewDidEndDecelerating
将决定您所在的索引,您可以相应地更新上述mapView
。 A page number 0 indicates its the first cell (indexPath.row = 0). 页号0指示其第一个单元格(indexPath.row = 0)。 As you slide to second index, it will print 1.0 which means the second index.
当您滑动到第二个索引时,它将打印1.0,这表示第二个索引。
This is my Custom Cell class of UICollectionViewCell
这是我的
UICollectionViewCell
Custom Cell类
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. 希望你有想法。
That bottom part looks like a UIScrollView
with isPagingEnabled
set to true
. 该底部看起来像一个
UIScrollView
其中isPagingEnabled
设置为true
。 The 3 dots at the bottom is a UIPageControl
. 底部的3个点是
UIPageControl
。
Use UIScrollViewDelegate
and scrollViewDidEndDecelerating
to manage your other content changes. 使用
UIScrollViewDelegate
和scrollViewDidEndDecelerating
管理其他内容更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.