Swift: FB Messenger – Chat Bubbles With Tails! (Ep 6)

hey what is up guys welcome back to the channel hope you guys are doing well hope you guys are also ready to finish up on how to create these chat bubble messages inside of our facebook Messenger chat application and today we are going to look at two things so it’s going to head and hop into the iOS simulator here and take a look at our finished product and so notice we have our receiving messages inside of these great bubbles and there’s a text view inside of them and also we have a blue bubble with white text and these are what I’ll be calling deed outgoing sending messages from your chat app so that’s the first thing the second thing here when I address is a question that hey Zeus a doleful sent in the other day and he says could you add a bubble style like that small tail triangle that most chat applications have sorry for asking more things lol but probably it is a piece of cake for you so hey Zeus thank you for that question and yes we are going to learn how to build these little small tails at the end of this chat bubble and the beginning of this great chat bubble here I just want to do that at the end of this tutorial here let’s string that down drive that over there and so I’m gonna go back to this chat application FB messenger that we’ve been kind of writing up so far and you’re going to get all caught up make sure to click the link down below in the description for some of the previous videos and having said that I’m going to run this application run and see what we have so far click into Steve Jobs we get three messages in gray and they don’t have a tail which is exactly where we are at and so here’s the thing I want to introduce a property on my message object and basically each one of these derivatives contain a message object and that property I want to add is a boolean property called is sender so let’s go to this Facebook accordion file and go to that message entity and hit that ad call this is sender like that and for the type is going to be a boolean a basically I’m going to use this boolean attribute here to differentiate between a an incoming receiving message and then a blue outgoing sending message so that’s what that property is going to be used for and let us show you what happens unfortunately after you run the application when you make this small change so take a look it crashes and it says the model used to open the store is incompatible with the one used to create the story essentially when you make a change to core data like that you have to read redo some things here so basically I’m going to stop the app remove like so and then re running the application regenerates some of the core data structure files and then your application is fine again and that’s how you solve that error the next thing you want to do is you want to regenerate these core data files right here I notice how we don’t have that is a sender attribute here and essentially regenerating will fix that problem for us so let’s go to iOS core data click on that check that box hit message ok next and then hit create and now your file will contain this is sender and it’s number property that we’ll use for the blue text bubble and now I want to go to friends controller helper and I want to create a fourth message inside of this collection view right under here alright so to make it easier for you guys so you kind of follow this video I want to take all this code I just kind of just cut and paste it inside this little section here and I probably this a private function create Steve messages and all that code that I have that creates all these messages are now inside of this little private invested method block here and this will actually be create Steve messages with context and context is an ns-managed object context and basically I’m going to call that in this method here use context context is something that we get off of app delegate from this core data template project that we’ve created in the very beginning

OOP and let’s see so when I’m command click on there and like I was saying before will create this a fourth message and this is my response message here copy and paste all that and paste that in there and this is my response to this question of are you interested in buying an Apple device I was like yes totally looking to buy and I phone seven I know you guys are too if you guys wait till September hopefully you guys will get your hands on one and I’ll be waiting let’s run so I’m going to click into Steve Jobs and then we get this fourth method message here which I’ll be using as my outgoing blue setting message for the Steve Jobs chat dialogue and now I’m going to go into chat lock controller and this is the file that contains all of the modifications for each one of these rows here and if we look at cell for item at index path we see these two lines here and these basically these frame lines actually modify where these gray bubbles land and where the text view also lands within this cell here now I want to make this gray bubble move to the right here and also make this gray blue so basically I want to detect when a sending message basically a sending message is a boolean value of true for a center or a false value okay now let’s go back to see friends controller helper so like I was saying earlier I want to set this is sender property on message here so if we come and click in to create message with text we get to this method and I want to actually say a message that is a sender remember this is an NS number property and we want to use this bolt so what do we put in this full value here basically we will use something that is kind of new a nifty trick that you can do the Swift and it’s called an optional parameter and I’ll just type it out here so it is centered boom and notice if I just leave it like this all these methods are complaining that this is Center a parameter is that being sent in so if we just say equals false we will default this parameter to false and then now we will say is then you’re like that is then out every time we want to just set the is sender to true we just do is sender true and now we have an optional parameter inside of this method that we just set is sender to a true value like that so hopefully that is not too tricky and it’s a really cool thing that Swift allows us to do and objective-c is kind of old and doesn’t allow us to do nifty nifty things like that let’s go back to chatlog controller and go back to this self right up and XPath method and we can actually look for this is sender property like this so let’s get a handle on the message object for the row like that message is the next path item and I can already tell that we should clean up some of this code so because we are good programmers and we have good discipline we will remove these unnecessary unwrapped like that and then we will do that so message message and what do we get there okay so it’s complaining about the limiting right so message dot friend is what we want and then now we have a handle a message right here so I’m going to say this all right without talking too much about the logic I’m just going to type it up and hopefully it will make sense so whenever we do an if check like this we have to unwrap these properties and then I want to put a bang there cut that in there and then I was no type of else here so basically I run the application and all the first the three messages

inside of this chat log here something there basically the is sender boolean is always false so it enters inside of these two lines here and when we are sending the message it’s entering this line here that’s why you don’t see the message because these frames are not being set on the UI components and now what I can do is if I copy and paste this and modify a couple of these frame properties we’ll get the blue bubble or at the gray bubble right now on the right edge of the screen and what I mean is I want to go into the cell dot text bubble view frame here and I want to do something with the x value of this blue or this gray bubble and basically I would do estimator frame down with – well actually this is June view frame dot with – estimated right so we want to take the entire views with and then we’ll subtract it by this amount basically it will take us here and then subtract it here basically we’ll get somewhere around here as a starting point and then the bubble will extend itself out like that okay I promise you that is what we’re going to get so I run the application and click into Steve Jobs here and then we get the bubble that goes from right there and and somewhat over here ish on the outside bounds of this similar and that’s because we need to take into account these two values for the the width of the frame and what I mean is I want to subtract the 16 subtract 8 and if we do that we get the bubble touching the bounds of the app so we see the bubble kind of ends so you know just bump this up bring it down here the bubble kind of ends right there so perfectly at the edge of the screen and I want to fix the textview frame as well so basically I’m taking this 48 value I’m gonna take it away and just copy this inside of that visor let’s do that and get rid of the 8 as well and then I have to subtract 16 from that value so if we subtract 16 we will get something for the textview and we get this which lands right inside of the bubble which is pretty good basically instead of hugging the edge on the right side I want to push it over roughly 8 pixels so for each one of these frames I will subtract 8 from neck and then put a basement there pretty all subtract 8 as well it’s pretty good so I run now we get eight on this side and then everything is sitting pretty well actually I probably want to add another eight pixels on the right so let’s just make this 16 right there and make this a 16 guy and also I want to do this this hiding of this icon right there and I’m going to do that in each one of these blocks so so that profile image in that hidden is let’s see false for whenever the message is a receiving message and sell that profile image view of that hidden is true when it is a sending message here so I’m going to comment this hey I’ll see you out going sending message for that Oh click and there we go so the last remaining thing is to change this gray belt a gray bubble into a blue bowl so cell dot text bubble you that background color is UI color and the RGB values will be 0 1 37 over 2 3 5 2 49 over 255 1 and we also have to set the right bubble value up here so background color was UI color white 0.95 and 1 for the gray color C and we’ll get the simulator click into the app here and then we get this blue value let’s drink this guy one more time raise the corner in the final value that

we haven’t set is this text absolute message text view and we set the text color to a white color like this icon and we’ll copy and paste that is that down there and this will be black color for outgoing messages so it’s important that you set these values here for both both outgoing and incoming messages and that’s because when these cells get recycled you actually have to reset all these properties basically this cell right here could be used up here as well these that keep track of all of your properties appropriately that’s pretty good and that takes care of the first part of this video hope you guys are still with me the second part is to get these little message tails inside of these bubbles and this is actually somewhat trickier and let’s see what is the easiest way to illustrate how to do this so the first thing we needs to do is we actually have to use images for these tails here and the idea is for these these actual text bubble views we actually use a background image for the views entirely and just ignore the background color and let’s see the idea is to import an image first so I’m going to go into finder and I’m going to import these two bubbles so basically I’m going to pull down there and we have a a blue bubble here that has a right tail and then a grayble the left tail and they’re both black so we’re going to modify the color the tint color in code okay and now that we have our assets imported let’s go back to our chatlog controller and so the idea here is I want to add that image inside of our text bubble view which is this this blue bowl and so let me go back to our application here so I’m going to add that image inside of this blue bubble here now so let’s do the great bubble first okay oh so this is going to be a little tricky and I’m going to save this here let see Oh image of you I am interview like that this will just be an image view that we create in code image see image um a equals UI image and image C named city why is the not coming up so UI image name like that okay Oh so we’ll say great and okay return imagery and then we just print friend get that all closed off and build we should be fine okay so the idea here is I want to add a sub you onto text bubble you so text bubble you add sub you trigger to bubble imagery like that and I’m going to add constraints on to this bubble view so I’m going to expand that from left edge to right look at that this will be bubble imagery let’s copy and paste that I’m going to do the same thing with the top to bottom constraints and now I’m going to run this piece of code and show you what we have which might be a little ugly for now you see how it just appears kind of ugly like that so the trick here is we want to use image with seed resizable image with cap and sets like that and the idea is we provide it with UI edge and sets make and we get this so we actually needs to unwrap this right that and if we specify properties of 22 I believe it’s 22 true maybe 26 22 26 I believe are some of the values and see okay so I’m gonna run that and I explain to you what these values to really really quickly don’t like that you see how this bubble now has a black bubble but it’s no longer being stretched because we’ve provided it with a

resizable image that has these insect values so where does 22 and 26 come from and I’m going to show you by going to photoshop and here is the actual image right there and notice how if I go into 20 to 26 and that will be 24 and 52 so if I go to actually 2244 and 52 is roughly here so it’s sitting at this point here and basically we’re using this point as the starting point of the tiling of the innards of the the actual background image so basically it’s saying use this as a left edge and then use this as the bottom left and this is the top right and this is the bottom right visually that’s the idea of what this code is doing and then it just stretches that image so that all the corners are being used properly and then it expands the middle like so okay and the next thing we need to do is we need to use this image to which with rendering mode like that and then this needs to be always template and if we set this if we use this image with rendering mode we can actually set the image views tint color to UI color dot that’s maybe a white 0.95 and one and run that that this right here allows me to just simply modify the tint color of that bubble and then it appears kind of like gray like that so that’s great right here it’s also great there you can’t really see it so I’m going to turn off the text bubbles background color it’s actually right here so the better thing to do is to use the value of nine zero and that will change the the actual bubble part and just put that in the middle and notice how the the image background is actually this darker right here it has a tail on the left and then this one has a tail on the right so I’m going to fix this so that it wraps the text a little bit better so let’s go into this section here and I’m going to push this so I’m going to do this here – see sixteen perhaps twelve some subtract 12 from the actual text bubble view that’s going to push it 12 pixels to the left and as we would expect so 12 is to the left and I’m going to expand it by maybe talk pixels to the right so actually that looks like it’s a little too much though let’s make it 10 pixels and then for the width I’m going to add 10 like that and the bubble is basically going to have just enough space to wrap the text so that gives it a little bit of room and I’m going to make it even wider by adding more pixels to the doubled so I just added six more pixels to the width and click in there again and then now we have a little bit more breathing room along the right side and also I feel like I want to push the top edge to up a little bit and the bottom edge further down so I’m go to this value here let’s pulse by negative four and plus four foot height and I want to see what that gives us inside of our row so that gives me a little bit more space on the top and bottom looks pretty good and actually wants to add perhaps six down there and run and then see what we get so click that and now we get this nice wrapping of the text view inside of our receiving text bubbles so there we go that was kind of tricky but you see how the math actually you just have to kind of guess at what the math values should be and they are kind of dependent on what your actual Photoshop image

sizing is so this is just a arbitrary size and these values work for this arbitrary size right here okay so let’s disable the background color right here and then I’m going to disable it right there essentially what that gives us is just the bubble absolutely means just disable here as well let’s go back to this right there and then we can now run the application and see what we get so we get just the text bubble and has a nice tail on the back and then now we can change the tint color based on this is sender of boolean value and I’m going to do this here so dot two to the bubble image view of tint color is this actual color here and then I’m going to copy paste that and when it’s an outgoing message I’m going to change that tint color to this actual blue color right here so I run that and we’ll see what we get so we get this great value but let’s see so we also give this blue bubble here but we actually need to use a different image for this blue bubble I’m going to do that by let’s see going to the asset which is blue bubble here let’s go back to chat log controller and hopefully I can do this properly okay did your true so let’s do that quickly here and basically I want to copy and paste of this and every time we are see here okay I want to do something like this word if I’m inside of here I’ll set this to bubble blue like that instead of doing this I’m going to show you how to actually correctly do this so that you don’t mess things up okay and what I mean is I’m going to create these static fields on this chat log message cell up here so to do this I’m going to do the static let gray bubble image equals that okay and then we can do this here so chat we’re going to use chat log message L dot gray the lunge and we just get that there and the idea is I want to do the exact same thing here but instead of using gray bubble I’ll say blue bubble image and this with the PD blew a bubble blue like that and then inside of our cells I want to just change to these images based on these this is this is sender property so we’re gonna do this year we’re going to do cell dot bubble image view dot image is chat message self right bubble image and then we’ll do the same thing here we some blue orange let’s not run that and basically we’re going to have a left tail for a gray receiving message and then your right tail for the blue outgoing message so I’m gonna fix this up basically I’m going to increase I bring some spacing to the left and to the right and we’re gonna do that by going into let’s see text bubble frame and I’m going to subtract let’s see perhaps 10 and for the width I’m going to add 10 and for this value let’s also do the negative 4 and add cs6 right there I’ll give us just the right amount of spacing of light let’s click there and then the final thing we need to do is push this textview over just a little bit let’s go to the message text view and then I’m going to subtract about 8 pixels from the text frame and give us a nice shift in the left direction and there we go so I’m going to add a couple message a couple of messages onto the chat log mine is going to France which will help her here and go back to this block of code and I’m

gonna copy this message here and then he’s going to respond to my message by saying C okay totally understand that you want the new i phone seven but you’ll have to wait until september for the new release sorry but that’s just how Apple likes to do things and let’s run that remember this is a C this is a incoming message from Steve so it’ll appear as prey and let’s just add one more right there so I’m gonna copy this outgoing message and he’s going to say absolutely I’ll just use my gigantic iPhone six-plus until then I’ll run that and that’ll give us a blue bubble and let’s see what that looks like so it looks like that and let’s just bring it back to the middle again and we will drag this up and this looks pretty good I think the facebook Messenger has a little checkbox a blue check box on the bottom right that shows whether or not you’ve I guess looked at the message or something like that and I’m trying to just look at if we have anything missing here so it looks pretty pretty good I think did you do looks good looks good looks good and if we go inside of this here so we get these this unwrapped optional value of null so it crashes here so I’m going to leave that for you guys to fix basically you should check whether or not this sender is is a valid boolean before you unwrap it cool and see so there’s this date here probably not going to go into that so yeah that’s pretty much all this video is going to talk about a lot of interesting concepts like setting our resizable backgrounds and also some interesting math calculations messing with core data having to relaunch core data when you modify attribute properties so a lot of interesting stuff hopefully you like the content in today’s lesson make sure to hit the like button if you do and yet remember this channel is all about learning how to build applications by taking one from the App Store and then break it down reconstructing it piece by piece and you know there’s a lot of things to learn from that so if you want to be part of that community here make sure to hit that subscribe button to get all the updates inside of your YouTube feed that’s about it see you guys next time bye bye