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 Foundation
import SwiftUI import SwiftUI
class User: Identifiable { struct User: Identifiable, Hashable {
var id = UUID().uuidString var id = UUID().uuidString
var profilePictureUrl:String var profilePictureUrl:String
@@ -9,35 +9,70 @@ import SwiftUI
struct ChatsCarouselView: View { struct ChatsCarouselView: View {
@StateObject var viewModel:ChatsCarouselViewModel = ChatsCarouselViewModel() @StateObject var viewModel:ChatsCarouselViewModel = ChatsCarouselViewModel()
// current snapped/selected user
@State var selectedUserId: String = ""
@State var selectedUser: User?
var body: some View { var body: some View {
mainCarouselView 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 { var mainCarouselView: some View {
TabView { TabView(selection: $selectedUserId) {
ForEach(viewModel.carouselUsers) { carouselUser in ForEach(viewModel.carouselUsers) { carouselUser in
GeometryReader {proxy in GeometryReader {proxy in
let minX = proxy.frame(in: .global).minX let minX = proxy.frame(in: .global).minX
let scale = getScale(proxy: proxy)
Image(carouselUser.profilePictureUrl) Image(carouselUser.profilePictureUrl)
.renderingMode(.original) .renderingMode(.original)
.resizable() .resizable()
.aspectRatio(contentMode: .fit) .aspectRatio(contentMode: .fit)
.clipShape(Circle()) .clipShape(Circle())
.shadow(radius: 10) .shadow(radius: 10)
.padding() .rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0)) .blur(radius: abs(minX) / 40)
.blur(radius: abs(minX) / 40) .scaleEffect()
.padding(50)
} }
.frame(width: UIScreen.main.bounds.width)
.tag(carouselUser.id)
} }
} }
.tabViewStyle(.page(indexDisplayMode: .always)) .tabViewStyle(.page(indexDisplayMode: .never))
.frame(height: 400) .padding(.vertical, 60)
.padding(.top, 50) .overlay(
.padding(.horizontal, 30) 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 import Foundation
final class ChatsCarouselViewModel: ObservableObject { final class ChatsCarouselViewModel: ObservableObject {
@Published var carouselUsers:[CarouselUser] = [] @Published var carouselUsers:[User]
init() { init() {
carouselUsers = [ self.carouselUsers = [
CarouselUser(_profilePic: "liam", _firstN: "Liam", _lastN: "Digregorio"), User(_profilePic: "liam", _firstN: "Liam", _lastN: "Digregorio"),
CarouselUser(_profilePic: "heran", _firstN: "Heran", _lastN: "Patel"), User(_profilePic: "heran", _firstN: "Heran", _lastN: "Patel"),
CarouselUser(_profilePic: "sarth", _firstN: "Sarth", _lastN: "Shah"), User(_profilePic: "sarth", _firstN: "Sarth", _lastN: "Shah"),
CarouselUser(_profilePic: "kevin", _firstN: "Kevin", _lastN: "Le"), User(_profilePic: "kevin", _firstN: "Kevin", _lastN: "Le"),
CarouselUser(_profilePic: "rohan", _firstN: "Rohan", _lastN: "Chadha") User(_profilePic: "rohan", _firstN: "Rohan", _lastN: "Chadha")
] ]
} }
} }
class CarouselUser: User { //struct CarouselUser {
// add anything specific needed in the view for carousel // // add anything specific needed in the view for carousel
// perhaps notification information for each // // perhaps notification information for each
// their messages? // // their messages?
} //
//}
//sample data //sample data