Swift: FB Messenger – How to create Chat Bubbles (Ep 5)

hey what is up you guys welcome back to the channel hope you guys are doing well and also hope you guys are looking forward to learning a little bit more about iOS development here and today we are going to be looking at how to build the nice little text bubbles that you see inside of a lot of chat applications out there and specifically we’re going to be looking at the facebook chat messenger application right here okay so let’s go ahead and look into this simulator that I have right here and I want to show you what we want to build so let me just tab into this app I have so far so it’s kind of like the final product that we want to build and create and notice how see when I click on the Steve Jobs right here we have a lot of these text bubbles and they have varying sizes and varying widths and height height values and that’s pretty much how most of the chat applicants behave out on the app store so I want to actually show you guys the magic behind building out a UI layout like this and to show you guys how to actually write the code I want to go into this application right here and so this code that we have inside of this this project we’ve built in a couple of the past video of this videos of this series and this is probably part five of the series and if you want to get caught up please feel free to click down below in the links in the description otherwise you should also be able to follow this guide or this video because it’s pretty straightforward and the logic to create the text bubbles don’t really concern but we’re not really concerned about how to set up this project to this point so basically if we go to chat log controller we have a UI question view controller and we have a chat log message cell that contains a text viewer here and then we add it using some constraints that span left edge right edge and bottom to top edge and doing that we get these nice little text views inside of our cells and that’s pretty much it the question of you register is this chat log message cell with a cell ID and then it does the usual D queuing magic here lastly we have the size 4 index path returning a height of 100 which is height of this cell and a view width of the entire question of you with all right now having said all that I want to use this chat log controller as the starting point for this project here to show you some of the magic that occurs behind laying out text bubbles like that the first thing I want to do is to make this a little easier for you guys to understand because there is a bit of math going on and I want to show you guys what the math is a little bit easier by creating multi-line text and I’m going to go ahead and go into this friends control helper set up data method to change what this line says in this line size so instead of a hello ru I’m going to add a pen to this string by saying hope you are having a good morning for this text action with three lines of the text so I’m going to say are you interested in buy an Apple device we have a wide variety of Apple devices that will suit your needs please make your purchase with us that’s what that text says I’m going to run this application now to make sure that the changes that I’ve put in this file actually show up inside of this question view and to make things a little bit more interesting I’m going to go back to chat log controller instead of a size of 16 for the font of message text me once you get to 18 to make things a little bit bigger and hopefully it wraps more lines of text pretty good so now the next thing I want to do is I want to change the background color of this cell it was a UI color light gray color and run that so the actual color doesn’t change until I change the

textview background color so background color equals UI color dot clear color basically you don’t see the light gray until I do this see textview textview dot background okay that and now that I’ve changed the text views background color to clear we’ll be able to see the actual gray that shows through that textview so pretty good now the next thing I want to do is I want to allocate enough height for these two rows of above here I want to make this estimated calculation of the height just to make sure we have enough height for the text so we go into cell size for item at index path and we go ahead and make this estimated calculation like this first we need to do a safe unwrapping of the actual text inside of these rows by doing this if let message text equals messages so that’s the array of messages that is powering this collection view here and we’ll use a question mark the next path item which will get the actual message and text to get the text out that message and text is a property that is on this message object there that’s part of our core data set up that we did earlier and here is the bit of magic so let s tomato frame equals in a string and we use string message text now in a strings we have this very very cool method called bounding wreckless size that gives us the estimated frame now for size here we’ll say see each size make new frame dot with always a very large arbitrary value of 1000 here and publicise into this first parameter next we specify options equals gesturing drawing options like that uses font leading union with uses mind fragment origin so that gives us some of the options necessary to calculate an estimated frame let’s now specify that as options and in here we’ll say and its font at Renee this is UI font system font of size 18 and essentially it’s this font for the textview here the context is almost always going to be new cool now that we have the estimated frame we can specify return CG size make view frame width and use this estimated frame dot height so remember science from item and expand it gives us the row height of this entire row so that’s looking closer to what we want and I will fix this by just adding 20 to give a little bit more vertical space for the row and having them 20 we now get doesn’t no space for each one of these cells here to wrap the text and that’s pretty good pretty good now the next thing I want to do is I want to actually change this bubble so that it is kind of an arbitrary with of 250 there and so this is wrapping the entire with the cell so I’m going to change it to just use 250 of the the available cell width so in order to do that properly I need to change this size here for this sm8 frame to 250 and then that will give me enough height to get 250 with pixels of text so if I click on there turns out it is taller now which is good that is assuming we have a thinner text view and I want to actually now change the text view frame to be 250 so let’s go to cell for item and xpath hopefully this will become a little bit clearer once I show you guys what this is going to do so I’m going to do cell that message frame equals something and that is going to be based of this calculation here so let’s actually get this estimated frame here by copying a basic remove this last return line set that frame down here and this will be C c/g wrecked make 0 0 for the top left coordinate so with is the e tricky part

we’ll use 250 and high it will be estimated frame that height and we use the plus 20 value so I’m going to take what we did down there and we can run this however is not going to work it just yet because we are using these constraints here so we remove these constraints it’ll now work properly perhaps you’ll figure out why but moving removing those constraints is enough to get this to be cut off at width of 250 pixels so similar to this plus 20 here if I add roughly 16 pixels to this width here you’ll notice that it gives us enough space to you wrap the entire text without being cut off at the very bottom that’s pretty good now the next thing I want to do is to actually create this bubble that is behind the text right so I’m going to create that bubble inside of chat log message cell hope you guys are still with me let’s do text bubble bu is a UID let’s create all this stuff in code little bit faster than doing the storyboards and we’ll do text actually equals UI view do dot background color let me say very light white color by doing this you’re point nine five one let’s turn the view like that and close this block off by Brent Brent now I make sure to add this text bubble view above this line here and then we should be fine so we haven’t specified any constraints or recs for this text bulb yet that means that it will not show up and we’ll fix that by going in here and using text bubble movie and we use the exact same frame we use for the message text view ah thirsty okay so now that we have this text bubble view with this white color there I can just get rid of this light gray color on the right side and run that again we will see just the text and then the text bubble view behind it so that’s pretty good pretty good and I want to achieve this rounded corner for the bubble by simply going to the layer that corner radius is 15 and to get the corner rated corner radius to show have a set mass to bounce to true basically allows the view the need to clip the unnecessary pixels off of the frame so this is a rounded corner right there let’s nice I notice how the left edge here is kind of hugging a little bit too tightly into the left bounds so I’m going to increase the I want to change the x value of the textview right here so let’s change the x value by eight and when we do that we also need to add eight pixels to the width of the text book view behind it so having done those two small modifications we get a little bit more breathing room on the left and we get breathing room on the right as well okay and the final bit of modification to this text box here it’s actually use the width of the text as the width of the bubble right so one thing I didn’t go over earlier is that when we get this estimator frame from this calculation here it actually gives us not only the the estimated height down here it also gives us the estimated width so you estimate it frame width right there and estimate it right with right there we get only the necessary with to cover the text like that so that is nice it’s just enough to cover a good morning and notice this is a little bit shorter than this bottom one right here but it good pretty good now let’s see I want to show you guys how to add this image view on the bottom right there and we do that by going to chat log message cell here and we’ll do let profile image you see is the unit image view again we

are creating all this in code hopefully you guys are used to that by now image view content mode so content mode equals scale aspect fill and return image video like that Brent Brent close out this block here and aspects Phil just make sure that we keep the aspect ratio nice and correct so now that we have this image profile imagery let’s add it to the stub view let’s type you hierarchy I just doing that let get some utilizing over here and I’m going to add this on to the cell by using constraints so constraints will format here and we’ll just use a left edge like that be 0 30 for 30 with pixels and here we use this profile image view okay and for the horizontal constraints we’ll use or vertical constraints we use similarly V 0 30 height pixels and pin it to the bottom like this with this pipe at the right finally we use profile image view again just to illustrate where that image you will land will use profile image view background color is a color of red cool cool not too bad everything’s pretty straightforward I think of course I think that because I’m writing it and we get those image view on the bottom left there and I want to set the image to the Steve Jobs image there and I do that by going into this bit of code for self ride on my next path and I can actually set or unwrap the profile image name equals this very similar bit here and we do that that and C dot friend that profile image name and we get the profile image name unwrapped safely like so let me just sell that for about imagery image equals now image name profile image name I’m into that I’m running the application we get the image inside of that little red bullocks down there and I want to finally change the corner radius by doing layer quarter quarter radius 15 and also doing the maths two bounds see energy mass to balance true and we can get the circular corner of the Steve Jobs block so basically 15 is just half of 30 that’s how you get this nice perfect circle like so and next I want to move this text block probably like 40 pixels to the right person and before I do that I want to bump the image view roughly 8 pixels to the right okay pretty good and see okay this is now 8 pixels to the right of the left edge and we can bump this message text me frame roughly 40 pixels to the right by adding 40 on the x-coordinate and 40 for the actual text bubble let’s see what we get now and that was pretty good we can even push this a little bit further with let’s say 48 it’s 48 if we eat I think that gives us just enough space for the text bubble it’s pretty good good and notice how this is kind of hugging snuggly to the top of this nav bar there and we fix that by going into this method here so type in question feed and type in inset and we get this method here and we use return UI edge in sets make of eight zero zero zero that’ll give us eight pixels for each one of these sections here because we only have one we get eight pixels right there so that looks pretty good let me just check these other chat logs there okay not too bad let me just bring this down here bump that size up just a little bit and show

you guys what this looks like alright that’s pretty close to what this guy looks like and yeah alright so that’s pretty much all I wanted to talk about today for the next video I’m hoping to show you guys two things here two things that are interesting so the first interesting bit is this blue text bubble and I want to show you guys how to outline it to the right here and notice how this row doesn’t have the image of you so we’ll be doing that you know pretty soon and also if we have enough time I want to start you guys how to include this view here that is a section header and it groups the text or the messages it started a chat log based on the day of these these messages that is a little bit more complicated but hopefully we’ll get to that pretty soon as well and go back here and that’s pretty much it I hope you guys enjoyed the video and make sure to like it if you do the project and the code that you see behind there is available down in the description below as well if you want to go ahead and download that and run it that is also very helpful for for you to learn exactly what the code should look like so that’s it and hopefully you guys will subscribe to the channel as well a lot of people are actually subscribing thank you all for the support and nice things that you guys have been leaving down in the comments below really helpful really appreciate it gives me really good way to gauge you are actually enjoying the content yeah enjoy date and goodbye