How To Use Facebook Layout in a UICollectionView to Build a Group Video Chat

Talk with more people at the same time, from all around the world

Eric Giannini
Jul 22, 2019 · 4 min read
Photo by Maria Shanina on Unsplash

Agora is developing real-time, multi-party video chat technology that utilizes a Software-Defined Real-Time Network.

The SD RTN optimizes routing algorithmically to provide statistically unparalleled low-latency, elastic, nearly faultless communication, especially for mobile devices.

Mobile, however, is a reflection of the ‘telephone’; a design centered on connecting one caller with another.

Anytime a multiple-member call is made, multiple problems arise — the power of CPUs in phones and tablets is typically lower, their screen sizes vary, and the wireless network connection they operate on fluctuate wildly.

Multiple Members of a Conversation on a Single Screen

UICollectionView

UICollectionView in iOS with Swift 5 enables developers to handle multiple callers on a single screen, queuing or dequeuing callers as required according to the iOS SDKs own device member memory management.

Cells adapt to both their number, as well as the size of the device screen, automatically.


Facebook Layout

In your implementation you will use a popular open-source project called Collection View Layout; a library with a set of custom flow layouts for iOS, imitating general data grid approaches for mobile apps.

The library calls this FacebookStyleFlowLayout.

Facebook layout with UICollectionView for multiple-member calling

Setup

To expedite this process, download the view controller file contents first.

  1. Add a constant for AppID to the AppDelegate for convenience.
  2. Add collection-view-layout to your Podfile before updating.
  3. Open the .xcworkspace file.
  4. Make sure that permissions for microphone and camera are enabled.

With setup out of the way, implement the collection view.

For the sake of brevity, create your own storyboard as it is fairly simple anyway. If you refuse to fiddle with Interface Builder, you can copy and paste the storyboard from the source code at the end.


View Controller and UICollectionView

@IBOutlet weak var collectionView: UICollectionView! {
didSet {
}
}

In your didSet function, create a constant of type ContentDynamicLayout, assigning its value to FacebookStyleFlowLayout.

let contentFlowLayout: ContentDynamicLayout = FacebookStyleFlowLayout

Assign the contentFlowLayout‘s delegate to self and configure the contentPadding, cellsPadding, contentAlign features:

Lastly, make sure you set the collectionViewLayout's property to contentFlowLayout:

collectionView.collectionViewLayout = contentFlowLayout

UICollectionViewDataSource

This is a contract where the UICollectionViewDataSource guarantees to deliver cells if the view controller implements the numberOfItemsInSection and cellForItemAt methods.

Inside numberOfItemsInSection, you return the uIds array:

print("Returning", uIds.count)
return uIds.count

Inside cellForItemAt, you set uid to uIds[indexPath.row] and videoCanvas.view to cell.contentView:

Finally, you return the cell as you’ve already configured it to display a ‘remove video canvas’:

return cell

ContentDynamicLayoutDelegate

extension ViewController: ContentDynamicLayoutDelegate
func cellSize(indexPath: IndexPath) -> CGSize {
return cellsSizes[indexPath.row]
}
}

Properties

Set a property called cellsSizes as an array of type CGSize which will be initialized empty:

var cellsSizes: [CGSize] = []

joinChannel


Delegate

uIds.append(Int64(uid))
collectionView.reloadData()

Inside didOfflineOfUid, append and reload after checking the index:

if let index = uIds.firstIndex(where: { $0 == did }) {
uIds.remove(at: index)
collectionView.reloadData()
}

After programming the collection view’s methods, ensure outlets and actions are properly connected to your view controller.


Running the App

If you experienced errors or would like to check your code with the finished product, here is a link to the source code for the view controller file.

The entire app is also hosted on GitHub.

ViewController’s entire source code.

Testing

If it is enabled, you can run your app, as well as add a member, from this GitHub repository.


Conclusion

If you’ve found that Collection View Layouts doesn’t work for the interface you’re creating for multi-member calling, try to create a completely customized implementation of UICollectionView.

Better Programming

Advice for programmers.

Eric Giannini

Written by

🙌 Working with Swift, Kotlin, the world wide web

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade