more progress with a double carousel

This commit is contained in:
talksik
2021-12-12 00:09:15 -08:00
parent 980c9b2fee
commit e912a32e7f
3 changed files with 65 additions and 29 deletions
+1 -1
View File
@@ -8,7 +8,7 @@
import Foundation
import SwiftUI
class User: Identifiable {
struct User: Identifiable, Hashable {
var id = UUID().uuidString
var profilePictureUrl:String
@@ -9,35 +9,70 @@ import SwiftUI
struct ChatsCarouselView: View {
@StateObject var viewModel:ChatsCarouselViewModel = ChatsCarouselViewModel()
// current snapped/selected user
@State var selectedUserId: String = ""
@State var selectedUser: User?
var body: some View {
mainCarouselView
}
private func getScale(proxy: GeometryProxy) -> CGFloat {
let scale:CGFloat = 2
return scale
}
func getSelectedUser(userId: String) -> User {
return self.viewModel.carouselUsers.filter{user in
return user.id == userId
}[0]
}
var mainCarouselView: some View {
TabView {
TabView(selection: $selectedUserId) {
ForEach(viewModel.carouselUsers) { carouselUser in
GeometryReader {proxy in
let minX = proxy.frame(in: .global).minX
let scale = getScale(proxy: proxy)
Image(carouselUser.profilePictureUrl)
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.shadow(radius: 10)
.padding()
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.blur(radius: abs(minX) / 40)
Image(carouselUser.profilePictureUrl)
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.shadow(radius: 10)
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.blur(radius: abs(minX) / 40)
.scaleEffect()
.padding(50)
}
.frame(width: UIScreen.main.bounds.width)
.tag(carouselUser.id)
}
}
.tabViewStyle(.page(indexDisplayMode: .always))
.frame(height: 400)
.padding(.top, 50)
.padding(.horizontal, 30)
.tabViewStyle(.page(indexDisplayMode: .never))
.padding(.vertical, 60)
.overlay(
ScrollViewReader{proxy in
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
ForEach(viewModel.carouselUsers) {user in
Image(user.profilePictureUrl)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 70, height: 60)
.cornerRadius(12)
}
}
.padding()
}
.frame(height: 80)
.background(Color.blue)
},
alignment: .bottom
)
}
@@ -8,23 +8,24 @@
import Foundation
final class ChatsCarouselViewModel: ObservableObject {
@Published var carouselUsers:[CarouselUser] = []
@Published var carouselUsers:[User]
init() {
carouselUsers = [
CarouselUser(_profilePic: "liam", _firstN: "Liam", _lastN: "Digregorio"),
CarouselUser(_profilePic: "heran", _firstN: "Heran", _lastN: "Patel"),
CarouselUser(_profilePic: "sarth", _firstN: "Sarth", _lastN: "Shah"),
CarouselUser(_profilePic: "kevin", _firstN: "Kevin", _lastN: "Le"),
CarouselUser(_profilePic: "rohan", _firstN: "Rohan", _lastN: "Chadha")
self.carouselUsers = [
User(_profilePic: "liam", _firstN: "Liam", _lastN: "Digregorio"),
User(_profilePic: "heran", _firstN: "Heran", _lastN: "Patel"),
User(_profilePic: "sarth", _firstN: "Sarth", _lastN: "Shah"),
User(_profilePic: "kevin", _firstN: "Kevin", _lastN: "Le"),
User(_profilePic: "rohan", _firstN: "Rohan", _lastN: "Chadha")
]
}
}
class CarouselUser: User {
// add anything specific needed in the view for carousel
// perhaps notification information for each
// their messages?
}
//struct CarouselUser {
// // add anything specific needed in the view for carousel
// // perhaps notification information for each
// // their messages?
//
//}
//sample data