SwiftUI - Rectangle, RoundedRectangle

안녕하세요 오늘은 Rectangle, RoundedRectangle에 대해서 포스팅하겠습니다.

 

SwiftUI는 Rectangle, RoundedRectangle, Capsule, Ellipse, Circle 이렇게 5가지 Shape를 제공합니다.
그중에서 오늘은 Rectangle과 RoundedRectangle만 살펴보려 합니다.
(나머지는 나중에)

 

VStack으로 빨간색 Rectangle 200x200짜리 하나
RoundedRectangle 200x200짜리 하나 그려줍니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 25, style: .continuous)
                .fill(.orange)
                .frame(width: 200, height: 200)
        }
    }
}

그럼 아래와 같이 나타납니다.

 

Rectangle와 RoundedRectangle은 모서리를 둥글게 할 수 있다는 점을 제외하고는 동일합니다.
테스트 ㄱㄱ

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 0)
                .fill(.orange)
                .frame(width: 200, height: 200)
        }
    }
}

이렇게 cornerRadius값을 0으로 설정하면
위 아래 다른 게 없죠?

 

RoundedRectagle을 사용할 때 style을 추가로 설정할 수 있는데
이렇게 circular과 continous가 있습니다.

circular은 고전적인 둥근 모서리를 나타내고 (UIKit에 쓰는 cornerRadius 느낌)
continous는 애플이 좀 더 부드럽게 만드는 것이라고 생각하시면 됩니다.

한 번 비교해보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 25, style: .circular)
                .fill(.orange)
                .frame(width: 200, height: 200)

            RoundedRectangle(cornerRadius: 25, style: .continuous)
                .fill(.orange)
                .frame(width: 200, height: 200)
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 100, style: .circular)
                .fill(.orange)
                .frame(width: 300, height: 150)
            
            RoundedRectangle(cornerRadius: 100, style: .continuous)
                .fill(.orange)
                .frame(width: 300, height: 150)
        }
    }
}

똑같은 RoundedRectangle에 똑같은 Radius값을 주고 style만 변경했는데
내 눈엔 뭐 거기서 거기 같음.

그래서 RoundedRectangle 사이즈를 변경해서 똑같은 Radius값을 주고 style 각각 적용해보니
조금? 미세하게 느껴지는 ㅇㅇ? 
사실 이것도 거기서 거기 같음.

뭐 여튼 그렇습니다.
맘에 드는걸로 사용하면 될 듯요. 

 

처음에 실수했던 것 중 하나가 RoundedRactangle 색을 변경하고 싶었는데
검은색으로 떠서 뭐지? 싶었는데 RoundedRactangle는 fill로 색을 변경하더라고요? ^^

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .background(.orange)
                .frame(width: 200, height: 200)
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(.orange)
                .frame(width: 200, height: 200)
        }
    }
}

.background로 색 설정하면 검은색으로 나타나고
.fill로 색 설정해야 내가 원하는 오렌지색으로 나타남.

 

그리고 안에 Text나 Image나 뭐 넣고 싶으면
아래와 같이 overlay를 활용하면 됩니다요.

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(.orange)
                .frame(width: 200, height: 200)
                .overlay(
                    Text("안녕하세요 :) ")
                        .foregroundColor(.red)
                )
        }
    }
}

 

역시 스유 쉽지않다.

 

resource
https://developer.apple.com/documentation/swiftui/rectangle
https://developer.apple.com/documentation/swiftui/roundedrectangle