SwiftUI : Frame

frame과 관련해서 모르는 게 많아서 이참에 정리를 해보기로 했다!

 

최종적으로 만들고자 하는 화면은 다음과 같다 !

 

---

 

  frame, 왜 필요할까 ?  

좌측의 기본 화면을 우측의 화면처럼 만들고 싶다 !!

어떤 코드가 떠오르는 가?

 

나는 다음과 같은 코드가 떠올랐다..!

            HStack {
                Text("Hello, World!")
                Spacer()
            }

 

---

 

그럼 이런 화면은 ?

나는 .. 이런 코드가 떠올랐다 !

            VStack{
                HStack {
                    Text("Hello, World!")
                    Spacer()
                }
                HStack {
                    Spacer()
                    Text("Hello, World!")
                }
            }

 

---

..! 근데 위 코드들이 가독성이 좋은 가..? 

NOOO !!

 

 

바로 위에서 봤던 예시는 spacer 없이 frame을 이용해서 간단하게 나타낼 수 있다 !

            Text("Hello, World!")
                .frame(maxWidth: .infinity, alignment: .leading)
            Text("Hello, World!")
                .frame(maxWidth: .infinity, alignment: .trailing)

 

 

사실 이거는 짧은 코드라서 그러려니 하는데 더 많은 양의 UI를 디자인 해야 할 때,

frame을 이용하면 훨씬 가독성이 좋고 간편하게 코딩을 할 수 있다! 

 

 

 frame 사용방법 

 1) frame의 alignment 이용하기 ! 

 

아래 코드는 내가 원래 알고 있었던 frame의 기본적인 기능이다. 

            Text("Hello, World!")
                .background(.green)
                .frame(width: 150, height: 100)
                .background(.blue)

위의 코드를 작성하면 아래처럼 화면에 표시된다.

Text의 영역 만큼이 연두색으로, frame의 영역 만큼이 파란색으로 채워진다.

 

 

만약에 frame의 왼쪽에 "Hello, World"가 붙기를 원한다면 frame modifier에 alignment 를 추가해준다.

            Text("Hello, World!")
                .background(.green)
                .frame(width: 150, height: 100, alignment: .leading)
                .background(.blue)



alignment를 통해 다음과 같이 여러가지 위치로 이동시킬 수 있다.

 

+) 이렇게 frame을 통해 여러가지 모양을 표현할 수 있다.

              Text("Hello, World!")
                .background(.green)
                .frame(width: 150, height: 100, alignment: .bottomLeading)
                .background(.blue)
                .frame(width: 200, height: 50, alignment: .bottomLeading)
                .background(.red)

 

 

 2) frame의 maxWidth, maxHeight, minWidth, maxHeight 이용하기 

frame modifier을 사용하면, 이렇게 두 가지 녀석이 뜬다.

위에서는 첫번째 녀석을 이용해 봤더라면, 이번에는 두번째 녀석을 사용해보려 한다.

( idealHeight과 idealWidth은 아직 제대로 이해하지 못해서 이후에 덧붙여 포스팅을 하려한다. )

 

문서에 따르면,

나는 정의로는 이해가 안돼서 찾아보고 실험을 해봤더니 ! 

다음과 같은 결론을 얻었다.

 

⭐️

minWidth, minHeight	속성값이 자신의 값보다 작아지는 것을 방지
maxWidth, maxHeight	속성값이 자신의 값보다 커지는 것을 방지

 

ex) maxWidth : 150 -> 150보다 커지는 것을 방지해서 150을 넘지 못하게 한다.

            Text("Hello, World! Hello, World! Hello, World! Hello, World! Hello, World!")
                .background(.green)
                .frame(maxWidth : 150, alignment: .leading)

 

ex) minWidth  : 150 -> 150보다 작아지는 것을 방지해서 150을 넘도록 한다.

            Text("Hello, World! Hello, World! Hello, World! Hello, World! Hello, World!")
                .background(.green)
                .frame(minWidth : 150, alignment: .leading)

 

ex) minWidth  : 100 -> 100보다 작아지는 것을 방지해서 100을 넘도록 한다.

            Text("H")
                .background(.green)
                .frame(minWidth : 100, alignment: .leading)

 

 

그렇다면 이제 ! 알아봤던 것을 토대로 이걸 한번 만들어보자 !

            Text("Hello, World!")
                .background(.green)
                .frame(height : 100, alignment: .top)
                .background(.orange)
                .frame(width: 150)
                .background(.pink)
                .frame(maxWidth : .infinity, alignment: .leading)
                .background(.black)
                .frame(height : 250)
                .background(.blue)
                .frame(maxHeight : .infinity, alignment: .top)
                .background(.yellow)

 

 NOTE 

frame !! 쉬운 내용이기는 했지만, 그냥 얼렁뚱땅 넘어갔으면 활용을 제대로 못했을 거 같다!!

앞으로의 코딩에서 많이 응용할 거 같아 기대가 된다! 재미따,, SwiftUI ~~ ^^