SwiftUI Divider, Spacer

오늘은 이전에 다루었던 HStack과 VStack을 효율적으로 다루는 방법에 대해서 알아보겠습니다.

 

 

1. Divider()

우선 예제를 하나 만들어보겠습니다.

 

struct ContentView: View {
   
    
    var body : some View {
        VStack {
            Text("Ractangle")
                .font(.system(size: 30))
                .fontWeight(.heavy)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.blue)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.green)
        }
        .frame(width : 300)
        
    }
}

다음과 같은 View가 있습니다.

 

VStack을 사용했기 때문에, 위에 텍스트부터 차례대로 수직으로 뷰가 나열되는 모습입니다.

 

공간에 대한 modifier를 작성하지않았기 때문에 텍스트와 Rectangle 3개가 똑같은 간격을 유지하는 모습입니다.

 

근데 만약 text랑 첫번째 사각형의 간격만 기존 간격의 2배로 만들고 싶다면 어떻게하면 될까요?

 

우선 Divider를 사용해볼 수 있겠습니다.

 

struct ContentView: View {
   
    
    var body : some View {
        VStack(alignment: .center, spacing: 30) {
            Text("Rectangle")
                .font(.system(size: 30))
                .fontWeight(.heavy)
            Divider()
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.blue)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.green)
        }
        .frame(width : 300)
        
        
    }
}

 명확한 구분을 위해 VStack에 각 요소별 간격을 30으로 지정했습니다.

 

Text와 Rectangle 사이에 Divider()를 넣자 View가 아래와 같이 변합니다.

 

 

분명 간격이 넓어지긴 했는데 자세히 보시면 텍스트와 사각형 사이에 구분선이 보이시죠?

 

저 선이 Divider()입니다. 저 선이 한 공간을 차지하기 때문에 한칸 간격만큼 더 벌릴 수 있는것입니다.

 

근데 저러면 선이 신경쓰여서 View가 깔끔하게 보이지가 않습니다.

 

그럴땐 바로 투명도를 사용해서 저 선을 투명하게 만들어주시면 해결이 되기도 하는데요

 

Divider().opacity(0)

 

위에처럼 입력해주시면

 

선이 지워지고, 간격도 유지되는 모습입니다.

 

 

2. Spacer()

다음과 같이 코드를 바꾸어봅시다.

 

struct ContentView: View {
   
    
    var body : some View {
        VStack(alignment: .center, spacing: 30) {
            Text("Rectangle")
                .font(.system(size: 30))
                .fontWeight(.heavy)
         
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.blue)
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.green)
        }
        .frame(width : 300)
        .background(.yellow)
        
    }
}

 

 

여기서 Spacer를 넣으면 어떻게 될까요?

 

Spacer()를 입력한 곳에 가중치를 두어 뷰가 쭉 밀리게 됩니다.

 

안드로이드의 layout_weight 생각하시면 될것같습니다 :)

 

그렇다면 아래에도 Spacer()를 추가하면 어떻게 될까요?

 

뷰가 가운데로 올까요?

 

정답입니다.

 

그렇다면 위에 하나 아래에 2개 둔다면?

 

 

위 그림처럼 Spacer의 갯수가 많다면 갯수에 비례해서 공간이 할당되게 됩니다.

 

그럼 Spacer를 사용하면 항상 저렇게 뷰의 끝부터 끝까지 늘어날까요?

 

Spacer도 코드를 통하여 frame을 지정해주실 수 있습니다.