UICollectionView:
*
Basic Swift example of a Collection View
Basic Swift example of a Collection View
suggest changeCreate a new project
It can be just a Single View Application.
Add the code
Create a new Cocoa Touch Class file (File > New > File… > iOS > Cocoa Touch Class). Name it MyCollectionViewCell. This class will hold the outlets for the views that you add to your cell in the storyboard.
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}We will connect this outlet later.
Open ViewController.swift and make sure you have the following content:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.yellowColor() // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}Notes
UICollectionViewDataSourceandUICollectionViewDelegateare the protocols that the collection view follows. You could also add theUICollectionViewDelegateFlowLayoutprotocol to change the size of the views programmatically, but it isn’t necessary.- We are just putting simple strings in our grid, but you could certainly do images later.
Setup the storyboard
Drag a Collection View to the View Controller in your storyboard. You can add constraints to make it fill the parent view if you like.
Make sure that your defaults in the Attribute Inspector are also
- Items: 1
- Layout: Flow
The little box in the top left of the Collection View is a Collection View Cell. We will use it as our prototype cell. Drag a Label into the cell and center it. You can resize the cell borders and add constraints to center the Label if you like.
Write “cell” (without quotes) in the Identifier box of the Attributes Inspector for the Collection View Cell. Note that this is the same value as let reuseIdentifier = "cell" in ViewController.swift.
And in the Identity Inspector for the cell, set the class name to MyCollectionViewCell, our custom class that we made.
Hook up the outlets
- Hook the Label in the collection cell to
myLabelin theMyCollectionViewCellclass. (You can Control-drag.) - Hook the Collection View
delegateanddataSourceto the View Controller. (Right click Collection View in the Document Outline. Then click and drag the plus arrow up to the View Controller.)
Finished
Here is what it looks like after adding constraints to center the Label in the cell and pinning the Collection View to the walls of the parent.
Making Improvements
If you want to make improvements on the appearance, see the original post that this example comes from.
Further study
- A Simple UICollectionView Tutorial
- UICollectionView Tutorial Part 1: Getting Started
- UICollectionView Tutorial Part 2: Reusable Views and Cell Selection
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents
1
UILabel
5
UIButton
10
UITableView
11
Auto Layout
12
UIView
14
MKMapView
15
UIColor
17
CAAnimation
18
UITextView
20
Concurrency
25
UIStackView
26
UIImage
27
UIWebView
28
CALayer
30
NSDate
31
Custom Fonts
34
UIScrollView
35
Localization
37
UITextField
40
iBeacon
41
CLLocation
42
NSURLSession
43
UISwitch
46
UICollectionView
47
PDF Creation
49
NSTimer
50
CGContext
55
FacebookSDK
56
AFNetworking
57
CTCallCenter
61
UIBezierPath
63
UIAppearance
67
Storyboard
69
Fastlane
70
CAShapeLayer
71
WKWebView
73
Categories
77
UIPickerView
78
Dynamic Type
79
NSURL
86
IBOutlets
87
AWS SDK
91
UIDevice
92
CloudKit
93
GameplayKit
96
NSData
98
Deep Linking
100
Core Graphics
101
Segues
102
UIDatePicker
103
NSPredicate
104
EventKit
105
NSBundle
106
SiriKit
110
NSURLConnection
111
StoreKit
112
Code signing
114
Resizing UIImage
117
3D Touch
119
Keychain
122
Block
123
Content Hugging
125
Navigation Bar
136
Graph Coreplot
138
FCM Messaging
140
Custom Keyboard
141
AirDrop
144
UISlider
145
Carthage
146
HealthKit
147
Core SpotLight
148
UI Testing
149
Core Motion
150
QR Code Scanner
151
plist
152
NSInvocation
155
AppDelegate
157
MVVM
158
UIStoryboard
161
MPVolumeView
164
UIPhoenix
166
Simulator
167
BackgroundModes
168
NSArray
169
OpenGL
172
MVP Architecture
173
UIKit Dynamics
175
Core Data
179
MyLayout
180
UIFont
181
Simulator Builds
189
Security
195
UITableViewCell
200
Codable
201
FileHandle
202
NSUserActivity
210
Contributors