How to draw rounded rect for chat bubble

Question

I am a new in iOS programming so please help me for,how to draw a rounded rect with some custom shape. For example chat bubble with rectangular shape

Answer 1

You can access the layer property of your shape and add a cornerRadius . In addition you have to set the layer's masksToBounds property to YES

#import <QuartzCore/QuartzCore.h>

view.layer.cornerRadius = 10.0;
view.layer.masksToBounds = YES;

Answer 2

Okay you need to design a rounded type bubble for chat app right...????

If this is your scenario then I will try to demonstrate the same but before that I will try to give you some idea about how to make an UIView in rounded shaped.

By the way I am using Swift 2.1. If you need it in Objective-C then just comment here after my answer.

1. How to make a round shaped UIView.

Step 1: First of all add a UIView object on your viewcontroller's view.

Step 2: Make the UIView object's height and width same (ie - Height = 100 & Width = 100).

Step 3: Apply this following code on that UIView Object(eg - On button click or any of your function block)

  self.subViewToModify.layer.cornerRadius = 50.0 //Exact half size of that UIView object's Height/Width  
  self.subViewToModify.layer.masksToBounds = true

Step 4: Thats it. It will make round shaped of that view

Now I am posting some image response directly from my simulator which will help you to understand.

Normal View object:

After applying the cornerRadius on it:

This is not perfectly round shaped because the height and width are not same, which will do the trick.

After changing the height and width of the view to some same size

Now after applying the cornerRadius on it:

Now its perfect right..???

Hope you understood this basic thing.

2. Now making the chat bubble view

In this case I will try to give an overview or way out. Try to understand and apply the same on your code.

To make a chat bubble I am using an .xib file individually which will allow me to reuse that.

Now some image from the storyboard of the xib file.

Use some autolayout constraints to adjust there positions.

Now just make outlet of both the UIView and UIImageView object and apply code from your viewController class to make it any desired shape.

Thanks. Hope this helped.