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