more progress with a double carousel
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user