快速的UICellView单元格布局

我正在尝试使用UICollectionView来创build一个网格，用户可以通过y单元格（在文本框中input）将其设置为x个单元格，同时在屏幕上占用相同的宽度。

我已经能够创build一个包含正确数量的单元格的网格视图，但是这些网格视图的布局还不正确，即input5乘以7将会给出35个单元格，而不是在5单元格中按7单元格布局。 这是迄今为止的代码。

MyCollectionViewCell.swift导入UIKit

class MyCollectionViewCell: UICollectionViewCell { @IBOutlet var cellLabel: UILabel! } 

CreateNewProject.swift

 class CreateNewProject : UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITextFieldDelegate { @IBOutlet var widthTextBox: UITextField! @IBOutlet var lengthTextBox: UITextField! @IBOutlet var myCollection: UICollectionView! let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard @IBAction func updateView(sender: AnyObject) { let widthValue = Int(widthTextBox.text!) let lengthValue = Int(lengthTextBox.text!) multiplyValue = Int(widthValue! * lengthValue!) createArray() } func createArray() { var i = 0 while i < multiplyValue { items.append("") i += 1 } myCollection.reloadData() } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { print(self.items.count) } // make a cell for each cell index path func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { // get a reference to storyboard cell let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell // Use the outlet in custom class to get a reference to the UILabel in the cell cell.cellLabel.text = self.items[indexPath.item] cell.backgroundColor = UIColor.lightGrayColor() return cell } } 

我已经约束了UICollectionView的左侧，右侧和顶部，并希望以编程方式调整集合视图中的单元格为UICollectionView.width / x（用户select的单元格宽度）。

不知道这样做的最好方法，也需要保持单个单元格之间的一些空白。 任何帮助将非常感激！

Answer 1

简单来说，添加一个实现UICollectionViewDelegateFlowLayout协议的视图控制器的扩展：

 extension ViewController: UICollectionViewDelegateFlowLayout { func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let size = collectionView.frame.size.width / CGFloat(cols) - CGFloat((cols - 1)) * spacingBetweenCells return CGSize(width: size, height: size) } } 

spacingBetweenCells表示您希望在单元格之间放置的间距。

Answer 2

这里是添加到您的collectionView的代码。 属性cellsAcross ， cellsDown ， horizGap和vertGap是您可以在应用程序中设置的值。 horizGap和vertGap在方法minimumInteritemSpacingForSectionAtIndex和minimumLineSpacingForSectionAtIndex 。 sizeForItemAtIndexPath将计算您的单元格的必要维度，使其工作。

 var cellsAcross = 5 var cellsDown = 7 var horizGap = 4 var vertGap = 4 func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return cellsAcross * cellsDown } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat { return CGFloat(vertGap) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat { return CGFloat(horizGap) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { // Compute the dimensions of a cell for a cellsAcross x cellsDown layout. let dimH = (collectionView.bounds.width - (CGFloat(cellsAcross) - 1) * CGFloat(horizGap)) / CGFloat(cellsAcross) let dimV = (collectionView.bounds.height - (CGFloat(cellsDown) - 1) * CGFloat(vertGap)) / CGFloat(cellsDown) return CGSize(width: dimH, height: dimV) } 

---

对于这个演示，我添加了下面的代码：

 @IBAction func threeBy5(sender: UIButton) { cellsAcross = 3 cellsDown = 5 collectionView.reloadData() } @IBAction func fourBy6(sender: UIButton) { cellsAcross = 4 cellsDown = 6 collectionView.reloadData() } @IBAction func fiveBy7(sender: UIButton) { cellsAcross = 5 cellsDown = 7 collectionView.reloadData() } // Handle screen rotation override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { collectionView.reloadData() } 

Answer 3

试试这个代码：

 import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { @IBOutlet var collectionView: UICollectionView! let rows = 7 let columns = 3 let spaceBetweenRows = 2 let spaceBetweenColumns = 4 var cellHeight: CGFloat { get { return collectionView.frame.height/CGFloat(rows)-CGFloat(spaceBetweenRows) } } var cellWidth: CGFloat { get { return collectionView.frame.width/CGFloat(columns)-CGFloat(spaceBetweenColumns) } } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. collectionView.dataSource = self collectionView.delegate = self } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return 1 } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return rows*columns } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { return collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat { return CGFloat(spaceBetweenRows) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat { return CGFloat(spaceBetweenRows) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { return CGSize(width: cellWidth, height: cellHeight) } } 

Main.storyboard

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15G31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r"> <dependencies> <deployment identifier="iOS"/> <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/> </dependencies> <scenes> <!--View Controller--> <scene sceneID="tne-QT-ifu"> <objects> <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackoverflow_38993378" customModuleProvider="target" sceneMemberID="viewController"> <layoutGuides> <viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/> <viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC"> <rect key="frame" x="0.0" y="0.0" width="600" height="600"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <subviews> <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="StH-xe-9BK"> <rect key="frame" x="0.0" y="20" width="600" height="580"/> <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="ILL-QA-nex"> <size key="itemSize" width="50" height="50"/> <size key="headerReferenceSize" width="0.0" height="0.0"/> <size key="footerReferenceSize" width="0.0" height="0.0"/> <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/> </collectionViewFlowLayout> <cells> <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="cell" id="NTl-75-34J"> <rect key="frame" x="0.0" y="0.0" width="50" height="50"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center"> <rect key="frame" x="0.0" y="0.0" width="50" height="50"/> <autoresizingMask key="autoresizingMask"/> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/> </collectionViewCell> </cells> </collectionView> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> <constraints> <constraint firstItem="StH-xe-9BK" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="RD1-j0-nbz"/> <constraint firstItem="StH-xe-9BK" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" id="SMe-NI-E7C"/> <constraint firstItem="StH-xe-9BK" firstAttribute="bottom" secondItem="wfy-db-euE" secondAttribute="top" id="hxb-pd-z2C"/> <constraint firstAttribute="trailing" secondItem="StH-xe-9BK" secondAttribute="trailing" id="zgF-i5-4fX"/> </constraints> </view> <connections> <outlet property="collectionView" destination="StH-xe-9BK" id="eU8-eE-LXc"/> </connections> </viewController> <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/> </objects> <point key="canvasLocation" x="706" y="586"/> </scene> </scenes> </document> 

结果在不同的iPhone上