[SwiftUI] Corner Radius를 걸어주는 방법

애플의 Document 참조

SwiftUI에 Corner Radius를 걸어주는 방법은 크게 세가지 정도가 있다. 우선 기본적인 것은 애플의 Document에서 그대로 가져왔다.

cornerRadius(_:antialiased:) | Apple Developer Documentation

애플 Document 코드 .cornerRadius

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rounded Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black)
                .cornerRadius(25)
        }
    }
}

애플의 경우는 .frame으로 Text를 감싸주고 .cornerRadius를 통해 Rounded Corners를 표현해줬다. 아래와 같은 두가지 방법도 있다!

background에서 RoundedRectangle활용하기

.background에서 in을 넣어준다면 RoundedRectange모양으로 만들어 줄 수 있다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rounded Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black, in : RoundedRectangle(cornerRadius: 25))
        }
    }
}

clipeShape활용하기

이것은 네모난 프레임을 RoundedRectange모양으로 잘라주었다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rounded Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black)
                .clipShape(RoundedRectangle(cornerRadius: 25))
        }
    }
}

이렇게 세가지 방법 정도로 구사할 수 있다.

 

추가 발견

이럴수가 Smooth round corner를 구사할 수 있다. 이 약간의 차이점이 보이시나요...? Rounded Rectangle의 style에 .continuous를 걸어주면 된다!

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rounded Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black, in : RoundedRectangle(cornerRadius: 25))
            
            Text("Smooth Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black, in : RoundedRectangle(cornerRadius: 25, style: .continuous))
        }
    }
}

아래와 같이 cornerSize도 상세하게 정해볼 수 도 있다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rounded Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black, in : RoundedRectangle(cornerRadius: 25))
            
            Text("Smooth Corners")
                .frame(width: 175, height: 75)
                .foregroundColor(Color.white)
                .background(Color.black, in : RoundedRectangle(cornerSize: CGSize(width: 25, height: 15), style: .continuous))
        }
    }
}