UICollectionView 单元格不占用 UICollectionView 的宽度 [英] UICollectionView cells do not take up width of UICollectionView
问题描述
UICollectionView 的宽度会因设备而异，因为它被限制为达到视图的水平边距.collectionView 的布局是 Flow.我使用 UICollectionView 的唯一原因是在不同的设备尺寸上均匀地放置图像，并且所有这些图像都有一个点击手势识别器.并且行数是可变的，因为图像图标的数量会有所不同.显然这是我所追求的方法:
The UICollectionView width will change per device as it is constrained to reach the horizontal margins of the View. The collectionView's layout is Flow. The only reason I am using a UICollectionView is to space images evenly across on different device sizes, and all of these images will have a tap gesture recogniser. And the amount of rows is variable, as the amount of image icons will vary. Apparently this is the method I am after:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionViewWidth/6, height: collectionViewWidth/6);
}
我尝试这样做:
var collectionViewWidth: CGFloat = 0.0
override func viewDidLoad() {
super.viewDidLoad()
collectionView.dataSource = self
}
override func viewDidAppear(animated: Bool) {
collectionViewWidth = collectionView.collectionViewLayout
.collectionViewContentSize().width
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionViewWidth/6, height: collectionViewWidth/6);
}
但我在代码中尝试的任何内容都不会对最终输出产生任何影响，即(忘记不在 UICollectionView 中的图像 - 它们将被删除):
But nothing I try in code makes any difference at all to the final output which is this (forget about the images that are not in the UICollectionView - they will be deleted):
我在界面构建器中更改了单元格的大小，结果是这样的:
I changed the size of the cells in the interface builder and the result got me this:
所以我有两个问题:
为什么上图中的单元格没有走到UICollectionView的边缘?
Why do the cells in the above picture not go to the edge of the UICollectionView?
如何在运行时以编程方式设置单元格大小，使我的 UICollectionView 在所有设备大小上都有 6 列?
How can I set the cell size programmatically at run time to make my UICollectionView have 6 columns on all device sizes?
这是包含 UICollectionView 的 ViewController 的所有代码:
Here is all the code for my ViewController that contains the UICollectionView:
import UIKit
class DressingRoomViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
let identifier = "cellIdentifier"
let dataSource = DataSource()
var collectionViewWidth: CGFloat = 0.0
override func viewDidLoad() {
super.viewDidLoad()
collectionView.dataSource = self
}
override func viewDidAppear(animated: Bool) {
collectionViewWidth = collectionView.collectionViewLayout
.collectionViewContentSize().width
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func prepareForSegue( segue: UIStoryboardSegue,
sender: AnyObject?) {
if (segue.identifier == "dressingRoom2MyOutfits") {
let myOutfitsViewController = segue.destinationViewController
as! MyOutfitsViewController
}
}
}
// MARK:- UICollectionViewDataSource Delegate
extension DressingRoomViewController : UICollectionViewDataSource {
func numberOfSectionsInCollectionView(
collectionView: UICollectionView) -> Int {
return dataSource.groups.count
}
func collectionView(collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int {
return dataSource.numbeOfRowsInEachGroup(section)
}
func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
identifier,forIndexPath:indexPath) as! FruitCell
let fruits: [Fruit] = dataSource.fruitsInGroup(indexPath.section)
let fruit = fruits[indexPath.row]
let name = fruit.name!
cell.imageView.image = UIImage(named: name)
cell.caption.text = name.capitalizedString
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionViewWidth/6, height: collectionViewWidth/6);
}
}
可能值得一提的是，我的 UICollectionView 的数据源只是因为我在做教程而被分组.这是数据源代码:
It may be worth mentioning that my data source of the UICollectionView is grouped only because I was doing a tutorial. Here is the DataSource code:
类数据源{
init() {
populateData()
}
var fruits:[Fruit] = []
var groups:[String] = []
func numbeOfRowsInEachGroup(index: Int) -> Int {
return fruitsInGroup(index).count
}
func numberOfGroups() -> Int {
return groups.count
}
func gettGroupLabelAtIndex(index: Int) -> String {
return groups[index]
}
// MARK:- Populate Data from plist
func populateData() {
if let path = NSBundle.mainBundle().pathForResource(
"Fruits", ofType: "plist") {
if let dictArray = NSArray(contentsOfFile: path) {
for item in dictArray {
if let dict = item as? NSDictionary {
let name = dict["name"] as! String
let group = dict["group"] as! String
let fruit = Fruit(name: name, group: group)
if !contains(groups, group){
groups.append(group)
}
fruits.append(fruit)
}
}
}
}
}
// MARK:- FruitsForEachGroup
func fruitsInGroup(index: Int) -> [Fruit] {
let item = groups[index]
let filteredFruits = fruits.filter { (fruit: Fruit) -> Bool in
return fruit.group == item
}
return filteredFruits
}
}
这是加载到数据源中的 plist:
And here is the plist that gets loaded into the data source:
我做了一些工作来删除不需要的组.我看到这些组导致新行过早启动.我把代码改成这样:
// MARK:- UICollectionViewDataSource Delegate
extension DressingRoomViewController : UICollectionViewDataSource {
func numberOfSectionsInCollectionView(
collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int {
return 12
}
func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
identifier,forIndexPath:indexPath) as! FruitCell
let fruits: [Fruit] = dataSource.fruits
let fruit = fruits[indexPath.row]
let name = fruit.name!
cell.imageView.image = UIImage(named: name)
cell.caption.text = name.capitalizedString
return cell
}
func collectionView(collectionView: UICollectionView,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: 200, height: 200);
}
}
现在我只需要以某种方式使单元格宽度为集合视图宽度的 1/6，然后裁剪掉浪费空间的 UICollectioview 底部
推荐答案
可以在viewDidLoad中设置collectionViewLayout的itemSize，如下例所示:
You can set the itemSize of the collectionViewLayout in viewDidLoad as shown in this example:
override func viewDidLoad() {
super.viewDidLoad()
let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
let collectionViewSize = collectionView.frame.size
let nrOfCellsPerRow = 6
let itemWidth = collectionViewSize.width/nrOfCellsPerRow
let itemHeight = 80 // example
layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
}
如果你想在单元格之间有间距，你将不得不补偿 itemWidth 计算
If you want to have spacing between the cells you will have to compensate the itemWidth calculation
这篇关于UICollectionView 单元格不占用 UICollectionView 的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
