1단 배너 요소 정리
- 뒤의 이미지
- 캡슐 모양의 현재 위치 표시
- 사각형의 text 배너
- 자동 스크롤
- 스크롤이 절반 진행시 이미지 변경
3차 시도 성공!!!!!!
이번 시도는 성공했다.
이 문제를 해결하기 위해서는 Draggesture의 반응을 제어해야 했다.
기존의 코드에서는 .onchange 함수 내부에
offset.width = offset.width + value.translation.width이런 식으로 코드를 작성했는데
이번에는 draggesture에서 .updating를 사용하여 진행했다.
.updating($offset) { value, out, _ in
out = value.translation.width
}이렇게 드래그 제스쳐를 사용하면 드래그의 반응을 터치하는 방향으로 움직일 수 있다.
해당 코드는 아이폰 14프로 맥스를 기준으로 만들었다.
import SwiftUI
struct never_weptoon_2: View {
@State var first_view_drag_offset : CGSize = CGSize.zero
@GestureState var offset: CGFloat = -640
@State var currentIndex : Int = 1
@State var width : CGFloat = UIScreen.main.bounds.width
@State private var shouldStop = false
@State private var left_right_toggle : Int = 0
var body: some View {
GeometryReader{proxy in
let offsetX: CGFloat = offset + CGFloat((CGFloat(left_right_toggle) * proxy.size.width - 70))
- CGFloat(left_right_toggle * 60)
VStack(spacing: 0){
VStack{
// Color.yellow
first_web_view(drag_offset: $first_view_drag_offset,currentIndex: $currentIndex,
width: $width, stop: $shouldStop, offset: offsetX)
}
.animation(.easeInOut)
.gesture(
DragGesture(minimumDistance: 0)
.updating($offset) { value, out, _ in
out = value.translation.width
}
.onChanged({Value in
})
.onEnded({Value in
print(Value)
if(Value.translation.width < 0){
print("left")
if(currentIndex == 3){
currentIndex = 1
left_right_toggle = 1
}
else{
left_right_toggle += -1
currentIndex += 1
}
}
else if(Value.translation.width > 0){
if(currentIndex == 1){
currentIndex = 3
left_right_toggle = -1
}
else{
left_right_toggle += 1
currentIndex -= 1
}
}
})
)
}
}
}
}
struct first_web_view:View{
@Binding var drag_offset : CGSize
@Binding var currentIndex : Int
@Binding var width : CGFloat
@Binding var stop : Bool
var offset : CGFloat
var body: some View{
GeometryReader{geometry in
ZStack(alignment: .bottom){
if(currentIndex == 1){
color_arr[currentIndex-1]
}
else if(currentIndex == 2){
color_arr[currentIndex-1]
}
else if(currentIndex == 3){
color_arr[currentIndex-1]
}
VStack(alignment: .trailing, spacing: 0){
Capsule()
.overlay(HStack(spacing: 0){
Text("\(currentIndex)")
.fontWeight(.bold)
.foregroundColor(.white)
Text("/5")
.foregroundColor(.white)
}, alignment: .center)
.frame(width: 50, height: 25)
.opacity(0.5)
.offset(x: -35)
.padding(.bottom)
ScrollView(.horizontal, showsIndicators: false){
HStack(spacing: 10){
// let _ = print("\(drag_offset.width * 0.2)")
ForEach(0 ..< 5){item in
ZStack{
Rectangle()
.frame(width: geometry.size.width - 70, height: 50)
.foregroundColor(.red)
Text("\(comment_arr[currentIndex-1])")
// Text("독점 어ㅉ떠구 가스파드")
}
}
}
.offset(x: offset, y : 0)
.padding(.bottom, 10)
}
.scrollDisabled(true)
}
}
}
}
}
let color_arr : [Color] = [.green,.purple,.black]
let comment_arr : [String] = ["쿠기 이벤트" , "터프쿠키", "쿠키런"]
struct never_weptoon_2_Previews: PreviewProvider {
static var previews: some View {
never_weptoon_2()
}
}
해당 코드는 전체 코드이다.
never_weptoon_2 view는 상단 뷰에서 드래그 제스쳐를 담당하는 부분이다.
해당 부분에서는 .onEnded 부분이 제스쳐의 Value.translation.width 값을 보고
왼쪽으로 드래그했는지 오른쪽으로 드래그했는지를 판단하여 인덱스와 left_right_toggle의 값을 정하는 부분이다.
first_web_view부분에서는 그냥 드래그 값을 받아와서 offset에 적용해주면 된다.
여기서 Capsule 부분에서 text를 overlay로 만들어서 내부에 넣었는데 원래는 Zstack을 사용하여 구현할려고 했지만 zstack로 구현해 보니 UI가 깨지는 현상이 발생해서 overlay를 사용하였다.
초기 : scrollview의 페이징 기능으로 구현 할려고 했지만
접근 방식이 이쪽이 아닌 것 같아서 폐기
{
// Color.red
GeometryReader{proxy in
ScrollViewReader{scroll_proxy in
ScrollView(.horizontal, showsIndicators: true){
VStack{
Spacer()
capsule_view(num: test1(Num: $num))
VStack(alignment: .trailing, spacing: 0){
capsule_view(num: test1(Num: $num))
HStack(spacing: 0){
ForEach(0 ..< 10){i in
banner_view(count_num: test2(Num: i))
}
}
.padding(.bottom, 10)
}
}
}
.frame(width: UIScreen.main.bounds.width)
.gesture(
DragGesture()
.onChanged {value in
if(value.translation.width > 0){
print("swipe left")
num -= 1
}else{
print("swipe right")
num += 1
}
}
.onEnded{value in
print("on ended \(value)")
}
)
.onAppear(){
UIScrollView.appearance().isPagingEnabled = true
}
}
}
}작성중 막히는 부분
1차 시도 실패
해당 이미지의 최상단에 있는 이미지에 하단에 배너와 그 위에 capsule 모양 뷰를 넣을려고 했지만 현재 적용이 안되는 문제를 해결 중
1차 시도 실패 이유 : 해당 부분에서는 첫번째 배너를 반복문으로 여러개의 rectangle을 그리는 방법을 채택했는데 반복문을 진행하면서 width 값이 늘어나서 원하는 UI를 그릴 수 없어서 하단을 scrollview로 변경
2차 시도 실패
scrollview를 사용하여 진행하여 원하는 UI를 그려냈지만 dragjesture 부분에서 문제가 발생
드래그 반응이 너무 이상하다는 문제가 발생
네이버 웹툰 어플에서는 상단의 배너를 넘길 때 절반을 기준으로 배너가 넘어가도록 했지만 지금의 드래그 반응으로는 진행하면 안된다고 판단하고 드래그 반응을 먼저 수정하도록 할려고 한다.
