FlexLayout (5)

Library

GREEN.1229 2022. 5. 20. 09:45

안녕하세요. 그린입니다🟢

이번 포스팅에서는 FlexLayout의 Adjusting the Size 목록을 독파해보겠습니다🙌

해석하면 사이즈를 적용하다 입니다.

UI 요소 및 뷰들의 레이아웃을 잡으면서 가장 중요하다고 까다로운것이 이 사이즈죠🥲

디자이너와 협업 시 피그마 등의 툴을 사용해 각 컴포넌트들이 어떤 사이즈를 가지고 있고 최대/최소 사이즈는 어떻게 설정되있는지등이 기재된걸 보고 개발자는 그걸 코드로 구현해줘야합니다.

이러한 작업이 없다면 원하는 디자인과는 다른 결과를 초래할거에요!

그렇기에 쉬울 수 있지만 가장 중요한 부분이라고 생각합니다😁

크게 3개로 나눌 수 있고 또 그 안에서 CGFloat로 수치를 줄것인지 퍼센트로 수치를 줄것인지 각 2개씩 가지고 있어 총 6개의 메서드가 있다고 생각하시면 됩니다.

해당 6개의 메서드들로 너비, 높이 그리고 그 둘을 합친 사이즈를 조절할 수 있습니다.

1. width(_ widht: CGFloat?)

뷰의 너비를 픽셀 단위로 지정합니다.

인자로 들어오는 값은 양수여야하고 nil이 들어오면 재설정을 하게 해줌으로 옵셔널 타입입니다.

view.flex.width(300)

2. width(_ percent: FPercent)

뷰의 너비를 퍼센트로 지정합니다.

값은 양수여야하고 동일하게 nil 값을 주어 재설정할 수 있습니다.

view.flex.width(30%)

3. height(_ height: CGFloat?)

뷰의 높이를 픽셀 단위로 지정합니다.

값은 양수여야하고 width와 마찬가지로 nil 값을 주어 재설정할 수 있습니다.

view.flex.height(50)

4. height(_ height: FPercent)

뷰의 높이를 퍼센트로 지정합니다.

값은 양수여야하고 동일하게 nil 값을 주어 재설정 할 수 있습니다.

view.flex.height(50%)

5. size(_ size: CGSize?)

뷰의 너비, 높이 모두 픽셀 단위로 지정합니다.

값은 양수여야하고 nil 값을 주어 재설정을 할 수 있습니다.

또한 하나의 값이 들어감으로 너비, 높이가 같은 값으로 설정됩니다.

view.flex.size(150)

6. size(_sizeLength: CGFloat?)

뷰의 너비, 높이를 픽셀 단위로 지정해 정사각형의 뷰를 만들어줍니다.

값은 양수여야하고 nil의 값으로 재설정을 해줄 수 있습니다.

사실상 위 메서드와 동일한 구현이라고 보입니다.

view.flex.size(150)

FlexLayout에서는 뷰의 최대, 최소 너비 및 높이를 지정할 수 있는 메서드들이 있습니다.

레이아웃 내에서 최대, 최소 크기를 지정함으로 효과적인 제어가 가능합니다.

즉 한계를 두는것이죠!

max 즉 최대 지정이 효과적일때는 alignItems(.stretch)와 쓸때 특정한 지점을 벗어나서 증가하면 디자인 상 예쁘지 않게 보입니다.

이때 해당 max 메서드를 사용하면 딱 거기까지만 늘어나니 디자인의 심미적 요소를 충족시켜줄 수 있습니다.

min 즉 최소 지정도 마찬가지입니다.

그러면 한번 어떻게 지정하는지 8개의 메서드를 통해 알아보시죠!

1. minWidth(_ width: CGFloat?)

뷰의 최소 너비를 픽셀 단위로 지정합니다.