Swift Grouped Messages: Changing Bubble Color and Alignment (Ep 2)

One important feature of the chat messages is the option to change the background color depending on incoming vs outgoing status. Today's lesson will show you how to do this as well as align our chat messages to the left and right side of the screen. Enjoy.

Podcasts Course

Intermediate Training Core Data

Instagram Firebase Course

Facebook Group

Completed Source Code

[na_you_mess_am]

I am grateful to have as my tutor. I was never too good in the classroom, at least I have found something I am passionate about.

[ayon]

Each content you put on the channel, it amazes me to be honest 👍

[sraldous]

Another great video. The tip about refactoring the cellForRow code into the custom tableViewCell class is great, I'm refactoring some code in my own projects to do that now!

[nikhilnangia]

Thank you so much brian for becoming my much needed senior !

[piyushsharma]

Thanks Brian, such a helpful video, saved lot of time in building chat bubbles.

[abraarmalick]

You are an amazing teacher, Brian. Apt video for my project !

[duongdinhhong]

Just love your simple EqualOrLess constraint that does the trick :))

[johnrm]

On iMac keyboards without Home, End or Page Up or Page Down keys try fn key combos: fn+right arrow for End and fn+left arrow for Home and fn+up arrow for Page Up and fn+down arrow for Page Down.

[zeeshanahmed]

Hi Brian.Hope you are doing great..i really admire your videos they are seriously a good source for knowledge.
Kindly make a series on firebase on creating some complex data structures and solving queries.Thanks please keep it up

[OmarAli-iytw]

Awesome work as always Brian! Will we see how to make the tableview inverted (starts from the bottom and scrolls up) like a typical chat?

[MrFerFrassia]

First, great video, Brian. I learn a lot from your series.
I have one note though, should you like to read it:
20:20 it'd be clearer and cleaner to not use that if and those global variables.

Do this instead, in init:
leadingConstraint.isActive = chatMessage.incoming
trailingConstraint.isActive = !leadingConstraint.isActive

[chudq]

Nice. Can you provide video on undo/redo manager?

[gregorywlsn]

Brian, did you know how to make the UI like whatsApp chat bubble? That means, if the message text is short then the time and message text will be in same row, and if the message is long then the time label will be on the next line.

[tigraniskandaryan]

Hi, Brian. Thanks for a great tutorial. However, I have a question: In your tutorial you add a property for a message inside the table view cell subclass. But doesn't this violate the MVC pattern? I mean, UITableViewCell is a subclass UIView and it should have no idea about the model. The data source methods should be the only way we should provide information to our table view about a model. Wouldn't it be better if we just check the boolean value there?
In that case we follow the pattern better.

[mramakrishnareddy]

Hey Brian thank you so much for the videos, Can you please insert the attachments and media files along with the text message like whatsapp.

[manojarul]

Please how to set the textfield and Keyboard handling and send button ? ... upload the video or gitHub code.. please upload the file

[AStranger]

Hi,

instead of the if else at the end you could simple write:

leadingConstraint.isActive = chatMessage.isIncoming
trailingConstraint.isActive = !chatMessage.isIncoming

[arindamsantra]

Sir Can you please make video on collection view inside tableview cell.

[sachinarora]

Wonder heightForRow delegate not need here because of anchor tags. Anyway, am always learned new things with your tutorials. Can you please add how to put little arrows with chat bubbles too according to incoming or outgoing messages. Thanks

[maitrungduc]

Hi Brian, when adding more item to textMessages (to make the tableview long enough) and try scrolling, we'll receive warning:

Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.

Do you have any idea?