์๋ ํ์ธ์ Foma ๐ป ์ ๋๋ค!
์ค๋์ SwitUI๋ฅผ ์ด์ฉํด์ Layout์ ์ก์ ๋ ์์ฃผ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ GeometryReader์ ๋ํด์ ์์๋ณด๋ ค๊ณ ํฉ๋๋ค.
๋ฐ๋ก ์์ํ ๊ฒ์~
GeometryReader๋?
์ด๋ฆ์ ์ง์ญํ๋ฉด Geometry๋ ๊ธฐํํ์ ๋ํ๋ด๋๊น, ๊ธฐํํ์ ์ธ ๋ฌด์ธ๊ฐ๋ฅผ ์ฝ๋ ๊ฒ์ด๋ผ๊ณ ํด์ํ ์ ์๋๋ฐ์.
๊ณต์ ๋ฌธ์์๋ ์ด๋ฆ์ ์ง์ญํ ๊ฒ๊ณผ ๋น์ทํ๊ฒ "์ปจํ ์ธ ์ ํฌ๊ธฐ์ ์์น๋ฅผ ํจ์๋ก ๋ํ๋ด๋ ์ปจํ ์ด๋ ๋ทฐ์ผ!" ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
GeometryReader๋ฅผ ์ด๊ธฐํ ํ๋ ๋ฐฉ๋ฒ์ ์๋์ ๊ฐ์ด ์ปจํ ์ธ ๋ฅผ ๋ง๋๋๋ฐ GeometryProxy๋ฅผ ์ด์ฉํด์ ๋ง๋ญ๋๋ค.
GeometryProxy๋?
๊ทธ๋ ๋ค๋ฉด GeometryProxy๋ ๋ฌด์์ผ๊น์?
์ฐ์ Proxy์ ๋ป์ ๋ฌด์์ธ๊ฐ๋ฅผ ๋์ ํ๋ค๋ ์๋ฏธ๋ฅผ ๋ํ๋ ๋๋ค.
๊ณ ๋ก Geometry + Proxy๋ ๊ธฐํํ์ ์ธ ์ ๋ณด๋ฅผ ๋์ ๋ํ๋ด์ฃผ๋ ๋ฌด์์ด๋ผ๊ณ ํด์ํ ์ ์๊ฒ ๋ค์.
GeometryReader์ ๊ณต์ ๋ฌธ์์์ ์๋๋ก ๋ด๋ฆฌ๋ฉด See Also๋ก GeometryProxy๊ฐ ์์ต๋๋ค.
๊ณต์ ๋ฌธ์์๋ "์ปจํ ์ด๋ ๋ทฐ์ ์ขํ๋ ํฌ๊ธฐ๋ฅผ ์ ๊ทผํ ์ ์๋ ๊ฒ" ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ฆ, GeometryReader๋ ๊ธฐํํ์ ์ธ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ ์ปจํ ์ด๋ ๋ทฐ ์์ฒด์ด๊ณ ํด๋น ์ ๋ณด๋ฅผ ์ป์ด๋ด๊ธฐ ์ํด์ GeometrryProxy๋ฅผ ์ด์ฉํด์ผ ํ๋ ๊ฒ์ด์ฃ .
GeometryProxy๋ฅผ ํตํด์ ์ ๊ทผํ ์ ์๋ ๊ฐ์ ์๋์ ๊ฐ์ด frame(in:), size, safeAreaInsets๊ฐ ์์ต๋๋ค.
๋ณดํต frame(in:) ๋ฉ์๋๋ฅผ ์ด์ฉํ์ฌ ์ขํ๊ฐ์ ๊ตฌํ๊ณ , size๋ฅผ ์ด์ฉํ์ฌ ํฌ๊ธฐ๋ฅผ, safeAreaInsets๋ฅผ ํตํด ์ปจํ ์ด๋ ๋ทฐ์ safe area์ ๊ฐ์ฅ ์๋ฆฌ๋ฅผ ๊ตฌํ ์ ์์ต๋๋ค.
์ง์ ์ฌ์ฉํด๋ณด๊ธฐ
์์์ ์ด๋ก ์ ์ดํด ๋ณด์์ผ๋ ์ค์ ๋ก ์ด๋ป๊ฒ ์ฐ์ด๋์ง ์์๋ณด๊ฒ ์ต๋๋ค.
์๋์ ๊ฐ์ด VStack๊ณผ HStack๊ณผ Spacer()๋ฅผ ์ด์ฉํ์ฌ GeometryReaderDetailView๋ฅผ ๋ฐฐ์นํด ๋ณด๊ฒ ์ต๋๋ค.
GeometryReaderView
struct GeometryReaderView: View {
var body: some View {
VStack {
Spacer()
HStack {
GeometryReaderDetailView()
Spacer()
}
}
}
}
GeometryReaderDetailView
struct GeometryReaderDetailView: View {
var body: some View {
Rectangle()
}
}
์ด๋ ๊ฒ ๋ฐฐ์นํ๋ฉด ์๋์ ๊ฐ์ด ํ๋ฉด์ ๋ํ๋๊ฒ ๋ฉ๋๋ค.
์ด์ ๊ฐ์ด ๋ํ๋๋ ์ด์ ๋ SwiftUI์์ Content๋ฅผ ํ์ ํ๊ณ ํด๋น ํฌ๊ธฐ๋ฅผ ์์ธกํ์ฌ ์ค์ ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
์์ ๊ฐ์ ํ๋ฉด์์ ๊ฒ์ ์ ์ฌ๊ฐํ์ ํฌ๊ธฐ๋ฅผ ์ด๋ป๊ฒ ๊ตฌํ ์ ์์๊น์?
๋ฐ๋ก ์ฌ๊ธฐ์ GeometryReader๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
Size
์๋์ ๊ฐ์ด ํฌ๊ธฐ๋ฅผ ์์๋ด๊ณ ์ถ์ View๋ฅผ GeometryReader๋ก ๊ฐ์ธ์ค๋๋ค.
struct GeometryReaderView: View {
var body: some View {
VStack {
Spacer()
HStack {
GeometryReader { proxy in
GeometryReaderDetailView()
.onAppear {
print(proxy.size)
}
}
Spacer()
}
}
}
}
์๋์ ๊ฐ์ด GeometryReaderDetailView์ width์ height๋ฅผ ์์๋ผ ์ ์์ต๋๋ค.
Frame
์ด์ ํฌ๊ธฐ๋ฅผ ์์๋์ผ๋ ํด๋น ์ปจํ ์ด๋๊ฐ ์ด๋์ ์์นํด ์๋์ง ์ขํ๋ฅผ ๊ตฌํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์ขํ๋ฅผ ๊ตฌํ๊ธฐ ์ํด์ proxy์ frame(in:)์ ์ด์ฉํด์ผ ํ๋๋ฐ์.
์ด 3๊ฐ์ง coordinatespace๊ฐ ์กด์ฌํฉ๋๋ค.
CoordinateSpace๋?
๊ณต์ ๋ฌธ์์ "๋ทฐ์ ์ขํ์ ์ด๋ฆ์ ์ ํด์ ๋ค๋ฅธ ์ฝ๋์์ ์๋ํ๋๋ก ํ๋ ๋ฉ์๋" ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ฆ, ๋ทฐ์ ์์น๋ฅผ '์ด๋ ๊ธฐ์ค์ผ๋ก ๋ฐ๋ผ๋ณผ ๊ฒ์ธ๊ฐ'๋ฅผ ์ ํ๋ ๋ฉ์๋์ ๋๋ค.
์ด๋ฏธ ์ ํด์ง ๊ธฐ์ค์ด global,local์ด ์กด์ฌํ๋ฉฐ ์ํ๋ ๋ทฐ๋ฅผ named๋ฅผ ํตํด์ ์ด๋ฆ ๋ถ์ผ ์ ์์ต๋๋ค.
1. global
global์ ์ ์ฒด ํ๋ฉด์์ ๋ฐ๋ผ๋ณด์์ ๋์ ์์น๋ฅผ ์๋ฏธํฉ๋๋ค.
2. local
ํ์ฌ ์ง์ ์ ์ผ๋ก ๊ฐ์ธ์ ธ ์๋ ๋ทฐ์์ ๋ฐ๋ผ๋ณด์์ ๋์ ์์น๋ฅผ ์๋ฏธํฉ๋๋ค.
3. named
์ํ๋ ๋ทฐ์ ์ด๋ฆ์ ๋ถ์ด๊ณ ํด๋น ๋ทฐ์์ ๋ฐ๋ผ๋ณด์์ ๋ ์์น๋ฅผ ์๋ฏธํฉ๋๋ค.
๋ค์ GeometryProxy์ frame(in:)์ผ๋ก ๋์์์ ์ค๋ช ํ๋ฉด,
GeometryReaderDetail๋ทฐ์ ์์น๋ฅผ ์ด๋ ๋ทฐ ๊ธฐ์ค์ผ๋ก ๋ฐ๋ผ๋ณผ ๊ฒ์ธ์ง๋ฅผ ์ ํ๋ ๊ฒ์ธ๋ฐ์.
์๋์ ๊ฐ์ด global - ๋ทฐ ์ ์ฒด์์ ์์น , local - GeotryReader์์์ ์์น , named("HStack") HStack์์ ์์น๋ฅผ ์ถ๋ ฅํด ๋ณด๊ฒ ์ต๋๋ค.
var body: some View {
VStack {
Spacer()
HStack {
Spacer()
GeometryReader { proxy in
GeometryReaderDetailView()
.onAppear {
print(proxy.frame(in: .global))
print(proxy.frame(in: .local))
print(proxy.frame(in: .named("HStack")))
}
}
}
.coordinateSpace(name: "HStack")
}
}
์๋์ ๊ฐ์ด ์ถ๋ ฅ๋๊ฒ ๋ฉ๋๋ค.
SafeAreaInsets
GeometryProxy์์ ํด๋น ์ปจํ ์ด๋ ๋ทฐ์ safeareaInsets์ ์ ๋ณด๋ ์์๋ผ ์ ์๋๋ฐ์.
์๋์ ๊ฐ์ด View๋ฅผ ๋ฐฐ์นํ๊ณ safeAreaInsets๋ฅผ ์ถ๋ ฅํ๋ฉด
var body: some View {
VStack {
HStack {
GeometryReader { proxy in
GeometryReaderDetailView()
.onAppear {
print(proxy.safeAreaInsets)
}
}
}
}
}
์์์ safearea๊ฐ ์์ชฝ๊ณผ ์๋์ชฝ๋ง ์ ์ฉ์ด ๋์ด ์์ผ๋ top,bottom์ ๊ฐ๋ง ์ถ๋ ฅ๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
๋ง์ฝ VStack์ safearea๋ฅผ ๋ฌด์ํ๋๋ก ํ๊ฒ ๋๋ฉด
VStack {
HStack {
GeometryReader { proxy in
GeometryReaderDetailView()
.onAppear {
print(proxy.safeAreaInsets)
}
}
}
}
.ignoresSafeArea(.all)
์๋์ ๊ฐ์ด safearea๊ฐ ์์ชฝ๊ณผ ์๋์ชฝ์ด ๋ฌด์๋๊ฒ ๋ฉ๋๋ค.
๊ณ ๋ก ์ถ๋ ฅ๋๋ ๊ฐ๋ top๊ณผ bottom์ด 0์ผ๋ก ๋ณํ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
์ค๋์ ์ด๋ ๊ฒ GeometryReader์ ๋ํด์ ์์๋ณด์๋๋ฐ์.
์ด๊ฒ์ ํตํด์ ์ข ๋ ์ธ๋ถ์ ์ด๊ณ ์ ๊ตํ ๋ ์ด์์ ์์ ์ SwiftUI์์ ํ ์ ์๊ฒ ๋ค๋ผ๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
ํน์๋ผ๋ ํ๋ฆฐ ์ ์ด ์๊ฑฐ๋ ์ง์ ํด์ฃผ์ค ๋ถ๋ถ์ด ์๋ค๋ฉด ๋๊ธ๋ก ์๋ ค์ฃผ์ธ์!
Reference
'๐ iOS > SwiftUI' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[SwiftUI] ์์ฐ์ค๋ฌ์ด ํ๋ฉด์ ํ ์ ๋๋ฉ์ด์ ๊ตฌํํ๊ธฐ (feat. matchedGeometryEffect,Namespace) (0) | 2022.03.28 |
---|---|
[SwiftUI] TabView์ ๋ํด ์์๋ณด๊ธฐ (feat. UITabBar) (0) | 2022.03.10 |
[SwiftUI] @State๋? (1) | 2021.11.07 |
๋๊ธ