[英]How do I change the size of a 2x2 UICollectionView and fit the whole screen: Swift 3 Xcode 8
Hi I am creating an app which requires a grid of images. 嗨,我正在创建一个需要图像网格的应用程序。 As an example I am using a 2x2 grid of images in cells of a UICollectionView.
作为示例,我在UICollectionView的单元格中使用2x2的图像网格。 I would like to know how I could decrease the annoying space in the middle and also make them have equal widths and heights to fit the whole screen.
我想知道如何减少中间的烦人空间,并使它们具有相等的宽度和高度以适合整个屏幕。 I know that I can do this with Interface builder.
我知道我可以使用Interface builder来做到这一点。 However, I want to do this programmatically because as the app progresses, there will be different levels and different number of squares - possibly a 10x10 also.
但是,我想以编程方式执行此操作,因为随着应用程序的进展,将会有不同的级别和不同的正方形数-可能也是10x10。 I am new to UICollectionViews.
我是UICollectionViews的新手。 I have referenced to many other questions, however most are in Objective C and there few that are in Swift don't seem to work with Swift 3.
我已经提到了许多其他问题,但是大多数问题都在Objective C中,而Swift中很少有似乎无法在Swift 3中使用。
Here is my full code: 这是我的完整代码:
import UIKit
class GameViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout{
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
collectionView.delegate = self
collectionView.dataSource = self
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2;
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
let image = cell.viewWithTag(1) as! UIImageView
image.image = #imageLiteral(resourceName: "coffee")
return cell;
}
func collectionView(_collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: self.collectionView.frame.size.width/2, height: self.collectionView.frame.size.height/2)
//this method is not getting called
}
}
I am also uploading an image of how it currently is and how I want it to be- 我还上传了一张图片,说明它目前的状态以及我希望的状态-
I hope you guys will help me- it will be very useful... Thanks! 希望你们对我有帮助-这将非常有用...谢谢!
I conformed to UICollectionViewDelegateFlowLayout and called sizeforitematindexpath but it did not work. 我遵循UICollectionViewDelegateFlowLayout并称为sizeforitematindexpath,但是它不起作用。 On adding a breakpoint I realized that the method was not getting called.
添加断点后,我意识到该方法没有被调用。 So is there anything wrong I'm doing here.
所以我在这里做错什么了。 Also Xcode gives me this warning -
Xcode也给我这个警告-
Make sure that: 确保:
UICollectionViewDelegateFlowLayout
. UICollectionViewDelegateFlowLayout
。 minimumInteritemSpacingForSectionAt
returning zero. minimumInteritemSpacingForSectionAt
返回零来进行minimumInteritemSpacingForSectionAt
。 Finally, implement sizeForItemAtIndexPath
method: 最后,实现
sizeForItemAtIndexPath
方法:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width / 2, height: 100)
}
Use following code in viewDidLoad 在viewDidLoad中使用以下代码
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0
collectionViewLayout.itemSize = CGSize(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.width/2)
Use "UICollectionViewDelegateFlowLayout" Delegate for set size for CollectionView cell size 使用“ UICollectionViewDelegateFlowLayout”委托为CollectionView单元格大小设置大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.width/2)
}
I hope this will helpfull for you. 希望对您有帮助。
You can use the following to size the cells: 您可以使用以下内容来调整单元格的大小:
extension GameViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let cellWidth = self.collectionView.bounds.width / 2
return CGSize(width: cellWidth, height: cellWidth)
}
}
Also, add the following lines at the end of viewDidLoad()
to get rid of the unwanted white space: 另外,在
viewDidLoad()
的末尾添加以下行以摆脱不需要的空白:
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.