Hi,
I am just born baby in swift UI. after seeing the Chris 8 day course on YouTube i became confident and starting making my own app.
I am having similar problem. I built an app bar to be included in all the screens. this app bar has an icon on the right hand side to display navigation menu. here is the code from my app bar to display the icon.
import SwiftUI
struct Appbar: View {
var body: some View {
VStack{
HStack{
Spacer()
Image("logo")
.resizable()
.scaledToFit()
.frame(width:50, height: 50)
.aspectRatio(contentMode: .fit)
Text("తెలుగు బైబిలు స్టడీ")
.font(.title2)
.fontWeight(.bold)
.foregroundColor(Color.white)
Spacer()
NavigationLink(destination: MainMenu()) {
Image(systemName: "line.3.horizontal.circle")
.foregroundColor(Color.white)
.font(.system(size: 25))
}
Spacer()
} //hstack
.background(Color.black)
} //vstack
} //body
} //view
struct Appbar_Previews: PreviewProvider {
static var previews: some View {
Appbar()
}
}
MainMenu is another View where i am coding my menu options to be displayed. If i Use a button i could not pass the view in the action.
But nothing is happening on clicking the icon. if i include the code in navigation view then whole interface is getting disturbed. can someone help me to resolve this.
A NavigationLink will only work inside a NavigationView or a NavigationStack
if include navigation stack or navigation view in the code it is getting distorted
NavigationStack{
NavigationLink(destination: MainMenu()) {
Image(systemName: "line.3.horizontal.circle")
.foregroundColor(Color.white)
.font(.system(size: 25))
}
}
Try it like this:
struct Appbar: View {
var body: some View {
NavigationStack {
VStack{
HStack{
Spacer()
Image("logo")
.resizable()
.scaledToFit()
.frame(width:50, height: 50)
.aspectRatio(contentMode: .fit)
Text("తెలుగు బైబిలు స్టడీ")
.font(.title2)
.fontWeight(.bold)
.foregroundColor(Color.white)
Spacer()
NavigationLink(destination: MainMenu()) {
Image(systemName: "line.3.horizontal.circle")
.foregroundColor(Color.white)
.font(.system(size: 25))
}
Spacer()
} //hstack
.background(Color.black)
Spacer()
} //vstack
}
} //body
} //view
1 Like
when i include the app bar with another view it is occupying some extra space. looks like a split screen.
The link is working now. How can i make it appear on top of the screen. it is opening in another page altogether.
I am going to make this a separate thread since it is not related to the original post.
Do you want the Menu bar to appear at the top of every View?
Yes. it should come on top of every view being called later. the subsequent views will be called from the navigation menu options. there is no dynamic content in the app. it is all static pages. coded my home page like this
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Appbar()
HomeScreen()
Spacer()
}
}
}
Generally when you navigate to another view using a NavigationLink you get a < Back button for free on the View that you navigate to. If you want that MenuBar to appear at the top of every View then you are going to have to implement another method to close the View that you Navigate to since the MenuBar will hide the < Back button.
Do you have any tutorials in CWC+ that handle these kind of scenarios. The Menu Should appear like this.
i want every screen to appear like this with app bar on top
when i included the navigation stack in app bar lot of spacing is coming before and after appbar as posted in the earlier screen
I’m not aware of anything that will cover what you want to do.
OK so the menu Pops up. When you select an option you need to close the menu and then present the selected View.
You don’t necessarily need to present each View using a NavigationLink. You could present each View as a .fullScreenCover() which may be less complex.
what concepts i need to learn for implementing this. can you please guide me
Have you considered using a Tab App using the Tabs at the bottom to select the screen you want to view?
It’s late here and I am off to bed.
I have that also in mind but there are total of 66 views in 10 categories. in tab view when user taps on each tab, i can only show one view at a time as per my understanding. in order to implement this navigation i thought pop up menu is best.
as i said i am totally new to iOS. once i thought i cant develop iOS app. but after seeing your tutorials i got lot of boost, confidence and started attempting this.
i Tried like this. dont know it is the best way or not. if you have any suggestions for code improvement please do let me know
import SwiftUI
var Bookno:Int = 0
struct MainMenu: View {
@State private var ViewPresented = false
var body: some View {
Menu{
Menu("పాత నిబంధన"){
Menu("ధర్మశాస్త్రము"){
Button("ఆదికాండము", action: {
ViewPresented.toggle()
Bookno=1
})
Button("నిర్గమకాండము", action: {
ViewPresented.toggle()
Bookno=2
})
Button("లేవీయకాండము", action: {
ViewPresented.toggle()
Bookno=3
})
Button("సంఖ్యాకాండము", action: {
ViewPresented.toggle()
Bookno=4
})
Button("ద్వితీయోపదేశకాండమ", action: {
ViewPresented.toggle()
Bookno=5
})
}
}
}
label: {
Label("", systemImage: "line.3.horizontal.circle")
.font(.system(size: 30.0))
.foregroundColor(Color.white)
}
.font(.body)
.fullScreenCover(isPresented: $ViewPresented) {
DetailView()
}
}
}
struct DetailView: View {
var body: some View {
if (Bookno == 1) { Genesis() }
if (Bookno == 2) { Exodus() }
if (Bookno == 3) { Leviticus() }
if (Bookno == 4) { Numbers() }
if (Bookno == 5) { Deuteronomy() }
}
}
struct MainMenu_Previews: PreviewProvider {
static var previews: some View {
MainMenu()
}
}
Included this View in the App bar view
This Resulted in a Menu Like this one
In the target page coded like this
import SwiftUI
struct Genesis: View {
var body: some View {
VStack() {
Appbar()
Text("Genesis Page")
Spacer()
}
}
}
struct Genesis_Previews: PreviewProvider {
static var previews: some View {
Genesis()
}
}
Each View is coming in its own full screen
