Hello,
I'm trying to implement Geometryreader in a tabview and I'm having difficulties.
My application is divided in 4 parent views and on which we go with a tabBar. In the first view "Home", there is also a custom tabBar.
I would like that when I scroll the child view given by the custom tabview, the title of the mother view "Home //(Accueil)" moves in the toolbar.
When I follow the tutorials on internet to print the minY when I scroll, nothing appears.
Here is the code of my mother view:
struct HomeView: View {
@State var top = UIApplication
.shared
.connectedScenes
.flatMap { ($0 as? UIWindowScene)?.windows ?? [] }
.first { $0.isKeyWindow }
@State var currentTab: Int = 0
var body: some View {
VStack(alignment: .leading){
VStack {
HStack{
friendsButton
Spacer()
profilButton
settingsButton
}
.padding()
}
title
ZStack(alignment: .topLeading){
//selectedView
TabView(selection: self.$currentTab){
NewsView() .tag(0)
ProgressView().tag(1)
MyTrophiesView().tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .never)).edgesIgnoringSafeArea(.all)
//tabBar
TabBarHomeView(currentTab: self.$currentTab)
}
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}
extension HomeView{
private var settingsButton: some View{...}
private var profilButton: some View{...}
private var friendsButton: some View{...}
private var title: some View{...}
}
Here is the code for my child view "News":
@State var offset: CGFloat = 0
var body: some View {
ScrollView(showsIndicators: false){
VStack{
Spacer()
.frame(height:50)
SeasonPopUpView()
newPoisView()
randomDrawView()
toursView()
Spacer()
}
}
.padding(.top, 10)
.overlay(
GeometryReader{proxy -> Color in
let minY = proxy.frame(in: .global).minY
print(minY)
return Color.clear
}
)
}
}
Here is the code of my custom tabBar:
import SwiftUI
//TabBar Model
struct TabBarHomeView: View{
@Binding var currentTab: Int
@Namespace var namespace
var tabBarOptions: [String] = ["Actualité", "Progression", "Trophées"]
var body: some View{
HStack(spacing: 0){
ForEach(Array(zip(self.tabBarOptions.indices, self.tabBarOptions)),
id:\.0,
content: {
index, name in
TabBarHomeItem(currentTab: self.$currentTab,
namespace: namespace.self,
tabBarItemName: name,
tab: index)
})
}
.padding(.horizontal)
.background(.ultraThinMaterial)
.frame(height: 43)
.cornerRadius(5)
.padding(.horizontal, 5)
.padding(.vertical, 0)
//.edgesIgnoringSafeArea(.all)
}
}
// TabBar buttons model
struct TabBarHomeItem: View{
@Binding var currentTab: Int
let namespace: Namespace.ID
var tabBarItemName: String
var tab: Int
var body: some View{
Button{
self.currentTab = tab
} label: {
VStack(spacing:7){
Spacer(minLength: 3)
Text(tabBarItemName)
.font(.title3)
.fontWeight(.medium)
if currentTab == tab{
Color.primary
.frame(height: 5)
.matchedGeometryEffect(id: "underline",
in: namespace,
properties: .frame)
}else{
Color.clear.frame(height: 5)
}
}
.animation(.spring(), value: self.currentTab)
}
.buttonStyle(.plain)
}
}
My goal is that the title appear in small between the top buttons, that the custom tabBar come to stay blocked under the toolBar (like a pinned section title in a list), and that the whole takes the background color of the custom tabBar in its initial state.
Here is a picture of the HomeView:
If you have any hints I'm interested.
Thanks for reading.
It was necessary to implement geometryreader inside the tabView.
ScrollView(.vertical, showsIndicators: false, content:{
NewsView()
.tag(0)
.padding(.top, 10)
.overlay(
GeometryReader{proxy -> Color in
let minY = proxy.frame(in: .global).minY
print(minY)
return Color.clear
}
.frame(width: 0, height: 0)
)
}
)
ProgressView().tag(1)
MyTrophiesView().tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .never)).edgesIgnoringSafeArea(.all)