teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問swift初心者　storyのように横にスワイプするのではなく、tiktokのように縦にスワイプさせたい

編集履歴

質問編集履歴

2

storyのように横にスワイプするのではなく、tiktokのように縦にスワイプさせたい

2021/07/07 15:50

投稿

animal_anny
animal_anny

スコア4

test CHANGED
@@ -1 +1 @@
1
- swift初心者　TabViewで横にスワイプさせるのではなく、縦にスワイプさせる方針を教えてください
1
+ swift初心者　storyのように横にスワイプするのではなく、tiktokのように縦にスワイプさせたい
test CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
 
4
4
 
5
- 初心者です。tabviewはそのまま使うと左から右にスワイプされますが、それを上から下にスワイプさせるにはどうすればいいですか？方針だけでも教えてください
5
+ 初心者です。storyのように横にスワイプするのではなく、tiktokのように縦にスワイプさせたい方針だけでも教えてください
6
6
 
7
7
  ### 前提・実現したいこと
8
8
 
9
9
 
10
10
 
11
- 一部だけ抜粋させていただきました。
11
+
12
12
 
13
13
  参考にしたのはhttps://youtu.be/NTun83toSQQです。
14
14
 
@@ -20,17 +20,177 @@
20
20
 
21
21
  ```
22
22
 
23
+ import SwiftUI
24
+
25
+
26
+
27
+ struct ContentView: View {
28
+
29
+ var body: some View {
30
+
31
+
32
+
33
+ Home()
34
+
35
+ }
36
+
37
+ }
38
+
39
+
40
+
41
+ struct ContentView_Previews: PreviewProvider {
42
+
43
+ static var previews: some View {
44
+
45
+ ContentView()
46
+
47
+ }
48
+
49
+ }
50
+
51
+
52
+
53
+ struct Home : View {
54
+
55
+ var width = UIScreen.main.bounds.width
56
+
57
+ var body : some View{
58
+
59
+
60
+
61
+ TabView{
62
+
63
+
64
+
65
+ ForEach(data){story in
66
+
67
+
68
+
69
+ GeometryReader{g in
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+ ZStack{
80
+
81
+
82
+
83
+ LinearGradient(gradient: .init(colors: [Color("top"),story.color]),
84
+
85
+ startPoint: .top, endPoint: .bottomTrailing).cornerRadius(10)
86
+
87
+
88
+
89
+ Image(story.story)
90
+
91
+ .resizable()
92
+
93
+ .aspectRatio(contentMode: .fit)
94
+
95
+ .padding(.horizontal)
96
+
97
+
98
+
99
+ VStack(alignment: .leading, spacing: 12){
100
+
101
+
102
+
103
+ ZStack(alignment: Alignment(horizontal: .leading, vertical:
104
+
105
+ .center), content: {
106
+
107
+
108
+
109
+ Capsule()
110
+
111
+ .fill(Color.black.opacity(0.3))
112
+
113
+ .frame(height: 2.5)
114
+
115
+
116
+
117
+ Capsule()
118
+
119
+ .fill(Color.white)
120
+
121
+ .frame(width: story.offset,height: 2.5)
122
+
123
+ })
124
+
125
+ HStack(spacing: 12){
126
+
127
+
128
+
129
+ Image(story.story)
130
+
131
+ .resizable()
132
+
133
+ .aspectRatio(contentMode: .fill)
134
+
135
+ .frame(width: 40, height: 40)
136
+
137
+ .clipShape(Circle())
138
+
139
+
140
+
141
+ Text(story.name)
142
+
143
+ .foregroundColor(.white)
144
+
145
+
146
+
147
+
148
+
149
+ Text(story.time)
150
+
151
+ .foregroundColor(.white)
152
+
153
+ }
154
+
155
+
156
+
157
+ Spacer()
158
+
159
+
160
+
161
+ }
162
+
163
+ .padding(.all)
164
+
165
+ }
166
+
167
+ .frame(width: g.frame(in: .global).width, height: g.frame(in:.global).height)
168
+
169
+
170
+
23
- .rotation3DEffect(.init(degrees: getAngle(xOffset: g.frame(in: .global).minX)),
171
+ .rotation3DEffect(.init(degrees: getAngle(xOffset: g.frame(in: .global).minX)),
24
-
172
+
25
- axis: (x:0.0, y:1.0, z: 0.0),
173
+ axis: (x:0.0, y:1.0, z: 0.0),
26
-
174
+
27
- anchor: g.frame(in: .global).minX > 0 ? .leading : .trailing,
175
+ anchor: g.frame(in: .global).minX > 0 ? .leading : .trailing,
28
-
176
+
29
- perspective: 2.5)
177
+ perspective: 2.5)
178
+
179
+
180
+
30
-
181
+ }
182
+
31
-
183
+ }
184
+
32
-
185
+ }
186
+
33
-
187
+ .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
188
+
189
+ .background(Color.black.edgesIgnoringSafeArea(.all))
190
+
191
+ }
192
+
193
+
34
194
 
35
195
  func getAngle(xOffset: CGFloat)-> Double{
36
196
 
@@ -48,4 +208,54 @@
48
208
 
49
209
  }
50
210
 
211
+ }
212
+
213
+
214
+
215
+ struct Story : Identifiable {
216
+
217
+
218
+
219
+ var id = UUID().uuidString
220
+
221
+ var story : String
222
+
223
+ var name : String
224
+
225
+ var time : String
226
+
227
+ var offset : CGFloat
228
+
229
+ var color : Color
230
+
231
+ }
232
+
233
+
234
+
235
+ var data = [
236
+
237
+
238
+
239
+ Story(story: "p1", name: "catherine", time: "122h", offset: 100, color: .yellow),
240
+
241
+ Story(story: "p2", name: "ijustine", time: "122h", offset: 200, color: .yellow),
242
+
243
+ Story(story: "p3", name: "emily", time: "122h", offset: 50, color: .yellow),
244
+
245
+ Story(story: "p4", name: "juliana", time: "122h", offset: 250, color: .yellow),
246
+
247
+ Story(story: "p5", name: "Emma", time: "122h", offset: 80, color: .yellow)
248
+
249
+
250
+
251
+
252
+
253
+ ]
254
+
255
+
256
+
257
+
258
+
259
+
260
+
51
261
  ```

1

一部だけ抜粋させていただきました。 参考にしたのはhttps://youtu.be/NTun83toSQQです。 これをtiktokのように縦に回転させたいです。

2021/07/07 15:50

投稿

animal_anny
animal_anny

スコア4

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,49 @@
3
3
 
4
4
 
5
5
  初心者です。tabviewはそのまま使うと左から右にスワイプされますが、それを上から下にスワイプさせるにはどうすればいいですか？方針だけでも教えてください
6
+
7
+ ### 前提・実現したいこと
8
+
9
+
10
+
11
+ 一部だけ抜粋させていただきました。
12
+
13
+ 参考にしたのはhttps://youtu.be/NTun83toSQQです。
14
+
15
+ これをtiktokのように縦に回転させたいです。
16
+
17
+ ### 発生している問題・エラーメッセージ
18
+
19
+
20
+
21
+ ```
22
+
23
+ .rotation3DEffect(.init(degrees: getAngle(xOffset: g.frame(in: .global).minX)),
24
+
25
+ axis: (x:0.0, y:1.0, z: 0.0),
26
+
27
+ anchor: g.frame(in: .global).minX > 0 ? .leading : .trailing,
28
+
29
+ perspective: 2.5)
30
+
31
+
32
+
33
+
34
+
35
+ func getAngle(xOffset: CGFloat)-> Double{
36
+
37
+
38
+
39
+ let tempAngle = xOffset / (width / 2)
40
+
41
+ let rotationDegree: CGFloat = 25
42
+
43
+
44
+
45
+ return Double(tempAngle * rotationDegree)
46
+
47
+
48
+
49
+ }
50
+
51
+ ```