#UICollectionViewController

[jacob-cs]

original source : https://stackoverflow.com/questions/29773787/collectionview-controller-vs-collectionview

UICollectionViewController 와 UICollectionView 의 차이점

UICollectionView inherits from UIScrollView (just another UIView)

UICollectionViewController inherits from UIViewController.. and it implements some protocols.. like UICollectionViewDelegate and UICollectionViewDataSource .. it means everything is already done for you.. and you just have to use it.. but as everything is already done for you.. you may not be able to do some stuff.. like resizing your collectionView ..

if you want full control I recommend you to use your own UIViewController.. and add a UICollectionView as a subview.. so you can place it wherever you want and resize it.. don't forget to implement UICollectionView protocols for delegation and datasource :)

[goodorbetterprogrammer]

HackingWithSwift Day 42/43/44 - Project 10

Now get to be introduce to UICollectionViewController.

Overall more or less the same as objective-c. And the author introduce new thing, fatalError() - it will crash the app and print out the error message the developer code but it’s something needed as well if one just want to terminate the app if certain things didn’t go right and maybe no point for the user to continue it.

From the tutorial , maybe need to add 1 more thing is estimate size on at the storyboard there need to change to “None” instead of automatic or else the cell size setting won’t work

Then follow by UIImagePickerController, which needs UIImagePickerControllerDelegate and UINavigationControllerDelegate as well.

If we need to access the image later on, or want to store it in app private storage, what we can do is get a file path, and write it to the path. For example:

let paths = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask) let imageName = UUID().uuidString let imagePath = paths[0].appendingPathComponent(imageName) if let jpegData = image.jpegData(compressionQuality: 0.8) { try? jpegData.write(to: imagePath) }

Overall that’s all for this project.

[arthurknopper]

Delete Items from Collection View Controller iOS Tutorial

Items inside a Collection View can be manipulated by modifying the connected model data. In this tutorial items will be removed from the Collection View Controller. This tutorial is made with Xcode 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single View App.

For product name, use IOSDeleteItemsCollectionViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Storyboard Setup

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the View Controller and go to the Editor Menu. Select Embed In -> Navigation Controller.

Select the Navigation Controller and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

Select the Collection View Cell and go to the Attribute inspector. In the View section change the Background color to Light Gray Color.

Select The Collection View and go the Size inspector. In the Collection View section change the Cell Size to a width and height of 100 points.

Drag a Label from the Object Library and place it on the Center of the Collection View Cell.

Drag another Label to the right-bottom of the cell. This label will be needed for the state of the selection during edit mode, when selected a checkmark will be displayed. Select the label and go to the Attribute inspector. In the Label section delete the label text so the label will contain an empty string.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

Next, drag a Bar Button Item to the right side of the Navigation Bar. Select the Bar Button Item and go to the Attributes inspector. In the Bar Button Item section change the System Item to Trash. Also in the Bar Item section deselect the Enabled checkbox. The trash button will only be displayed when an item is selected in edit mode.

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS -> Source -> Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

Custom Collection View Cell

Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionViewCell and make it a subclass of UICollectionViewCell.

Go back to Main.storyboard and select the Collection View Cell. Go to the Identity inspector and in the Custom Class section change the class to CollectionViewCell.

Outlet an Action Connections

Select the Assistant Editor and make sure the CollectionViewCell.swift file is visible. Ctrl and drag from the Title Label to the CollectionViewCell class  and create the following Outlet.

Ctrl and drag from the Checkmark Label to the CollectionViewCell class  and create the following Outlet.

Make sure the CollectionViewController.swift file is visible. Ctrl and drag from the trash bar button item to the CollectionViewController class  and create the following Outlet.

Ctrl and drag from the trash bar button item to the CollectionViewController class  and create the following Action.

Code Implementation 

Go to CollectionViewController.swift file and enter the following line.

var modelData = ["One","Two","Three","Four","Five"]

Since the Reuse Identifier is defined in the Storyboard, the following line can be removed in the CollectionViewController class

// Register cell classes self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return modelData.count } override func collectionView(_ collectionView: UICollectionView, cell override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { // 3 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! CollectionViewCell cell.titleLabel.text = modelData[indexPath.row] return cell }

By default the CollectionView only has 1 section.

The number of cells is equal to the number of items in the modelData array.

The text of the label is set to the current index of the modelData array.

Change the viewDidLoad method to

override func viewDidLoad() { super.viewDidLoad() navigationItem.leftBarButtonItem = editButtonItem }

The Edit Bar Button Item is added to the Navigation Bar. This can be used to toggle to Edit mode. Build and Run the project.

Implement Editing Mode

Go to the CollectionViewCell.swift file and add two methods.

// 1 var isInEditingMode: Bool = false { didSet { checkmarkLabel.isHidden = !isInEditingMode } } // 2 override var isSelected: Bool { didSet { if isInEditingMode { checkmarkLabel.text = isSelected ? "✓" : "" } } }

A Property Observer is created which will toggle the visibility of the checkmark label according if the coillection view controller is in editing mode or not.

Another property observer is created which will display/remove the checkmark when the cell is selected or not.

Next, go to the CollectionViewController.swift file and add the setEditing(_:animated) method

override func setEditing(_ editing: Bool, animated: Bool) { super.setEditing(editing, animated: animated) collectionView.allowsMultipleSelection = editing let indexPaths = collectionView.indexPathsForVisibleItems for indexPath in indexPaths { let cell = collectionView.cellForItem(at: indexPath) as! CollectionViewCell cell.isInEditingMode = editing } }

This method will check if a cell is in editing mode. Next add the following two methods.

// 1 override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { if !isEditing { deleteButton.isEnabled = false } else { deleteButton.isEnabled = true } } // 2 override func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) { if let selectedItems = collectionView.indexPathsForSelectedItems, selectedItems.count == 0 { deleteButton.isEnabled = false } }

If a cell is selected the trash icon is displayed, otherwise it remains hidden

if an cell is deselected and there are no other cells selected the trash icon is hidden.

Add the following line before the return cell line in the collectionView(_:didSelectItemAt) method

cell.isInEditingMode = isEditing

Again, this will check if a cell is in editing mode. Everything is now in place for the edtitng fucntionality. Now the actual deletion can be implemented.

Delete Items

Implement the deleteItem(_:) Action method

@IBAction func deleteItem(_ sender: Any) { if let selectedCells = collectionView.indexPathsForSelectedItems { // 1 let items = selectedCells.map { $0.item }.sorted().reversed() // 2 for item in items { modelData.remove(at: item) } // 3 collectionView.deleteItems(at: selectedCells) deleteButton.isEnabled = false } }

The selected cells will be reversed and sorted so the items with the highest index will be removed first.

the items will be removed from the modelData array

The selected cells will be deleted from the Collection View Controller and the trash icon will be disabled.

Run Project

Build and Run the project and select the Edit Button. Select a few cells and press the Trash button to remove the items.

You can download the source code of the IOSDeleteItemsCollectionViewTutorial at the ioscreator repository on Github

Related Articles

[iyarpage]

Firebase Tutorial: Real-time Chat

Update note: Ryan Ackermann updated this tutorial to iOS 12, Swift 4.2, Xcode 10, MessageKit, and Cloud Firestore. Tom Elliott wrote the original tutorial. You can safely ignore the warnings about updating to Swift 4.2 since MessageKit is not yet updated.

It seems like every major app out there has a chat feature — and yours should be no different! This Firebase tutorial will show you how.

However, creating a chat tool can seem like a daunting task. There’s no native UIKit controls designed specifically for chat, and you’ll need a server to coordinate the messages and conversations between users.

Fortunately, there are some great frameworks out there to help you: Firebase lets you synchronize real time data without writing a line of server code, while MessageKit gives you a messaging UI that’s on par with the native Messages app.

In this Firebase tutorial, you’ll build RWRC (Ray Wenderlich Relay Chat) — an anonymous chat application. If you’ve used IRC or Slack, this sort of application should already be familiar to you.

Along the way, you’ll learn how to do the following:

Set up the Firebase SDK and MessageKit with CocoaPods.

Synchronize data in real time with the Cloud Firestore.

Authenticate anonymously with Firebase.

Leverage MessageKit for a complete chat UI.

Create multiple message threads.

Use Firebase Storage to send pictures.

Getting Started

Use the Download Materials button at the top or bottom of this tutorial to download the starter project. To get you started the project contains a simple dummy login screen, where the credentials are saved to User Defaults.

The starter project has a few helper classes that handle sending data to Firebase and saving data to User Defaults. Feel free to browse the starter project a bit to get familiar with the code.

In the starter project you’ll find ChannelsViewController.swift which listens to changes in a Firebase Firestore database and updates a table view whenever the user adds a new channel. You’ll build a similar implementation for displaying chat messages instead of channels.

You’ll use CocoaPods to install both the Firebase SDK and MessageKit. If you’re new to CocoaPods, check out our Cocoapods with Swift tutorial to get up and running.

Open Terminal at the project’s folder location and run the following command to install your dependencies:

pod install

This may take a few minutes, but once the packages have installed, open RWRC.xcworkspace in Xcode. Before you can run the app, you’ll need to configure Firebase.

If you’re new to Firebase you’ll need to create an account. Don’t worry — this is easy and totally free.

Note: For a detailed walkthrough on setting up Firebase, see the Getting Started with Firebase tutorial.

Create a Firebase Account

Head to the Firebase signup site, create an account, and then create a new Firebase project.

In Xcode, click on the target and change the Bundle Identifier to any value you like, and select a Team in the Signing section.

Follow Steps 1 and 2 of the instructions to add Firebase to an iOS app, starting here:

Next, enter in the app’s bundle ID into the form, after which you will download and add the GoogleService-Info.plist config file to your project under the Supporting Files group as shown in the Firebase instructions. This .plist file contains the configuration information needed for Firebase integration with your app.

Warning: Do only Steps 1 and 2 of the instructions. The rest is already done in the starter project and your app will crash if you duplicate the steps.

Now build and run the app. You should see the following:

Enabling Anonymous Authentication

Firebase lets users log in through email or social accounts, but it can also authenticate users anonymously, giving you a unique identifier for a user without knowing any information about them.

To set up anonymous authentication, open the Firebase App Dashboard, select the Authentication option on the left, click Set Up Sign-In Method, then select the Anonymous option, switch Enable so that it’s on, then click Save.

Just like that, you’ve enabled super secret stealth mode! Okay, so it’s really just anonymous authentication, but hey — it’s still cool. :]

Super secret stealth mode achieved!

Logging In

Open LoginViewController.swift and add the following underneath import UIKit:

import FirebaseAuth

To log in to chat, the app will need to authenticate using the Firebase authentication service. Add the following code to the bottom of signIn:

Auth.auth().signInAnonymously(completion: nil)

That line of code from the FirebaseAuth framework will post the Notification.Name.AuthStateDidChange notification that AppController is listening for. Once the notification is fired AppController will update the root view controller for you.

Build and run your app, enter a display name and tap Get Started.

Once the user signs in, they navigate to the ChannelsViewController, whose job it is to show the user a list of current channels and allow creating new channels. The table has a single section to display all available channels. There is a toolbar at the bottom with a sign out button, a label displaying your name, and an add button.

Firebase Data Structure

Before you dive into sending messages in realtime, take a moment and think about the data structure first.

Cloud Firestore is a NoSQL JSON data store. Essentially, everything in the Cloud Firestore is a JSON object, and each key of this JSON object has its own URL.

Here’s a sample of how your data could look as a JSON object:

{ "channels": [{ "MOuL1sdbrnh0x1zGuXn7": { // channel id "name": "Puppies", "thread": [{ "3a6Fo5rrUcBqhUJcLsP0": { // message id "content": "Wow, that's so cute!", "created": "May 12, 2018 at 10:44:11 PM UTC-5", "senderID": "YCrPJF3shzWSHagmr0Zl2WZFBgT2", "senderName": "naturaln0va", }, "4LXlVnWnoqyZEuKiiubh": { // message id "content": "Yes he is.", "created": "May 12, 2018 at 10:40:05 PM UTC-5", "senderID": "f84PFeGl2yaqUDaSiTVeqe9gHfD3", "senderName": "lumberjack16", }, }] }, }] }

Cloud Firestore favors a denormalized data structure, so it’s okay to include senderId and senderName for each message item. A denormalized data structure means you’ll duplicate a lot of data, but the upside is faster data retrieval. Tradeoffs — we haz them! :]

Chat Interface Setup

MessageKit is a souped-up UICollectionViewController that’s customized for chat, so you don’t have to create your own! :]

In this section of the tutorial, you’ll focus on four things:

Handling input from the message bar.

Creating message data.

Styling message bubbles.

Removing avatar support.

Almost everything you’ll need to do requires that you override methods. MessageKit provides the MessagesDisplayDelegate, MessagesLayoutDelegate, and MessagesDataSource protocols, so you only need to override the default implementations.

Note: For more information on customizing and working with MessagesViewController, check out the full the documentation here.

Open ChatViewController.swift and, at the top of ChatViewController, define the following properties:

private var messages: [Message] = [] private var messageListener: ListenerRegistration?

These properties are similar to those added to the channels view controller. The messages array is the data model and the listener handles clean up.

Now you can start configuring the data source. Above the MessageInputBarDelegate section, add the following:

// MARK: - MessagesDataSource extension ChatViewController: MessagesDataSource { // 1 func currentSender() -> Sender { return Sender(id: user.uid, displayName: AppSettings.displayName) } // 2 func numberOfMessages(in messagesCollectionView: MessagesCollectionView) -> Int { return messages.count } // 3 func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageType { return messages[indexPath.section] } // 4 func cellTopLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? { let name = message.sender.displayName return NSAttributedString( string: name, attributes: [ .font: UIFont.preferredFont(forTextStyle: .caption1), .foregroundColor: UIColor(white: 0.3, alpha: 1) ] ) } }

There’s a bit going on here:

A sender is a simple struct that has an id and name property. You create an instance of a sender from the anonymous Firebase user id and the chosen display name.

The number of messages in the collection view will be equal to the local array of messages.

Your Message model object conforms to MessageType so you can just return the message for the given index path.

The last method returns the attributed text for the name above each message bubble. You can modify the text you’re returning here to your liking, but these are some good defaults.

Build and run the app, add a channel named Cooking and then navigate to it. It should now look like:

So far, so good. Next, you’ll need to implement a few more delegates before you start sending messages.

Setting Up the Display and Layout Delegates

Now that you’ve seen your new awesome chat UI, you probably want to start displaying messages. But before you do that, you have to take care of a few more things.

First, you’ll fine tune some layout parameters from the MessagesLayoutDelegate. Add the following section below the MessagesDisplayDelegate section:

// MARK: - MessagesLayoutDelegate extension ChatViewController: MessagesLayoutDelegate { func avatarSize(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGSize { // 1 return .zero } func footerViewSize(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGSize { // 2 return CGSize(width: 0, height: 8) } func heightForLocation(message: MessageType, at indexPath: IndexPath, with maxWidth: CGFloat, in messagesCollectionView: MessagesCollectionView) -> CGFloat { // 3 return 0 } }

Here’s the break down:

Returning zero for the avatar size will hide it from the view.

Adding a little padding on the bottom of each message will help the readability of the chat.

At the time of writing, MessageKit doesn’t have a default implementation for the height of a location message. Since you won’t be sending a location message in this tutorial, return zero as the default.

The messages displayed in the collection view are simply images with text overlaid. There are two types of messages: outgoing and incoming. Outgoing messages are displayed to the right and incoming messages on the left.

In ChatViewController, replace the MessagesDisplayDelegate extension with the following:

extension ChatViewController: MessagesDisplayDelegate { func backgroundColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor { // 1 return isFromCurrentSender(message: message) ? .primary : .incomingMessage } func shouldDisplayHeader(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> Bool { // 2 return false } func messageStyle(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageStyle { let corner: MessageStyle.TailCorner = isFromCurrentSender(message: message) ? .bottomRight : .bottomLeft // 3 return .bubbleTail(corner, .curved) } }

Taking the above code step-by-step:

For the given message, you check and see if it’s from the current sender. If it is, you return the app’s primary green color; if not, you return a muted gray color. MessageKit uses this color when creating the background image for the message.

You return false to remove the header from each message. You can use this to display thread specific information, such as a timestamp.

Finally, based on who sent the message, you choose a corner for the tail of the message bubble.

To tie this all together, add the following to the bottom of viewDidLoad():

messageInputBar.delegate = self messagesCollectionView.messagesDataSource = self messagesCollectionView.messagesLayoutDelegate = self messagesCollectionView.messagesDisplayDelegate = self

Check that your app builds and you can navigate to one of your channels

Believe it or not, that’s all it takes to configure a MessagesViewController subclass to display messages! Well, it would be more exciting to see some messages, wouldn’t it?

Time to get this conversation started!

Creating Messages

Create the following method below viewDidLoad() in ChatViewController:

// MARK: - Helpers private func insertNewMessage(_ message: Message) { guard !messages.contains(message) else { return } messages.append(message) messages.sort() let isLatestMessage = messages.index(of: message) == (messages.count - 1) let shouldScrollToBottom = messagesCollectionView.isAtBottom && isLatestMessage messagesCollectionView.reloadData() if shouldScrollToBottom { DispatchQueue.main.async { self.messagesCollectionView.scrollToBottom(animated: true) } } }

This helper method is similar to the one that’s in ChannelsViewController. It makes sure the messages array doesn’t already contain the message, then adds it to the collection view. Then, if the new message is the latest and the collection view is at the bottom, scroll to reveal the new message.

Add a test message by overriding viewDidAppear(_:):

override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) let testMessage = Message(user: user, content: "I love pizza, what is your favorite kind?") insertNewMessage(testMessage) }

Build and run the app; you’ll see your message appear in the conversation view:

Boom — that’s one nice looking chat app! Time to make it work (for real) with Firebase.

Sending Messages

First, delete viewDidAppear(_:) to remove the test message in ChatViewController and add the following properties at the top of the file:

private let db = Firestore.firestore() private var reference: CollectionReference?

At the top of viewDidLoad add the following:

guard let id = channel.id else { navigationController?.popViewController(animated: true) return } reference = db.collection(["channels", id, "thread"].joined(separator: "/"))

The reference property is the point in the database where the messages are stored. The id property on the channel is optional because you might not yet have synced the channel. If the channel doesn’t exist in Firestore yet messages cannot be sent, so returning to the channel list makes the most sense.

Next add the following method to the top of the Helpers section:

private func save(_ message: Message) { reference?.addDocument(data: message.representation) { error in if let e = error { print("Error sending message: \(e.localizedDescription)") return } self.messagesCollectionView.scrollToBottom() } }

This method uses the reference that was just setup. The addDocument method on the reference takes a dictionary with the keys and values that represent that data. The message data struct implements DatabaseRepresentation, which defines a dictionary property to fill out.

Open Message.swift and examine the implementation of DatabaseRepresentation. As you can see, it maps its properties to readable keys and only sets the content of the message if there is no download URL.

Back in ChatViewController.swift, add the following delegate method inside the MessageInputBarDelegate extension:

func messageInputBar(_ inputBar: MessageInputBar, didPressSendButtonWith text: String) { // 1 let message = Message(user: user, content: text) // 2 save(message) // 3 inputBar.inputTextView.text = "" }

Here’s what’s going on:

Create a message from the contents of the message bar and the current user.

Save the message to Cloud Firestore using save(_:).

Clear the message bar’s input field after you send the message.

Build and run; open up your Firebase App Dashboard and click on the Database tab. Select a channel, then send a message in the app and you should see the messages appear in the dashboard in real time:

Note: The first time you view the database on the console, it will prompt you to select a database type. For this tutorial, you’re using Cloud Firestore. After clicking the Create Database button, select the test mode option. For a real world setup, you’ll want to configure security rules for Firestore. You can read more about security rules here.

High five! You’re saving messages to Cloud Firestore like a pro. The messages don’t appear on the screen, but you’ll take care of that next.

Synchronizing the Data Source

Add the following to below insertNewMessage(_:) in ChatViewController:

private func handleDocumentChange(_ change: DocumentChange) { guard let message = Message(document: change.document) else { return } switch change.type { case .added: insertNewMessage(message) default: break } }

This is very similar to how ChannelsViewController observes new database changes. For brevity, the only change type you handle in the switch statement is add.

Next, add the following code below the reference initialization in viewDidLoad():

messageListener = reference?.addSnapshotListener { querySnapshot, error in guard let snapshot = querySnapshot else { print("Error listening for channel updates: \(error?.localizedDescription ?? "No error")") return } snapshot.documentChanges.forEach { change in self.handleDocumentChange(change) } }

Firestore calls this snapshot listener whenever there is a change to the database.

To clean things up add a deinit towards the top of the file:

deinit { messageListener?.remove() }

Build and run your app; you should see any messages sent earlier along with any new ones you enter:

Congrats! You have a real time chat app! Now it’s time to add one final finishing touch.

Sending Images

To send images, you’re going to follow mostly the same principle as sending text with one key difference. Rather than storing the image data directly with the message, you’ll use Firebase Storage, which is better suited to storing large files like audio, video or images.

To start, you need to add the Photos import to ChatViewController.swift:

import Photos

Add the following above the Helpers section:

// MARK: - Actions @objc private func cameraButtonPressed() { let picker = UIImagePickerController() picker.delegate = self if UIImagePickerController.isSourceTypeAvailable(.camera) { picker.sourceType = .camera } else { picker.sourceType = .photoLibrary } present(picker, animated: true, completion: nil) }

This method will present an image picker controller to allow the user to select an image.

Next, add the following to viewDidLoad():

// 1 let cameraItem = InputBarButtonItem(type: .system) cameraItem.tintColor = .primary cameraItem.image = #imageLiteral(resourceName: "camera") // 2 cameraItem.addTarget( self, action: #selector(cameraButtonPressed), for: .primaryActionTriggered ) cameraItem.setSize(CGSize(width: 60, height: 30), animated: false) messageInputBar.leftStackView.alignment = .center messageInputBar.setLeftStackViewWidthConstant(to: 50, animated: false) // 3 messageInputBar.setStackViewItems([cameraItem], forStack: .left, animated: false)

Going through this:

Create a new InputBarButtonItem with a tint color and an image.

Connect the new button to cameraButtonPressed().

Lastly, add the item to the left side of the message bar.

Sending a photo message is a little different then sending a plain text message. Saving a photo to Firebase Storage returns a URL, but this may take a couple of seconds — perhaps longer, if the network connection is poor. Rather than blocking the user interface during this time, which will make your app feel slow, you’ll start sending the message and disable the camera message bar item.

Add the following properties at the top of ChatViewController:

private var isSendingPhoto = false { didSet { DispatchQueue.main.async { self.messageInputBar.leftStackViewItems.forEach { item in item.isEnabled = !self.isSendingPhoto } } } } private let storage = Storage.storage().reference()

and add this method to the bottom of the Helpers section:

private func uploadImage(_ image: UIImage, to channel: Channel, completion: @escaping (URL?) -> Void) { guard let channelID = channel.id else { completion(nil) return } guard let scaledImage = image.scaledToSafeUploadSize, let data = scaledImage.jpegData(compressionQuality: 0.4) else { completion(nil) return } let metadata = StorageMetadata() metadata.contentType = "image/jpeg" let imageName = [UUID().uuidString, String(Date().timeIntervalSince1970)].joined() storage.child(channelID).child(imageName).putData(data, metadata: metadata) { meta, error in completion(meta?.downloadURL()) } }

The isSendingPhoto property takes care of updating the camera item when it changes and the storage property is a reference to the root of Firebase Storage. uploadImage(_:to:completion:) uploads an image to the specified channel in the Firebase Storage.

Below uploadImage(_:to:completion:), add:

private func sendPhoto(_ image: UIImage) { isSendingPhoto = true uploadImage(image, to: channel) { [weak self] url in guard let `self` = self else { return } self.isSendingPhoto = false guard let url = url else { return } var message = Message(user: self.user, image: image) message.downloadURL = url self.save(message) self.messagesCollectionView.scrollToBottom() } }

This method takes care of updating the isSendingPhoto property to update the UI. Once the photo upload completes and the URL to that photo is returned, save a new message with that photo URL to the database.

Next, to use sendPhoto(_:), add the following image picker delegate methods to the UIImagePickerControllerDelegate extension:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) { picker.dismiss(animated: true, completion: nil) // 1 if let asset = info[.phAsset] as? PHAsset { let size = CGSize(width: 500, height: 500) PHImageManager.default().requestImage( for: asset, targetSize: size, contentMode: .aspectFit, options: nil) { result, info in guard let image = result else { return } self.sendPhoto(image) } // 2 } else if let image = info[.originalImage] as? UIImage { sendPhoto(image) } } func imagePickerControllerDidCancel(_ picker: UIImagePickerController) { picker.dismiss(animated: true, completion: nil) }

These two methods handle the cases when the user either selects an image or cancels the selection process. When selecting an image, the user can either get one from the photo library or take an image directly with the camera.

Here’s what this does:

If the user selected an asset, the selected image needs to be downloaded from iCloud. Request it at a fixed size. Once it’s successfully retrieved, send it.

If there is an original image in the info dictionary, send that. You don’t need to worry about the original image being too large here because the storage helper handles resizing the image for you. Have a look at UIImage+Additions.swift to see how the resizing is done.

Nearly there! You’ve now set up your app to save the image data to Firebase Storage and save the URL to the message data, but you’ve not yet updated the app to display those photos. Time to fix that.

Get started by adding the following to the bottom of the Helpers section:

private func downloadImage(at url: URL, completion: @escaping (UIImage?) -> Void) { let ref = Storage.storage().reference(forURL: url.absoluteString) let megaByte = Int64(1 * 1024 * 1024) ref.getData(maxSize: megaByte) { data, error in guard let imageData = data else { completion(nil) return } completion(UIImage(data: imageData)) } }

This method asynchronously downloads an image at the specified path from Firebase Storage.

Next, change the guard statement from a constant to a variable in the handleDocumentChange(_:) method:

guard var message = Message(document: change.document) else { return }

Then, in handleDocumentChange(_:), replace the content of the .added case with the following:

if let url = message.downloadURL { downloadImage(at: url) { [weak self] image in guard let self = self else { return } guard let image = image else { return } message.image = image self.insertNewMessage(message) } } else { insertNewMessage(message) }

Note: You’ll need to open the Firebase Console and enable Storage. To do this, first select storage on the left, click Get Started, then choose default security rules.

Build and run the app; tap on the little camera icon and send a photo message in your chat. Notice how the camera icon is disabled when your app is saving the photo data to Firebase Storage.

Kaboom! You just made a big, bad, real time, photo and text sending chat app. Go grab yourself your favorite beverage, you earned it!

Where to Go From Here?

Use the Download Materials button at the top or bottom of this tutorial to download the completed project.

You now know the basics of Cloud Firestore and MessageKit, but there’s plenty more you can do, including one-to-one messaging, social authentication, and avatar display.

To take this app even further, you could take a look at the Firebase iOS documentation. You can also take a look at our 22 part video course on Beginning Firebase!

I hope you’ve enjoyed this Firebase tutorial; if you have any questions feel free to leave them in the non-anonymous yet avatar-enabled discussion below! :]

The post Firebase Tutorial: Real-time Chat appeared first on Ray Wenderlich.

Firebase Tutorial: Real-time Chat published first on https://medium.com/@koresol

[arthurknopper]

Add Items to Collection View Controller iOS Tutorial

Items inside a Collection View can be manipulated by modifying the connected model data. In this tutorial a new item will be added to the Collection View Controller. This tutorial is made with Xcode 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single View App.

For product name, use IOSAddItemsCollectionViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Storyboard Setup

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the View Controller and go to the Editor Menu. Select Embed In -> Navigation Controller.

Select the Navigation Controller and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

Select The Collection View and go the Size inspector. In the Collection View section change the Cell Size to a width and height of 100 points.

Drag a Label from the Object Library and place it on the Center of the Collection View Cell.

Select the Label and go to the Attribute inspector. In the View section set the Tag value to 100.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS -> Source -> Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

Code Implementation 

Go to CollectionViewController.swift file and enter the following line.

var modelData = ["Oliver","Harry","George","Jack","Noah"]

Since the Reuse Identifier is defined in the Storyboard, the following line can be removed in the CollectionViewController class

// Register cell classes self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return modelData.count } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) // Configure the cell // 3 if let label = cell.viewWithTag(100) as? UILabel { label.text = modelData[indexPath.row] } return cell }

By default the CollectionView only has 1 section.

The number of cells is equal to the number of items in the modelData array.

The text of the label is set to the current index of the modelData array.

Build and Run the project.

Add Items

Go to the Storyboard and drag a Right Bar Button Item to right side of the Navigation Bar of the Collection View Controller. Select the Bar Button Item and go to the Attributes inspector. Change the Custom Item Value to Add in the Bar Button Item section.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl-click and drag from the Bar Button Item to the CollectionViewController class and create the following action

implement the addItem(_:) method

@IBAction func addItem(_ sender: Any) { let name = "John" modelData.append(name) let indexPath = IndexPath(row: modelData.count - 1, section: 0) collectionView.insertItems(at: [indexPath]) }

An item with name “John” will be appended to the modellData array and a new Collection View Cell will be displayed at the end of the other cells.

Run Project

Build and Run the project and select the Add Item Button. Each time a cell with the name of “John” will be added.

You can download the source code of the IOSAddItemsCollectionViewTutorial at the ioscreator repository on Github

Related Articles

[arthurknopper]

Pass Data Between View Controllers iOS Tutorial

Data can be passed between view controllers using a segue. In this tutorial a number from a collection view cell will be passed to a label on a new view controller. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSPassDataViewControllerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the View Controller and go to the Editor Menu. Select Embed In -> Navigation Controller.

Select the Navigation Controller and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

Select The Collection View and go the Size inspector. In the Collection View section change the Cell Size to a width and height of 100 points.

Drag a Label from the Object Library and place it on the Center of the Collection View Cell.

Select the Label and go to the Attribute inspector. In the View section set the Tag value to 100.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS -> Source -> Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

Go to CollectionViewController.swift file and enter the following line.

let modelData = ["1","2","3","4","5","6","7","8","9"]

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return modelData.count } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) // Configure the cell // 3 if let label = cell.viewWithTag(100) as? UILabel { label.text = modelData[indexPath.row] } return cell }

By default the CollectionView only has 1 section.

The number of cells is equal to the number of items in the modelData array.

The text of the label is set to the current index of the modelData array.

Build and Run the project.

The number value of the collection view cell will be passed to a new View Controller. Open the Storyboard and drag this View Controller to the right side of the Collection View Controller. Drag a Label onto the View Controller.

The data will be passed using a segue. Drag from the Collection View Cell to the View Controller and select the Show segue.

Add a new file to the Project. select iOS -> Source -> Cocoa Touch Class. Name it DetailViewController and make it a subclass of ViewController. Go to the Storyboard, select the View Controller and go the Identity Inspector. In the Custom Class section change the class to DetailViewController.

Select the Assistant Editor and make sure the DetailViewController.swift is visible. Ctrl and drag from the Text View to the DetailViewController class and create the following Outlet

Go to the DetailViewController.swift file and add the following property.

var selectedNumber: String!

Change the viewDidLoad() method to

override func viewDidLoad() { super.viewDidLoad() detailLabel.text = selectedNumber }

Go back to the CollectionViewController.swift file and add the prepare(for:sender:) method

override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if let destination = segue.destination as? DetailViewController, let index = collectionView.indexPathsForSelectedItems?.first { destination.selectedNumber = modelData[index.row] } }

This method notifies the view controller that a segue is about to be performed. Inside the selected cell the corresponding number from the modeldata array will be assigned to the selecedNumber property in the DetailViewController class.

Build and Run the project and select a cell. the number will be passed through and displayed on the Detail View Controller.

You can download the source code of the IOSPassDataViewControllerTutorial at the ioscreator repository on Github

[arthurknopper]

Collection View iOS Tutorial

The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will display a number of colored cells in a collection view. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCollectionViewControllerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the Collection ViewController and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

A grid of cells will be displayed containing a red or blue color. To determine which color the cell will be, a property of type boolean will be declared in the CollectionViewController class. Go to CollectionViewController.swift file and enter the following line.

var cellColor = true

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return 100 } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) // Configure the cell // 3 cell.backgroundColor = cellColor ? UIColor.red : UIColor.blue cellColor = !cellColor return cell }

By default the CollectionView only has 1 section.

There will be 100 cells created in the Collection View

If the cellColor Boolean is true, the cellcolor is red, otherwise the cellcolor is blue.

Build and Run the project.

 You can download the source code of the IOSCollectionViewControllerTutorial at the ioscreator repository on Github

[arthurknopper]

Reorder Collection View Cells iOS Tutorial

IOS 9 introduces reordering of Collection View Cells. This is enabled by default, selecting a cell with a long press enables the user to reorder the cells. All that's needed is to update the order of the item in the data model. In this tutorial some cells containing alphabet letters will be displayed, these cells can be easily reordered. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSReorderCollectionViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and delete the View Controller. Drag a Collection View Controller from the Object Library to the Storyboard. Select the Collection View Controller and navigate to the Editor  menu and select Embed in -> Navigation Controller. Select the Navigation Controller and go to the Attribute Inspector. In the View Controller section select the "Is Initial View Controller" checkbox.

Double-click the Navigation Bar in the Collection View Controller and change the title to "Alphabet". Select the Collection View and go to the Size inspector. In the Collection View Section set the Cell size to a width and height of 100 points. Also change the Min Spacing to 1 for cells and lines. This will decrease the spacing between the cells.

Select the Collection View Controller Cell and go to the Attributes inspector. In the View section change the background to green.

Go to the Attribute Inspector and in the Collection Reusable View section set the Identifier to "Cell"

Drag a Label from the Object Library and place it in the center of the Collection View Cell. Double-click the label and enter the letter "A". The storyboard should now look like this.

Since the View Controller is deleted in the Storyboard the ViewController.swift file can also be deleted. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class AlphabetViewController and make it a subclass of UICollectionViewController.

Next, create a class for the Collection View Cell. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class AlphabetCell and make it a subclass of UICollectionViewCell.

These newly created classes need to connect to the objects in the Storyboard. Select the Collection View Controller and go to the Identity Inspector. Change the custom Class to AlphabetViewController.

Select the Collection View Cell and go to the Identity inspector. Change the custom Class to AlphabetCell.

Select the Assistant Editor and make sure the AlphabetCell.swift file is visible. Ctrl-drag from the Label to the AlphabetCell class  and create the following Outlet.

Go to the AlphabetViewController.swift class. Navigate to the viewDidLoad class and delete the following line. 

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

The reuse identifier is already made in the Interface Builder. so it's not needed anymore. Add a property to store the Alphabet letters

var alphabet = [String]()

Change the viewDidLoad method to

override func viewDidLoad() { super.viewDidLoad() let str: String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" for i in str { alphabet.append(String(i)) } }

Each letter in the alphabet is assigned to the characterArray array. Next, change the predefined Collection View delegate methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 // return the number of sections return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 // return the number of items return alphabet.count } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { // 3 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! AlphabetCell // Configure the cell cell.alphabetLabel.text = alphabet[indexPath.row] return cell }

The Collection View contains only one section

26 items will be created in the Collection View

Each cell will contain a letter from the alphabet.

When reordering the cells the content needs to be changed. This can be done in the CollectionView:moveItemAtIndexPath:toIndexPath method.

override func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) { let temp = alphabet.remove(at: sourceIndexPath.item) alphabet.insert(temp, at: destinationIndexPath.item) }

When the cell is moved to a new postion, the original index position in the array is removed and the new index position Is inserted in the array.

Build and Run the project, long-press a cell and reorder it.

You can download the source code of the IOSReorderCollectionViewTutorial at the ioscreator repository on Github.

[arthurknopper]

Custom Collection View Cell iOS Tutorial

The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will create a custom collection view cell by adding an image to it. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCustomCollectionViewCellTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

We need an image to display in our Collection View Cells. so download the image and add it to the Assets folder.

Go to the Storyboard and delete the View Controller. Drag a Collection View Controller from the Object Library to the Storyboard. Select the Collection View Controller and go to the Attribute Inspector. In the View Controller section select the "Is Initial View Controller" checkbox.

Select the Collection View and go to the Size Inspector. In the Collection View Section set the Cell size to a width and height of 50 points.

Drag an Image View from the Object Library inside the Collection View Cell and make sure the height and width is also 50 points. Select the Image View and go to the Attribute Inspector. In the View Section set the Mode to "Aspect Fit"

The Storyboard should look like this.

Since the View Controller is deleted in the Storyboard the ViewController.swift file can also be deleted. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionViewController and make it a subclass of UICollectionViewController.

Go back to the Storyboard, select the Collection View Controller and go to the Identity Inspector. Change the custom Class to CollectionViewController.

Go to the CollectionViewController.swift file and in the viewDidLoad method delete the following line.

self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

We will set the reuse Identifier in Interface Builder, so this line isn't needed. Go back to the Storyboard and select the Collection View Cell. Go to the Attribute Inspector and in the Collection Reusable View section set the Identifier to "Cell"

Next, create a class for the custom Collection View Cell. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionViewCell and make it a subclass of UICollectionViewCell.

Go back to the Storyboard and select the Collection View Cell. Go to the Identity Inspector and in the Custom Class section change the Class to "CollectionViewCell"

Select the Assistant Editor and make sure the CollectionViewCell.swift file is visible. Ctrl and drag from the Image View to the CollectionViewCell class  and create the following Outlet.

Go to CollectionViewController.swift file and add the following property

let myImage = UIImage(named: "Apple_Swift_Logo")

Next we will change the predefined methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return 100 } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { // 3 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell cell.imageView.image = myImage return cell }

The Collection View has only one section

There will be 100 images displayed

First a cell with the type of CollectionViewCell is defined. Then of each cell the image is assigned to the imageView property of the CollectionViewCell class.

Build and Run the project. there will be 100 Swift logos displayed.

You can download the source code of the IOSCustomCollectionViewCellTutorial at the ioscreator repository on Github.

[arthurknopper]

Collection View iOS Tutorial

The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will display a number of colored cells in a collection view. This tutorial is made with Xcode 9 and built for iOS 11.

Open Xcode and create a new Single View App.

For product name, use IOS11CollectionViewControllerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the Collection ViewController and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

A grid of cells will be displayed containing a red or blue color. To determine which color the cell will be, a property of type boolean will be declared in the CollectionViewController class. Go to CollectionViewController.swift file and enter the following line.

var cellColor = true

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return 100 } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) // Configure the cell // 3 cell.backgroundColor = cellColor ? UIColor.red : UIColor.blue cellColor = !cellColor return cell }

By default the CollectionView only has 1 section.

There will be 100 cells created in the Collection View

If the cellColor Boolean is true, the cellcolor is red, otherwise the cellcolor is blue.

Build and Run the project.

 You can download the source code of the IOS11CollectionViewControllerTutorial at the ioscreator repository on Github