ChatLayout

Table of contents

• About
• Features
  • What ChatLayout doesn't provide (And why it is good)
• Requirements
• Example
• Installation
• Contributing
• Todo
  • AboutUICollectionViewDiffableDataSource
  • About Supplementary Views
  • About Texture
  • About animation
  • About sticky headers or footers
• License
• Articles
• Sponsor this project
• Author

About

ChatLayout is an alternative solution toMessageKit. It uses customUICollectionViewLayout to provide you full control over the presentation as well as all the tools available inUICollectionView.

Features

• Supports dynamic cells and supplementary view sizes.
• Animated insertion/deletion/reloading/moving of the items.
• Keeps content of the last visible item at the top or bottom of theUICollectionView during updates.
• Provides tools for precise scrolling to the required item.
• Shipped with generic container views to simplify the custom items implementation.

What ChatLayout doesn't provide (And why it is good)

ChatLayout is the customUICollectionViewLayout, so:

• You don't have to extend or override any customUIViewController orUICollectionView. You need to instantiate themyourself and use them the way you like.

• ChatLayout does not rely on modifiedUICollectionViewFlowLayout nor does it rotate yourUICollectionView upside-down.This means you can use your views as if they would be regular cells withinUICollectionView. You can benefit from using thedefaultUIKit implementations ofadjustedContextInsets (and others) because your view controller is a normal viewcontroller without any hacks or tricks.

• ChatLayout doesn't require you to calculate all the cell sizes before it renders them on the screen. You can fully useauto-layout constraints and rely on the fact that the correct size will be calculated in the runtime. However,ChatLayoutas any otherUICollectionViewLayout will benefit from you providing the estimated sizes of your cells as it will allow youto get better performance.

• ChatLayout doesn't enforce you to use any specific data model. You can store your messages and updateUICollectionViewthe way you like. The only thing you need is to respect the natural boundaries thatUICollectionView have and correctlyimplementUICollectionViewDataSource. The Example app usesDifferenceKit toprocess changes in the data model.

• ChatLayout doesn't enforce you to use any specificUIViews to create your collection cells. You can create them the wayyou like. It can be anyUICollectionViewCell orUICollectionReusableView. There are some genericUIViews bundled withthe library that may help you to build them faster. However, you do not have to use them.

• ChatLayout doesn't handle the keyboard appearance behavior. You have to implementthat yourself from scratch or use the library you are already using in your project. It gives you full control over thekeyboard presentation. The only thing you have to do is to update thecontentInsets of yourUICollectionView.

• ChatLayout doesn't provide you any input control. You can use any one you like and customise it the way you like.The Example app for instance usesInputBarAccessoryView.

Example

To run the example project, clone the repo, and runpod install from the Example directory first.

Installation

ChatLayout is available throughCocoaPods,CarthageandSwiftPM. See theExample app for the usage details.

If you are using cocoapods you can install the whole package usingpod 'ChatLayout'. If you do not need the additionalcomponents provided, you can install only the layout itself usingpod 'ChatLayout/Core'

Contributing

ChatLayout is in active development, and we welcome your contributions.

If you’d like to contribute to this repo, pleasereadthe contribution guidelines.

Todo

• Improve the test coverage

AboutUICollectionViewDiffableDataSource

ChatLayout can process any update commands that you send to yourUICollectionView, so you can useUICollectionViewDiffableDataSource as well. But you have to keep in mind thatUICollectionViewDiffableDataSourcedoes not support the reloading of cells out of the box if you are relying on theHashable protocol implementation.It will delete the changed cell and insert the new version of said cell. That may lead to strange animations onthe screen, especially when the reloaded cell changes its size. In order to get the best behaviour of the update animationI would strongly recommend you rely onDifferenceKit or a similar libraryto process the model changes. The Example app does it as well.

About Supplementary Views

It can be tempting and it may look like it is the right way to go, butdo not use supplementary views to decorate yourmessages or groups of them.UICollectionView processes them in a different order:UICollectionViewCells first andonly after switches toUICollectionReusableViews. You will most likely face some unexpected behaviour during the animation.

About Texture

ChatLayout can be used together withTexture to improve the auto-layout performance.But keep in mind that it's default wrapper is hardcoded to work exclusively withUICollectionViewFlowLayout.See issue.You will have to implementChatLayoutDelegate yourself and propagate the node size manually.

About animation

If you see a strange or unexpected animation during the updates, check your data model andthe commands you send to theUICollectionView'sperformBatchUpdates. Especialy if you are using some diffing algorithms likeDifferenceKit.It is very possible that you are sending delete/insert commands when you expect to see reload. The easiest way to check it is by addingprint("\(updateItems)") intoChatLayout.prepare(forCollectionViewUpdates:) method.ChatLayout doesn't know what you expected to see.It just processes your changes according to the commands it has received.

About sticky headers or footers

Sticky headers or footers are not supported byChatLayout but your contributions are welcome.

License

ChatLayout is distributed underthe MIT license.

ChatLayout is provided for your use, free-of-charge, on an as-is basis. We make no guarantees, promises orapologies.Caveat developer.

Articles

English:

• My COVID-19 lockdown project or how I started to dig into a custom UICollectionViewLayout to get a ChatLayout

Russian:

• Мой Covid-19 lockdown проект, или, как я полез в кастомный UICollectionViewLayout и получил ChatLayout

Sponsor this project

If you find this library useful, and especially if you are using it in production, please consider sponsoring thisprojecthere. I work onChatLayout in my spare time, and your sponsorship wouldhelp me to continue developing and contributing to the Open Source community. Your support will enable me to dedicatemore time and resources to this project, ensuring that it remains up-to-date and relevant for years to come.

Thank you for your consideration!

Author

Evgeny Kazaev,[email protected]. Twitterekazaev

I am happy to answer any questions you may have. Just create anew issue.