Create Rectangle Bubble Chat iOS Swift 5


Hello all, every week I try to give you a good tutorial to add your skill and knowledge too. And today you got to be suprised because It's not usually tutorial. I need to dig it deep down to present it. So if you want to create chat application, it's good for you. You can take it as reference.

So in chat application, you will face chat from bottom to up. As a screenshoot above, you can see it's not from top to bottom but otherwise. There is bubble chat on left and right. You can say when you send it will be on right and when someone send, it will be on left.

And about text height, it must be flexible height. Like app chat line or whatsapp, there is no cut in height. So it can small or so high. So we need to calculate the height. And about the width it's not full, we give space to the right or left.

I include the title header too so It will be more like chat app. The header will be on viewForFooterInSection why ? Because I reverse the UITableview, so the chat will be on bottom to top. As you can see on image above.

I create UIlabel date after message like chat app usually. So it will be complete for you to implement. And sorry if I don't give you full Source Code because it's easy to follow when you the code. So this is the code..




This is a long code to understand, but I will only give you a importance thing. First you focus on class ChatTableViewCell, you can see there are two method showOtherMessage and showMeMessage. It will implement right or left the bubble chat will be. It becames right when you use showOtherMessage method and otherwise.

You can see the implementation methods in cellForRowAt UITableview. For row 0 I use showOtherMessage and 1 I showMeMessage. And for height row I use the calucation that I found on the internet but I forgor the source. So it's basically calculating the height label and text label. So It will be flexible.

If you have any questions futher, please feel free to comment below. Thanks.

Popular posts from this blog

How to restart the app with flutter Android and iOS

Image
Hi all, welcome back to my blog. And today lesson is about flutter again. I have a little problem when trying to resart the app directly from the app. So what I mean is I want to restart the app after users do something. Because if I don't do it, the app flow will be bad and the data that I want to refresh will be failed. So in my use case in my app is I want to restart the app after user sign in or sign out in my app. The reason is I need to restart all of the previous state. That's the easy way I can do, and I have some problems with camera plugin. The problem is happened only on android, so when you click sign in google/facebook, there'll be new page native from their sdk and making the app in inactive status. That'll will make camera bug, and it will make the app crash.
Read more

How to have ConstraintLayout inside ScrollView and ScrollView inside ConstraintLayout Android

Image
Hai guys, last week I found a unique way to create layout Android look. You can see the title, that's actually what I want. I know it sounds weird but sometimes we need to create something that we might curious if it's in o n the internet or not. Why I'm using ConstraintLayout because it's almost same with iOS xcode. There is constraint where you can set top constraint, bottom constraint, left constraint and right constraint. So it's easy for me to design like what I want. But it's personal, it depends on you too. And fortunely you can combine ScrollView and ConstraintLayout. Because you need to worry when the height of your layout is high than real device height. And if you don't use UIScrollview your component will be unseen when the height of device is more small than layout that we design. Like my app, I want to use ConstraintLayout and ScrollView together. Maybe it can do with RelativeLayout or others layout. But something special that I want i
Read more

Missing system image Android Studio solution

Image
Happy holidays guys, this is december with long weekend haha. I still have a problem with Android Studio. After I update my emulator and suddenly I got a issue that is so weird. You can see picture above I need to redownload emulator from android studio. If you got a issue like me, don't worry and don't uninstall your android studio. It's not complicated to resolve it. You just need to redownload the emulator go to Tools -> AVD Manager. You can see the issue of your emulator and redownload or resolve it. And you will be like image above. Just wait the download and your emulator will be fine again. If you still have the issue, please comment below and let me know what's the problem. I'm happy if i can help you guys. I'm not expert but it's fun when i can solve programming issues.
Read more