Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
HOW DO I MAKE THEM BOTH APPEAR IN THE VIEW?
I'm trying to make a view with both tabbar & navigationbar,
but it's either shows the navigationBar or the tabBar (depends on which I put first \ on top)
for example - this will show only the Navigation Bar:
var body: some View {
TabView(selection: $selectedTab) {
NavigationView{
CustomTableView(lang: $lang)
.tag(0)
.tabItem {
Text("Home")
Image(systemName: "house.fill")
}
//NavigationBar Title:
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
let title = "Title"
Text(title)
.font(.title)
}
ToolbarItem(placement: .navigationBarTrailing) {
Image(Constants.logoImage).resizable()
.scaledToFit()
.frame(width: 100, height: 50, alignment: .trailing)
}
}
}
}
}
The TabView interpret NavigationView as just a first page view w/o tab item, so nothing is shown. Here is possible fix:
TabView(selection: $selectedTab) {
NavigationView {
CustomTableView(lang: $lang)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
let title = "Title"
Text(title)
.font(.title)
}
ToolbarItem(placement: .navigationBarTrailing) {
Image(Constants.logoImage).resizable()
.scaledToFit()
.frame(width: 100, height: 50, alignment: .trailing)
}
}
}
.tag(0) // << place here !!
.tabItem {
Text("Home")
Image(systemName: "house.fill")
}
}
Related
This question already has answers here:
How to show NavigationLink as a button in SwiftUI
(9 answers)
Closed 8 months ago.
I tried adding a NavigationLink without a NavigationView on another project and it worked.
However when I tried copy and pasting the code onto another project, it doesn't work.
Please help. I've tried testing it on an empty project and it doesn't work as well. I'm wondering what went wrong. I've checked the curly braces placement as well. All placed correctly...
import SwiftUI
struct Intro: View {
var body: some View {
ZStack {
VStack {
Image("CDM")
.resizable()
.frame(width: 500, height: 500, alignment: .center)
HStack {
Text("Welcome to Chatter")
.font(.system(size: 45, weight: .semibold, design: .rounded))
.foregroundColor(Color("Yellow"))
Image(systemName: "message.fill")
.font(.system(size: 45))
.foregroundColor(Color("Yellow"))
.padding()
}
Text("""
Note:
This experience is best viewed in Horizontal
""")
.font(.system(size: 30, weight: .semibold, design: .rounded))
.foregroundColor(.secondary)
.padding()
Button(action: {
print("intro2")
}) {
NavigationLink(destination: Intro2()) {
Text("Next")
.font(.system(size: 30, weight: .semibold ,design: .rounded))
.foregroundColor(.white)
.padding()
.background(Color("Purple"))
.cornerRadius(20)
}
}
}
}
}
}
struct Intro2: View {
var body: some View {
VStack {
Text("What you can do in this experience")
Button {
print("test")
} label: {
NavigationLink(destination: Main()) {
HStack {
Text("Click here to get started!")
.font(.system(size: 25, weight: .regular ,design: .rounded))
.foregroundColor(.white)
.padding()
.background(Color("Purple"))
.cornerRadius(20)
}
}
}
}
}
}
here is an example code, that shows the NavigationLink is not triggered if it is not inside a NavigationView. Comment-out the NavigationView and see the difference.
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
Button { print("testing") } label: {
NavigationLink(destination: Text("Intro link view")) {
Text("Click here to get started!")
}
}
}
}
}
Note that NavigationView will be deprecated, see https://developer.apple.com/documentation/swiftui/navigationview
As I mentioned, there is no need to use a Button, NavigationLink is already a button.
In the screenshot below, the purple image is not aligned horizontally with the globe symbol. I'm trying to center the navigation title with respect to the logo above it which I can totally do with a VStack. However I don't know how to align the logo itself with the navigation trailing item (globe in the screenshot). Any tips? ideas? tutorials? thank you!
struct ContentView: View {
var body: some View {
NavigationView {
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {} label: {Image(systemName: "globe")}
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("image")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}
}
}
}
.navigationBarTitleDisplayMode(.inline)
}
}
Just do same for leading toolbar item (because items are independent and one alignment does not affect other - only size of bar)
Tested with Xcode 13.4 / iOS 15.5
*borders are for better visibility
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack(alignment: .leading) {
Button {} label: {Image(systemName: "globe")}
.frame(height: 24.0)
Text("X").foregroundColor(.clear)
}.border(.red)
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("picture")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}.border(.green)
}
}
I'm trying to figure out why the navigation title is not working with some devices, but I'm not able to figure out this issue. Can any one please help me to find out this issue, why the navigation title shows only the first 3 letters and after showing?
I have attached the Screenshot also please check.
iPhone 11 Device
iPhone 11 Simulator
Code:-
var body: some View {
ZStack {
Color.init(ColorConstantsName.MainThemeBgColour)
.ignoresSafeArea()
GeometryReader { geo in
ScrollView(.vertical) {
Text("Testing")
}
}
}
.navigationBarBackButtonHidden(true)
.navigationTitle(CommonAllString.BlankStr)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading:AnyView(leadingButton),trailing:AnyView(self.trailingButton))
.foregroundColor(Color.white)
}
var trailingButton: some View {
HStack {
Image(systemName: ImageConstantsNameForChatScreen.PersonImg)
.padding(.trailing)
Image(ImageConstantsName.DTRShareIconImg)
.resizable().frame(width: 20, height: 20)
}
}
Below Code Working:-
struct PSScreen: View {
var body: some View {
ZStack {
Color.init("Colour")
.ignoresSafeArea()
VStack{
Text("PSScreen")
}
}
.navigationBarBackButtonHidden(true)
.navigationBarTitle("", displayMode: .inline)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
leadingButton.frame(width: 50, alignment: .leading)
}
ToolbarItem(placement: .navigationBarTrailing) {
trailingButton
}
}.foregroundColor(Color.white)
}
var leadingButton: some View {
HStack{
Text("Profile")
}
}
var trailingButton: some View {
HStack {
Image(systemName: "Person")
.padding(.trailing)
Image("Share")
.resizable().frame(width: 20, height: 20)
}
}
}
I'm trying to make an iOS app that uses SwiftUI's NavigationView to build a side menu.
On iPhone it works perfectly, but on iPad I cannot get Rid of the Sidebar button and the back button text and icon. I would like to replace those buttons with the three horizontal lines icon named line.horizontal.3
Landscape screenshot with side menu icon I'd like to replace with three lines icon
Portrait screenshot with back button (woth icon and text) I'd like to replace with three lines icon
The code I'm using is the following:
import SwiftUI
struct ContentView_iPad: View {
#State var showMenu: Bool = false
var body: some View {
NavigationView{
MenuView()
iPad_menu()
.navigationBarTitle("Side Menu", displayMode: .inline)
.navigationBarItems(leading:
(Button(action: {
withAnimation{
self.showMenu.toggle()
}
}){
Image(systemName: "line.horizontal.3").imageScale(.large)
}
))
.navigationViewStyle(StackNavigationViewStyle())
}
}
}
The MainView:
import SwiftUI
struct iPad_menu: View {
var body: some View {
EmptyView()
.background(Color.black)
}
}
The MenuView:
import SwiftUI
struct MenuView: View {
var body: some View {
VStack(alignment: .leading) {
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Profile")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 100)
HStack {
Image(systemName: "envelope")
.foregroundColor(.gray)
.imageScale(.large)
Text("Messages")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 30)
HStack {
Image(systemName: "gear")
.foregroundColor(.gray)
.imageScale(.large)
Text("Settings")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 30)
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color(red: 32/255, green: 32/255, blue: 32/255))
.edgesIgnoringSafeArea(.all)
}
}
Neither navigation or Button's actions working in the pages of the TabView with PageTabViewStyle. Anybody has any ideas or workarounds? Repro code:
var body: some View {
VStack {
TabView(selection: $selection) {
Button(action: {
print("First selected")
}){
Text("Fist")
}
.tag(0)
.buttonStyle(PlainButtonStyle()
Button(action: {
print("Second selected")
}){
Text("Second").tag(1)
}
.tag(1)
Button(action: {
print("Third selected")
}){
Text("Third")
}
.tag(2)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.frame(width: 900, height: 400)
.background(Color.blue)
}
}
Button action is working in your shared code but the issue is with the tappable area of Button, which is very less.
Hence, you are unable to sense the button action.
Increase the Button tappable area like this :
Text("Fist")
.frame(width: 200, height: 200, alignment: .center)
.background(Color.red)