SwiftUI : Shape (Rectangle, Circle, Capsule...)

목차

 

Rectangle / Circle / RoundedRectangle / Capsule에 대해 알아보도록 합시다.

Shape

SwiftUI에는 사각형, 원 및 캡슐과 같은 여러 가지 기본 제공 모양이 있으며 필요에 따라 각 모양을 만들고 색상을 지정하고 배치할 수 있습니다.

• Rectangle
• Circle
• RoundedRectangle
• Capsule

Circle

Circle()
    .fill(Color.red)
    .frame(width: 200, height: 200)

Rectangle

VStack() {
   Rectangle()
         .fill(Color.blue)
         .frame(width: 100, height: 100)
   Rectangle()
         .fill(Color.blue)
         .frame(height: 5)
}

RoundedRectangle

RoundedRectangle(cornerRadius: 20)
    .fill(Color.green)
    .frame(width: 200, height: 120)

Capsule

Capsule()
    .fill(Color.black)
    .frame(width: 200, height: 120)

Stack을 사용하여 활용

지금까지는 하나의 스택만을 사용해서 다루어 보았지만, 좀 더 복잡한 UI를 만드려면 여러 개의 스택을 함께 사용해야 합니다.

 

HStack 내부에 VStack, 그 내부에 다시한번 HStack 이런식으로 스택 내부에 여러 개의 스택을 중첩해서 사용할 수 있고, 이것이 SwiftUI에서 뷰를 구성하는 방법입니다.

 

이번에 만들어 볼 내용은 다음 그림과 같은 모습이 될 것입니다.

 

어디서 어떤 스택이 사용되는지 생각해 보며 코드를 살펴봅시다! 완성된 코드를 한 번에 보면 복잡하게 느껴질 수 있으니 조금씩 나누어서 살펴보는 것이 좋습니다.

 

VStack

우선 처음 시작할 것은 전반적으로 세로 방향이 메인으로 구성되어있으므로 VStack을 사용해 세개의 텍스트를 작성하는 것입니다.

VStack {
            Text("도형만들기")
            .font(.largeTitle)
            Text("둥근모양")
            .font(.title)
            Text("각진모양")
            .font(.title)

} .padding()

HStack 추가 후, Spacer

제목을 제외한 아래 2개의 텍스트에 대해 각각 HStack을 추가하고, Spacer()를 이용해 가장 좌측에 배치하도록 합니다.

VStack {
            Text("도형만들기")
            .font(.largeTitle)
            
            HStack {
                Text("둥근모양")
                .font(.title)
                Spacer()  //왼쪽 정렬이 되도록
            }
            
            Spacer()
            
            HStack {
                Text("각진모양")
                .font(.title)
                Spacer()  //왼쪽 정렬이 되도록
            }
        }.padding()

선 위에 도형 넣기

다음 코드를 "둥근모양" 이 포함된 HStack의 다음 줄에 입력합니다. 둥근 모양 가운데에 선이 있는데, 그 선은 ZStack으로 만들어주고 수식을 넣어줘야 합니다.

 HStack {
                Text("둥근모양")
                    .font(.title)
                Spacer()
            }
            ZStack {
                Rectangle().frame(height: 10) //가운데 선
                HStack {
                    Circle().foregroundColor(.blue)      //원
                    Ellipse().foregroundColor(.green)    //타원
                    Capsule().foregroundColor(.orange)   //캡슐
                    RoundedRectangle(cornerRadius: 30).fill(Color.gray)  //둥근모서리
                }
            }

각진 모양 추가

마찬가지로 "각진 모양" 에도 HStack의 다음줄에 추가해줍니다.

            HStack {
                Text("각진모양")
                    .font(.title)
                Spacer()
            }
            ZStack {
                Rectangle().frame(height: 10)  //가운데 선
                
                HStack {
                    Color.red   //이렇게만해도 직사각형이 생성된다.
                    Rectangle().fill(Color.blue)
                    RoundedRectangle(cornerRadius: 0).fill(Color.purple)
                }
            }

완성 코드

VStack {
            Text("도형만들기")
                .font(.largeTitle)
            
            HStack {
                Text("둥근모양")
                    .font(.title)
                Spacer()
            }
            ZStack {
                Rectangle().frame(height: 10)
                HStack {
                    Circle().foregroundColor(.blue)
                    Ellipse().foregroundColor(.green)
                    Capsule().foregroundColor(.orange)
                    RoundedRectangle(cornerRadius: 30).fill(Color.gray)
                }
            }
            
            Spacer()
            
            HStack {
                Text("각진모양")
                    .font(.title)
                Spacer()
            }
            ZStack {
                Rectangle().frame(height: 10)
                
                HStack{
                    Color.red
                    Rectangle().fill(Color.blue)
                    RoundedRectangle(cornerRadius: 0).fill(Color.purple)
                }
            }
            
        } //VStack
        .padding()
    }
}

 

 

읽어주셔서 감사합니다🤟