Hello,
I code a surface application to present a prototype.
I want the compatibility squares (currently green) to vary between green, yellow, orange and red depending on the value of the atribute Proposal.Compatibility .
I have two documents for this:
the view layout
struct ProposalsView: View {
var proposals: [Proposal] = ProposalList.TopTen
var body: some View {
ZStack{
Color.black
.opacity(0.85)
.edgesIgnoringSafeArea(.all)
ZStack{
NavigationView{
VStack(spacing:0){
//List
List(proposals, id: \.id){ Proposal in
HStack{
Image(Proposal.ProfilePicture)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 70, height: 70)
.clipShape(Circle())
Spacer()
.frame(width: 5)
VStack(alignment: .leading, spacing: 5){
Text(Proposal.Name)
.fontWeight(.semibold)
.font(.system(size: 27))
.lineLimit(1)
.minimumScaleFactor(0.5)
Text(Proposal.Age)
.font(.system(size: 20))
}
// rectangle distance
ZStack{
Rectangle()
.fill(Color.blue)
.frame(width: 45, height: 45)
.cornerRadius(8)
Rectangle()
.fill(Color.white)
.frame(width: 40, height: 40)
.cornerRadius(6)
VStack(spacing: -5){
Text(Proposal.Distance)
.fontWeight(.semibold)
.font(.system(size: 23))
Text(" kms")
.font(.system(size: 10))
}
.foregroundColor(.blue)
}
.frame(maxWidth: .infinity, alignment: .trailing)
// rectangle compatibility
ZStack{
Rectangle()
.fill(Color.green)
.frame(width: 45, height: 45)
.cornerRadius(8)
Text(Proposal.Compatibility)
.font(.system(size: 24))
.fontWeight(.semibold)
}
}
}
.background(Color.blue)
.padding(.horizontal, -20)
}
}
.hiddenNavigationBarStyle()
.ignoresSafeArea()
}
}
}
}
struct ProposalsView_Previews: PreviewProvider {
static var previews: some View {
ProposalsView()
}
}
the contact information.
let id = UUID()
let ProfilePicture: String
let Name : String
let Age : String
let Description : String
let Distance : String
let Compatibility : String
}
struct ProposalList{
static let TopTen = [
Proposal(
ProfilePicture: "John",
Name: "John",
Age: "24",
Description: "description",
Distance: "21",
Compatibility: "94")
]
I tried to change the compatibility from String to Int and create a variable with a return on the view, but I did not find the solution.
If you have an idea I would be grateful.
Thank you for reading and have a nice day.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
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.
Good evening,
I am a beginner in SwiftUI (and in code in general).
I am currently trying to make an application for a university project. I would like to organize the layout of my different tabs.
I'm trying to manage by taking different pieces of code from the internet to form what I want to achieve.
Currently I'm stuck for 8 hours on something that seems simple:
A code I copied allowed me to put a presentation name that disappears when you scroll up the page content.
I didn't like the TabBar, so I replaced it with a template that has a more fluid animation.
I am in the following situation:
I would like to form a "Home" tab with 2 categories: "News" and "Challenges".
For this, I have four Swift files:
i. MixView
ii. MixTabBar
iii. NewsView
iv. ChallengesView
The problem comes from the fact that initially on the viewed youtube video, the data of the "News" page was present on the home page.
Scrolling this data made the header disappear.
As I also have the "Challenges", I have to (I think) find a way to make the body contained in the views iii and iv to trigger the hiding of the header on my central page.
if !isHide{
HStack(spacing:12){
Text("Home")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(Color(.black))
Spacer(minLength: 0)
Button(action:{}) {
Image(systemName:"gear")
.foregroundColor(.black)
.padding(10)
.font(.title2)
.clipShape(Circle())
}
}
.padding(.horizontal)
}
GeometryReader{reader -> AnyView in
let yAxis = reader.frame(in: .global).minY
if yAxis < -30 && !isHide{
DispatchQueue.main.async{
withAnimation{isHide = true}
}
}
if yAxis > -30 && isHide{
DispatchQueue.main.async{
withAnimation{isHide = false}
}
}
return AnyView(
Text("")
.frame(width: 0, height: 0)
)
}
I specify that the code worked very well with the View one, but it is the implementation of the second one that causes problems.
The final goal would be to have a page that has a title that disappears when I scroll (on the news sub-tab as on the Challenges sub-tab). As well as being able to swipe from one sub-tab to another (which is the case).
On the second part of the screen, I left the text with the initial code, it makes the header disappear.
I have seen examples with @State and @Binding, but I could not solve my problem.
I recorded my screen so that you have as much information as possible.
https://youtu.be/bf_EjFBXKWU
Thanks in advance and have a great week.