TourApp (5)
회고중 있었던일 정리
오늘은 크게 한게 없어서 같이 공부하던분의 문제점을 좀 같이 해결하면서 있었던 일을 정리해보려한다.
문제점
우선 문제는 이전에 scrollview를 사용하려할때 Frame을 설정하지않으면 사이즈가 바뀌게되는데 이때 나는 귀찮아서 frame을 수동으로 설정을 주고 하다가 귀찮아서
Scrollview를 해제하고 그냥 Vstack을 사용하고 넘어갔다.
근데 팀원분은 사이즈를 나처럼 고정값이 아닌 Device에 따라서 이미지를 유동적으로 설정하고 싶다고 했다.
Text는 괜찮았으나 Tabview에서 이미지가 제대로 사이즈 조절이 안되는게 문제였다.
여러시도
코드는 팀원분것이 아닌 내걸로 일단 적용하여 이야기를 해본다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ScrollView {
VStack(spacing: 20) {
TabView(selection: $currentPage.animation()) {
ForEach(lists.indices, id: \.self) { index in
VStack {
AsyncImage(url: URL(string: lists[index].imageURL)) { image in
image
.resizable()
.aspectRatio(4/3, contentMode: .fit)
.scaledToFit()
.frame(width: self.view.frame.width)
} placeholder: {
Image(systemName: "photo")
}
Link(destination: URL(string: lists[index].shopURL)!) { Text(lists[index].shopTitle)
.fontWeight(.bold)
.foregroundStyle(.blue)
}
}
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
당시 modifier는 이런식으로 되어있었다.
하지만 UIkit과는 달리 SwiftUI에서는 위와같이 self.view.frame.width를 사용하게되면
1
Value of type 'PageView' has no member 'view'
이렇게 에러가난다.
- width를 재설정
우선 uikit에서는 되었지만 지금은 안되기에 저부분을 지우고 디바이스의 크기를 통해 가로길이를 설정하는
UIScreen.main.bounds.width로 바꾸고 시도를 해보았다.
결과는 실패
- GeometryReader를 사용하여 시도
1
2
3
4
5
6
7
GeometryReader { geometry in
Image("exampleImage")
.resizable()
.scaledToFill()
.frame(width: geometry.size.width, height: geometry.size.width * 0.6)
}
.frame(height: UIScreen.main.bounds.width * 0.6) // 기본 높이 설정
위의 코드는 예시.
frame을 설정하고 해보았으나 역시나 되지 않았다.
오히려 이미지 사이즈가 더 작아지는 문제가 발생
GeometryReader는 뭔가 좌표값을 통해서 위치를 지정해주는 느낌이 강했다.
이건 나중에 다시 정리를 해보는게 좋을듯
근본적인 문제 파악
GPT에 scrollview를 사용했을때 이미지 사이즈가 작아지는 근본적인 문제에 대해 물어본 결과
ScrollView 내부에 TabView를 배치하고, 그 안에 ImageView를 넣었을 때, 이미지가 작아지는 현상이 발생하는 이유는 SwiftUI의 레이아웃 계산 방식과 관련이 있다. SwiftUI에서 ScrollView는 자식 뷰의 크기를 제한하지 않지만, TabView는 기본적으로 자식 뷰의 크기를 자동으로 축소한다. 이로 인해 Image가 작아질 수 있다.
이렇게 답을 했었다.
하지만 이부분을 간과하고 위와같은 시도를 하다가 문득 TabView에서 내부의 image에 frame을 통해 사이즈를 정해주는것이 아닌
TabView 자체의 Frame을 정해주면 어떨까 라는 생각이 들었다.
이유는 팀원분의 화면을 보면서 Hierarchy도 같이 봤었는데, 이미지의 사이즈가 TabView의 사이즈에 영향을 받는다는것을 알았기 때문이다.
그래서 이런 생각을 하게 되었고 시도를 다시 해보았다.
해결
1
2
3
4
5
6
7
8
9
TabView {
ForEach(0..<5) { index in
Image("exampleImage")
.resizable()
.scaledToFit()
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.5)
이렇게 TabView에 frame을 통해 사이즈를 설정해주니 해결이 되었다.
정리
ScrollView 사용시 TabView 내의 이미지가 제대로 사이즈 조절이 안되는 문제가 발생.
ScrollView는 Children View의 크기를 제한하지 않지만, TabView는 Children View의 크기를 자동으로 축소하려고한다.
그래서 TabView내 ImageView의 Frame을 조정하는게 아닌, TabView 자체 Frame을 조정을 해줘야한다. (Image는 TabView의 크기에 영향을 받기때문)
영양가 높은 회고였다.