Swift: Firebase 3 - How to Fix Image Bubble Sizing (Ep 18)

hey what's up guys welcome back to the channel hope you guys are having a good morning so far let's begin Friday with another episode in our firebase 3 real-time chat application tutorial now the last episode we implement a way to send images to various users in our system so I'm going to show you how that looks like right now and want to talk about how we're going to improve the implementation to not crop the images that we send over so let's look at the similar here in the middle and logged in as John step I can click into Sam Charlie's messages log right here and upon sending an image I'll show you what happens if I send Brianna's image here and it's let me send it off to firebase and the moment that it gets entered in we get Ana notification to update our question view with this image in here so we notice how it's kind of cropped off her head is not showing and perhaps this will be more apparent with John Snow as well so exciting that see how the entire image is not being shown through the entire cell so the implementation I want to show you guys today will actually give us the entire image inside of the cell so if i unlock my phone and come into the chat log for tyrion lanister here you notice how all these images are actually sized properly so for example this is the entire image and this is the entire image and if I send another image perhaps from my moments and we'll send this image here send it gets sent over and we have this right here so that's what that looks like and we want to fix our current application so that the cropping doesn't occur inside of the chat lock controller all right let's begin by moving some things off the screen and moving this to the corner here so we're going to take a look at chat la controller right here and just try to run the application to make sure I'm at the point where I want to start so here we go we get this this and that so how do we actually figure out how to make these images not crop so that we can include the entire image inside of the cell well the first thing we need is to actually send over the image height and the image width along with the image URL when we're using this method called send message with image URL so remember this method gets called whenever we pick the image from the picker we call upload to firebase storage using image eventually when that's done we get the URL of the image and then we send it to firebase database eventually populating it as one of these nodes right here with an image URL so in addition to image URL I'm going to send in something called image width and image height and perhaps to make this a little bit easier to read I'm going to cut this out and paste it to the very end of this values dictionary so having done that I'm going to send also the image width to be something and the image height to be something else so where do I get these two values from right for example when I try to send an image from this picker here if I select this image I actually send it to this method here upload to firebase storage using an image and this is the image and inside of here I want to actually send over an image inside this method as well so I'm going to include a second parameter of image uiimageblock image like this so camera roll let's select this image for now choose and Pam so let's ignore this crash for now and this is the last nail that guy enter we see image with down here and image height as well so with these two values I can figure out how tall these cells really need to be so before we can go into that calculation I want to fix this crash that is currently showing up in the log right here essentially it's saying that the class message is not key value coding compliant for the key image height kind of a cryptic message probably for something against but essentially it means that it's trying to set some kind of property on message called image height so we actually need these two properties like this and s number n n s and s number for image height and width so yeah I don't really like how it's crashing like this and the crashing is sort of unpredictable every time a new property gets entered into one of these nodes so the way to actually fix this is to do something else which is to provide a constructor using a dictionary instead so I'm just going to write this out right now a dictionary constructor a string to any object like so and here we go you just call super init and then we just have to set up some values based on this dictionary for example we can call from ID equals dictionary what's in here from ID and we can just cast it down as a string so this is how this is going to work we have to set up for the rest of these for the rest of these properties but let me just build a project first then you'll see a couple of errors right here and let's look at this second one for now so this one says even it has a comment of saying potential of crashing if keys don't match and that's the current crash that we see it with image height so instead of using this empty constructor let's use the dictionary constructor with the dictionary of this value up here so we can actually remove these two here and if we wanted to clean this up even further perhaps we can cut this and just put it in here like this so don't like having unnecessary lines am i good so that's the first fix to our application now we can fix this as well to use the dictionary a dictionary like that and we can remove this set values for a key Center and we should be good to go so if I run this now I don't think I want to see anything in my app well okay so nothing shows up because if you go back to the message class none of these other properties are being set up so I'm just going to copy a basis perhaps four times like that and then I will get some space for you guys down here and I need these two properties as well so what do I do now so for these couple of string properties I will use text text and to ID which is this and this and I'm going to copy this C three times down and this will be image URL I know that and inside let's see time stamp ways times that time stamp this will be NS number and for image height we need this and that and this will be as NS number and image width will be this and that and this will be NS every so having done all of that the application should no longer crash every time we introduce a new property into our message node so that's pretty easy and our application is now looking somewhat okay I guess but we stopped to fix the issue with the image Heights not being respected inside of that cell so let's go ahead and fix that why don't we so to fix this first thing I want to do is I was established a constant width for all of these images cells and to do that remember inside of chatlog controller so for item at index path there's this line on 254 here where we actually change the bubble with anchored constant to some kind of estimated constant which gives us this estimated with right here for the text so if we actually just say here else if message dot if is URL not equal nil it's going to fall into this else case instead and the reason why it doesn't come in here is because the node for a an image message doesn't actually have text so it'll fall in this down so fall in here if it's an image message so that's the comment and what do we need to do to figure out how to establish a constant width for each one of these images well we can say cell dot bubble with anchor constant equals perhaps some kind of value like 200 is probably okay and we run the application you'll see that the effect that this will have which will push these images like this and so we stop the bug where these images aren't loading properly if I come back here and bring it back we'll get the images to be correct again so we'll fix that bug perhaps a little later as well now to get the height to actually fit the entire image we go to the method called size for item at index path so I'm just doing control 6 to bring up that guy so inside of here we can kind of do the same thing I just check for whatever the image has a text versus an image URL or one of these with height guys so the first thing I want to do is I just want to cut this guy out and I want to get a variable for this so I'm just remove this at first I could say let message equal messages see and xpath died that'll give me this right here so I just need message the variable and so here's what we are going to do down here so if else if message image URL not equal nil we would say height is just some value perhaps one two three or perhaps in one twenty so bring this these image cells will all have a height of one twenty now so to do running running running there we go and this is now 120 so you see how it's already looking better but we don't want to use a constant value like this we actually want to figure out exactly what the height needs to be because all of these images have different heights now to do this we need to figure out what the actual image height and width is and we're going to do that inside of this if statement right here with a unwrapping of if let image width equals message image width like that and we can actually just get the double value or the float value out of it and that is comma image height equals message dot image height so nothing too difficult here and now inside of here we can get the image width and image height so we can access these two variables inside of this if case now how do we figure out how tall this actual height is well if you guys remember in geometry way back in the day you actually we're taught this calculation here if you have two similar rectangles you can figure out the height with this equation of height one let's see let's put a comma here heighten one so H 1 over W 1 equals H 2 over W 2 where each one is the high the first rectangle w1 is the width of the first rectangle and likewise for this right here for the second rectangle this is how you would figure out the height given these three values so if I wanted to solve for H one I'm going to solve for H one or so solve for H one you want to get H 1 equals H 2 divided by W 2 times W 1 so with this calculation I can actually figure out just what the exact height needs to be and I will fill in these values right here so say height which is H 1 is equal to height to which is image height right here see image height and / image width times W 1 so W 1 is actually this 200 value that I use right here so I'm just going to use 200 right now and then we will need to cast this entire calculation as a CG flipped value because height is actually CG you flip so running this you'll see that the calculation for the entire height of our cell so the size for item is used to calculate the height for our cell we get the height to be like this so the reason why these two images are still not correct is because the images or the message note doesn't contain the width and height properties so an easy way of actually resetting everything is to just blow away the user message isn't it and we'll get a look at the start from a blank slate right now so nothing isn't here for Johnson it went to message Sam again Wednesday hello Sam there and I send him an image so let's send him the iqra' image here and sending setting setting and we get this perfect sizing for her image if we want to send another image for example this one right here you'll see that it will not recraft and it's actually shows from the top of her head to the bottom of her sheet sword right there and we sent another image we will get you know exactly what we need so that looks pretty darn good huh okay pretty awesome now what is it that I want to show you guys now well let's see here so going into chat log controller I kind of want to just remove the console for now any last episode something I didn't mention while I was coding was the fact that I copied and pasted a lot of this code that sends a message into firebase database and what I want to do is I want to refactor some good so the code that I copied at basically it was this entire bit and I pasted it inside of this method called send message with image URL so to make this easier to follow I'm just going to cut all that code and paste it directly underneath the copied method here so for some of you guys that are kind of starting out as iOS developers or programmers you definitely do not want to copy and paste all this code because the moment you modify one thing here you're probably gonna have to modify it down here as well so keeping track of all this is pretty difficult and you'll introduce a lot of bugs if you have a code that is duplicated everywhere inside of your controllers so how do we fix this is the question at head well let's see what we can do and I want to tell you that the only difference between these two methods is actually this values dictionary that we have inside of line 309 and inside of line 3 is 6 or 336 so what we're passing in here is the additional 3 values for the image namely image URL width and height so how can we reduce the code here so that we can share all of these sending inside of another method so I am going to show you exactly how to do this by providing a method private function now this method will be called send message with C with properties and properties is going to be a string to any object C any object dictionary so that's kind of what we need and to show you what you actually need to kind of copy and paste over I'm going to paste all that code and here is kind of the magic I want to actually just remove these last three properties here and let's see these three properties kind of move that common and I wanted a pen somehow a pen the properties dictionary on two values somehow and so what I'm going to do is I'm going to use this method here and I need to instead of calling all that code I will just call said send message with properties and in here I need those three values so let me just undo a little bit I need these three values here so these three values inside of a dictionary let me just get the entire thing I'm gonna copy that and redo so here's what I need I need those values dictionary so let properties equal this and I need these three properties at the end of the dictionary which is image URL width and height and will end the dictionary like that so inside of here I'll just send the properties dictionary right above and I think it might be even easier let's see if we just first cast this as a string to any object make sure I think we should be okay and now let's get back to this question right how do we have pen these properties onto this values are right now well this is pretty easy if you just say properties and you can call a for each like this and instead of here you provide a open brace closing brace and you have access to two things the key which is dollar zero and then the let's see see the key is dollar zero and the value is dollar one so inside of here I can just say values dollar zero equals dollar one so let's see what that gives us I think I need to make something a bar so we need to make this of our and one more fix is two you actually Casas as at any object let's click that over time and we get this right here so I believe if we just declare a type of string to any object we don't need that casting at the very end so here we go I think we can remove that perhaps and build and the project looks okay so let's test this now with this refactoring and if I send an image over I should get the image URL width and height and if nothing has broken the image should show up with its proper image height and width so choose we said and it shows up here with the proper image ratio so that's how we kind of prove that it still works inside of our code here now to reuse this method again so send message with properties I will send it in here as well and the only thing I need to send is this text property right here so what I'm going to do is let me just copy off of that and put it up here so let's say properties instead the better name for it and here we'll say send message with properties and the properties in this case will just be this I believe so that's good properties like that and now we can erase all of this code here so where are we down here and down there so this is a very good refactoring tip for you guys so whenever you come back to your code you're not super confused as to why you have two sets of code doing the exact same thing and yeah we should be able to send text as well so this is another text for Sam said and it'll show up at the very bottom good stuff now what else do I want to show you here I notice out every time I send a message so what's it three the collection view really needs to scroll to that next message on the bottom the way you would do that is to go to let's see I think observe observe message right here and every time we get one of these new messages appended to this dictionary we call collection view reload data which will eventually show the message if we add some code in here say scroll to the last index can actually just get it to automatically scroll when we punch in some text or an image so let's do that with the self collection view scroll to item index path and what is this index path guy so let index path equals what is this and that's the next half like that for item and the item will be self dot messages count see count minus one section at zero index path fill that in right there and this perhaps needs to the bottom and animation of true so let's see what that will give us whenever we are inside of the sending action of our message there we go click on sound charlie and you notice how it automatically Scrolls the entire collection feed down and if we do this either a bud be bring that up and we get the message to show it right there and let's see what happens when we send an image so let's set our es dog right there sends it over and it automatically just shows that right there one thing I wanna fix is inside here if I click on these guys the seems to be editable text in there so why don't we go back to chat message cell you can say T V dot penetrable equals false that's going to disable the behavior where we can actually edit the text inside of those chat bubbles and I think I have one more thing to show you again so if we click in here nothing happens I'm just good the last thing I want to kind of show you guys is inside of chat log controller I can implement a function that tells this thing to scroll the moment I show the keyboard like and if I go into chatlin controller inside of viewdidload right here I want to set up a keyboard observer kind of like what we did in the couple of episodes before and if I uncomment that and click into setup keyboard observers I can comment this out I want to set a set up a notification whenever the keyboard shows so it is neither will show or will hide the actual message or the method will be something else so let's do Notification Center default Center add observer and the observer is self selector will be a pound selector I think selector and we'll use handle keyboard did show so it's going to be did show instead so we'll use keyboard did show notification with an object of nil now I can provide this function down here which is function that then let's see what I want to do is I want to scroll to the last index of the collection view again so in other words I'll call question view scroll to item index path and we need the last index path again which is index path and s index path and we use for item so I don't think we need the self here messages that count - one one section is going to be 0 let's use the next path here and I think this needs to be perhaps top let's see what top is enemy it is true so if I run this I believe I'll see a crash but let's make sure by confirming with our own very very own eyes here we go click there and that happens and that occurs so if you do see a crash on your site you just need to say if messages that count is greater than 0 then we execute this game so there we go just in case you guys see a crash so let's do this why don't we let's see what Egret is so angry and you see how kind of crash right there I believe if there are note messages inside then you'll see a crash so let's run our application again bring up bigger it here and I pay there girl send and we get the message inside let's send her image perhaps and one of the default images that come with the simulator sense and said and there we go so back okay going to Ingrid we get this so we stop fix this where we don't have a message for whenever someone sends an image and if I bring back my phone here let's see I think we can present something like this with scented image as the actual text that's a possibility but nothing too hard to implement now that web code is kind of working all right that's going to wrap it up for this video in the next episode I want to show you guys how to implement the functionality that allows us to press on the image to zoom it in and then press on it again to zoom it back out and make sure to hit that like button if you enjoyed today's video also subscribe to this channel to stay tuned for the rest of the firebase 3 series

Channel: Lets Build That App

Views: 11,224

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: FqDVKW9Rn_M

Length: 28min 44sec (1724 seconds)

Published: Fri Jul 22 2016