CODEWITHSUNDEEP
iosswift
CentrumGuy
CentrumGuy

Reputation: 646

Gap between overlaying views in swift

I was wondering how I can get a gap between overlaying views in swift. This is really hard for me to explain so I added a couple images to explain what I'm talking about This is the effect in iMessage The same effect in Facebook Messenger And again in facebook messenger. I am talking about the little gap of space in between the view that says the number of minutes and the profile image (in the 3rd image). I was wondering how I could achieve the same thing in Swift because I'd like to integrate this into my app. Thank you so much!

Upvotes: 0

Views: 216

Answers (2)

McDonal_11
McDonal_11

Reputation: 4075

You can do this many ways.

One of the way, I am posting.

One View, UIView, that should be Square. Inside that, One UIImageView and One SmallView

Constraints as follows:

OuterView: width & height be 120, top 50, and Center Horizontally

ImageView = { 4,4,4,4 },

SmallView = right and bottom as 0, width and height be 40 [Square]

PlusSignImgVw = { 4,4,4,4 }

Like below:

enter image description here

Coding:

override func viewDidAppear(_ animated: Bool) {

    imageVw.layer.cornerRadius = imageVw.frame.size.width / 2

    smallSquareView.layer.cornerRadius = smallSquareView.frame.size.width / 2
    smallSquareView.clipsToBounds = true

    plusSign.layer.cornerRadius = plusSign.frame.size.width / 2
    plusSign.clipsToBounds = true

}

Output:

enter image description here

Upvotes: 1

ppalancica
ppalancica

Reputation: 4277

It's a bit tricky, not obvious at first, but not too difficult either.

For the round images, try this:

customView.layer.cornerRadius = customView.bounds.size.width / 2.0
customView.layer.borderWidth = 2.0
customView.layer.borderColor = UIColor.white.cgColor

For the rectangular image with round corners, first line will calculate the .cornerRadius based on height (or you can actually do it for all the cases, and it would also work):

customView.layer.cornerRadius = customView.bounds.size.width / 2.0

Just replace customView with yourCustomViewName and write those 3 lines for each view. That should do the job.

Upvotes: 1

Related Questions