SwiftUI 스터디 3. StackView, Gradient

 

2편에 이어서

 

 

V,H,Z Stack View에 대해 알아보겠습니다.

아래는 결과 화면이예요.

 

edgesIgnoringSafeArea를 이용해 SafeArea를 무시한 모습과(왼쪽)

무시하지 않음 모습입니다.(오른쪽)

전체 소스는 다음과 같아요.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Group {
                VStack(alignment: .center, spacing: 0) {
                    Spacer()
                    HStack(alignment: .center, spacing: 25, content: {
                        Text("TokkiSea")
                        Text("TokkiSea")
                        Text("TokkiSea")
                    }).background(Color.gray)
                    Spacer()
                    HStack {
                        Text("V TS")
                        Spacer()
                        Text("V TS")
                        Spacer()
                        Spacer()
                        Text("V TS")
                    }.background(Color.black)
                    .foregroundColor(.white)
                    Spacer()
                    Text("H TokkiSea")
                    Text("H TokkiSea")
                    Spacer()
                    Text("H TokkiSea")
                    ZStack {
                        Text(">> ------- Hidied zTokki ------ <<")
                        Color.red.frame(width: 200, height: 200, alignment: .center)
                        Color.orange.frame(width: 190, height: 190, alignment: .center)
                        Color.yellow.frame(width: 180, height: 180, alignment: .center)
                        Color.green.frame(width: 170, height: 170, alignment: .center)
                        Color.blue.frame(width: 160, height: 160, alignment: .center)
                        Color.purple.frame(width: 150, height: 150, alignment: .center)
                        AngularGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple]), center: .center).frame(width: 140, height: 140, alignment: .center)
                        Text("Top")
                    }.frame(width: 300, height: 200, alignment: .center)
                }.background(Color.init(red:0.9, green: 0.8, blue: 0.8, opacity: 1))
                .edgesIgnoringSafeArea(.all)
            }.navigationTitle("Hello TokkiSea")
        }
    }
}

맨위에서 부터

Group {} 다음에 나오는

VStack(alignment: .center, spacing: 0) {

를 보시면 화면 전체를 VerticalStack로 만듭니다.

수직으로 아이템들을 나열하는거지요.

spacing: 0으로 해서 수직간격은 추가하지 않은 정도로 둡니다.

그리고 각 아이템들을 alignment: .center 로 해서 중앙 정렬을 해주고요.

 

이제 첫번째 항목인

 

HStack(alignment: .center, spacing: 25, content: {

Text("TokkiSea")

Text("TokkiSea")

Text("TokkiSea")

}).background(Color.gray)

 

HorizontalStack 정렬로 Text를 3개를 배열 했습니다.

 

"TokkiSea" 텍스트 3개를 HStack로 수평 나열한 상태이고

간격을 25를 주었습니다.

그리고 배경색은 Color.gray로 주었습니다.

그런데 이 HStack 가 조금 아래로 내려와 있습니다.

이건 Spacer() 때문에 그렇습니다.

Spacer()를 넣어주면 다음 항목과의 간격을 균등하게 띄워줍니다.

그래서 위아래의 간격이 동일합니다.

 

 

 

다음 아래 수평 정렬 스택이 하나 더 있는데

여기에서는 Spacer() 개수를 다르게 주었습니다.

 

HStack {

Text("V TS")

Spacer()

Text("V TS")

Spacer()

Spacer()

Text("V TS")

}.background(Color.black)

.foregroundColor(.white)

 

그랬더니

처음에 넣었던 HStack는 중앙에 배치되었던것과 다르게

좌우가 가득차게 되고

Spacer() 1개와 Spacer() 2개의 간격이 다릅니다.

즉, 총 3개의 Spacer() 간격을 왼쪽에는 1개, 오른쪽에는 2개만큼의

간격이 생기게 됩니다.

 

다음은 ZStack 입니다.

V,H 는 2D 좌표계에서 Vertical, Horizontal이라 부르고

Z 는 3D 좌표계의 X,Y,Z-axis 기준이라

그냥 Z 예요.

표현방식은 말그대로 깊이 순대로 아래에서 위로 쌓이는 형태입니다.

 

Text(">> ------- Hidied zTokki ------ <<")

 

맨 아래에 깔려있는 이 아이는 다른 색상있는 사각형에 가려서

>> -                                            - <<

요것만 보이게 되네요.

그리고 색상 사각형들은

 

Color.red.frame(width: 200, height: 200, alignment: .center)

Color.orange.frame(width: 190, height: 190, alignment: .center)

Color.yellow.frame(width: 180, height: 180, alignment: .center)

Color.green.frame(width: 170, height: 170, alignment: .center)

Color.blue.frame(width: 160, height: 160, alignment: .center)

Color.purple.frame(width: 150, height: 150, alignment: .center)

 

크기가 점점 작아게 만들고 색상은 무지게색으로 체웠습니다.

그리고 맨 위에는 그라데이션과 텍스트를 올렸어요.

 

AngularGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple]), center: .center).frame(width: 140, height: 140, alignment: .center)

Text("Top")

뭔가 색상있는 사각형을 Color로 그리게 되니 뭔가 편하네요.

ZStack 도 

.frame(width: 300, height: 200, alignment: .center)

이 값은 안줘도 되는 크게 의미없는 프레임 값이지만

할당된 크기가 300,200 이 안되면 다른 항목을 가리게 되니

크기를 지정해두는게 좋아요.

 

 

 

이번 내용은 조금 짧게 끝냅니다.

 

 

 

 

 

3편에서 계속