solid smooth movement with double carousel and interaction between

This commit is contained in:
talksik
2021-12-12 01:09:59 -08:00
parent dea82938a8
commit cd830affb6
@@ -13,9 +13,6 @@ struct ChatsCarouselView: View {
@State var selectedUserId: String = "" @State var selectedUserId: String = ""
@State var selectedUser: User? @State var selectedUser: User?
var body: some View {
mainCarouselView
}
private func getScale(proxy: GeometryProxy) -> CGFloat { private func getScale(proxy: GeometryProxy) -> CGFloat {
let scale:CGFloat = 2 let scale:CGFloat = 2
@@ -29,8 +26,9 @@ struct ChatsCarouselView: View {
}[0] }[0]
} }
var mainCarouselView: some View { var body: some View {
VStack { VStack {
// main big carousel
TabView(selection: $selectedUserId) { TabView(selection: $selectedUserId) {
ForEach(viewModel.carouselUsers) { carouselUser in ForEach(viewModel.carouselUsers) { carouselUser in
GeometryReader {proxy in GeometryReader {proxy in
@@ -58,6 +56,7 @@ struct ChatsCarouselView: View {
self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? "" self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? ""
} }
// Bottom navigation carousel
ScrollViewReader {proxy in ScrollViewReader {proxy in
ScrollView(.horizontal, showsIndicators: false) { ScrollView(.horizontal, showsIndicators: false) {
HStack { HStack {
@@ -71,8 +70,8 @@ struct ChatsCarouselView: View {
.cornerRadius(12) .cornerRadius(12)
.clipShape(Circle()) .clipShape(Circle())
.shadow(radius: 10) .shadow(radius: 10)
.scaleEffect(isSelected ? 1.2 : 1) .scaleEffect(isSelected ? 1.2 : 0.7)
.padding(.all, 16.0) .padding(.leading, 30.0)
.id(user.id) .id(user.id)
.onTapGesture { .onTapGesture {
withAnimation { withAnimation {
@@ -81,8 +80,7 @@ struct ChatsCarouselView: View {
} }
} }
} }
.frame(maxHeight: 100) .frame(maxHeight: 50)
.padding(.leading, UIScreen.main.bounds.width * 0.4)
.padding(.vertical, 20) .padding(.vertical, 20)
} }
.onChange(of: self.selectedUserId) { _ in .onChange(of: self.selectedUserId) { _ in