Post

Welcome!

Hey

I’m Karolis Raišelis, iOS Developer from Lithuania. I have been building iOS apps for 10+ years now. Worked in multiple companies and also released few apps of my own. I started off just when iOS 7 landed and iPhone 5 was introduced, which was ideal time to start just when iOS had it’s biggest redesign to this day.

My main purpose of this page is to showcase my work and to write about my own experiences and development for Apple platforms. In last couple of years I was mostly leading iOS teams, so I will try to also touch management topics, not just how to round corners of a Button in SwiftUI 😅

Speaking of rounding corners…

This was supposed to be a welcome post, but I guess we can try and learn something along the way.

cornerRadius option

Well, easiest way is probably what would you expect. Calling .cornerRadius(...) will allow rounding views corners.

.cornerRadius has been deprecated and it might not be available in future OS versions.

1
2
3
4
5
var body: some View {
    Color.blue
        .frame(width: 200, height: 100)
        .cornerRadius(16)
}

This will give us a color with corner radius of 16:

Rounded Corners 1

clipShape option

Now a better option would to use .clipShape modifier. This allows to clip to view any Shape you want. For example it can be a Capsule, Circle or RoundedRectangle. This works on any Views. Colors, Images, etc.

Let’s make a Text that has a Capsule shape:

1
2
3
4
5
6
7
8
9
var body: some View {
    Text("Hello there")
        .foregroundStyle(.white)
        .padding()
        .background {
            Color.blue
        }
        .clipShape(Capsule())
}

In the above example we:

  1. Declare Text("Hello there") label.
  2. We set text color to white with .foregroundStyle(.white)
  3. We add a .padding() to make sure that when we are adding a background, there will be enough space around text itself.
  4. We set a backgound of our Text view.
  5. We clip whole view to Capsule with .clipShape(Capsule()).

This produces a Text view with blue background in a shape of a Capsule:

Rounded Corners 2

Rounding image corners

Since previous example might look confusing for beginners, because of background, padding, etc. We can try to round courners of an image. To make a Circle profile photo, to need to do this:

1
2
3
4
5
Image("cat")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 200, height: 200)
    .clipShape(Circle())
  1. We declare an Image view.
  2. We make our Image resizable, since we want to change it’s size.
  3. We make the image fill inside available frame.
  4. We set our image size/frame.
  5. We clip our image to Circle shape.

And the result is:

Rounded Corners 3

Conclusion

Well, initially this was supposed to be a post about Welcoming people to the blog. But since I wanted to practice blogging, I just could not resist making my first tutorial. I hope it helps someone at some point.

That’s it for now. Thanks for reading. See ya in the next one!

This post is licensed under CC BY 4.0 by the author.