I am walking my first steps with SwiftUI as I'm thinking about migrating my existing UIKit-based iOS app. It makes extensive use of split views. Ideally, there will be something like the iOS Mail app with a master/detail view as well as an additional (leftmost) column for selecting content, account, etc.
For now, I am stuck on some basic issues such as this one: I created a short list of navigation links and a default content to be shown when the app initially opens the detail view. This works as expected when navigating back and forth in "stacked" mode, i.e. on iPhone in portrait orientation. Changing to multiple-column view, e.g. iPhone max in landscape, the primary column is stuck after a few steps. In landscape view, I have to manually hide it by clicking on the detail, and in portrait view the detail view does no longer show at all.
import SwiftUI
#main
struct MyApp: App {
var body: some Scene {
WindowGroup {
NavigationView {
List {
NavigationLink(destination: destination1) {
Text("Hello, World 1!")
}
NavigationLink(destination: destination2) {
Text("Hello, World 2!")
}
.navigationTitle("Primary")
}
Text("This is the default content shown when the navigation view is created.")
}
}
}
var destination1: some View {
Text("Destination 1 text.")
.navigationTitle("secondary 1")
}
var destination2: some View {
Text("Destination 2 text.")
.navigationTitle("secondary 2")
}
}
Related
I want a large title in the navigationbar on a pushed view in SwiftUI and an inline title on the parent view.
When the parent navigation bar display mode is not set, it works:
Working without display mode on parent
But when I set the display mode in the parent view to inline, the title on the second screen is inline, instead of large. You can drag the list and the title will stay large. (You can see a small example in the code below)
With display mode to inline on the parent, the child is also inline.
Here is a small example:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: DestinationView()) {
Text("Next Screen")
}
.navigationBarTitle("Start screen", displayMode: .inline)
}
}
}
struct DestinationView: View {
var body: some View {
ScrollView {
VStack{
ForEach((1...10), id: \.self) {
Text("\($0)")
}
}
}
.navigationBarTitle("Second screen", displayMode: .large)
}
}
There are several post with similar questions:
https://www.reddit.com/r/iOSProgramming/comments/g2knmp/large_title_collapses_after_a_push_segue/
-> Same problem but with UIKit and we don't have prefersLargeTitles in SwiftUI.
Large title doesn't appear large
-> Same problem with UIKit and marked as answered with preferesLargeTitles.
Navigation bar title stays inline in iOS 15
-> Here was a fix from apple side, but it was a back navigation
just place .navigationViewStyle(.stack) in NavigationView in ContentView()
So I'm relatively new to swift and coding in general, I'm currently trying to develop an app that essentially operates like a to do list. My goal for the home page is pretty basic. The logo centered at the top and a button to create "New Lists". I've gone back and forth on how to manage the various lists (using buttons or using listviews). But ideally I want the New List button to create a new button (which accesses the newly created list) and also take the user to the newly created list to name it and add contents etc.
I'm currently exploring the use of NavigationLinks and Navigation View (Code Below)
import SwiftUI
struct ContentView: View {
#State private var isShowingNewList = false
var body: some View {
NavigationView{
VStack(spacing: 30) {
NavigationLink(destination: Text("This is gonna be a new list"), isActive: $isShowingNewList) { EmptyView()}
Button("New List!!") {
self.isShowingNewList = true
}
.buttonStyle(.bordered)
.offset(y: -100)
}
.navigationBarTitle("Nudge")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I'm thinking navigation view is not the way to go because even when creating a button to control the link it controls the entire screen. Any pointers?
This is a complex question so any sort of guidance or suggestions of strategies that could be worth looking into would be great!
SwiftUI helpfully gives you NavigationView which easily lets you define a sidebar and main content for iPad apps that automatically collapse for iPhones.
I have an app and everything works as expected except on iPad, in portrait mode, the sidebar is hidden by default and you are forced click a button to show it.
All I want is to force the sidebar to always be visible, even in portrait mode. And make it work the same way as the settings app.
I’m even willing to use a UIKit view wrapped for SwiftUI, but wrapping NavigationController seems very very challenging.
Is there a better way?
Without your specific code I can't be sure but I think you are describing the initial screen that shows on iPad. That is actually a "ThirdView". You can see it with the code below.
And I am answering the "better way" portion of your question. Which for me is a way of just "graciously" dealing with it.
struct VisibleSideBar2: View {
var body: some View {
NavigationView{
List(0..<10){ idx in
NavigationLink("SideBar \(idx)", destination: Text("Secondary \(idx)"))
}
Text("Welcome Screen")
}
}
}
It is even more apparent if you have a default selection in your "Secondary View" because now you have to click "Back" twice to get to the SideBar
struct VisibleSideBar1: View {
#State var selection: Int? = 1
var body: some View {
NavigationView{
List(0..<10){ idx in
NavigationLink(
destination: Text("Secondary \(idx)"),
tag: idx,
selection: $selection,
label: {Text("SideBar \(idx)")})
}
Text("Third View")
}
}
}
A lot of the "solutions" out there for this just turn the NavigationView into a Stack but then you can't get the double column.
One way of dealing with it is the what is depicted in VisibleSideBar2. You can make/embrace a nice "Welcome Screen" so the user isn't greeted with a blank screen and then the natural navigation instincts kick in. You only see the "Welcome Screen" on iPad Portrait and on Catalyst/MacOS where Stack is unavailable.
Or you can bypass the third screen by using isActive in a NavigationLink and using the Sidebar as a menu like View
struct VisibleSidebar3: View{
#State var mainIsPresented = true
var body: some View {
NavigationView {
ScrollView{
NavigationLink(
destination: Text("Main View").navigationTitle("Main"),
isActive: $mainIsPresented,
label: {
Text("Main View")
})
NavigationLink("List View", destination: ListView())
}.navigationTitle("Sidebar")
//Not visible anymore
Text("Welcome Screen")
}
}
}
struct ListView: View{
var body: some View {
List(0..<10){ idx in
NavigationLink("SideBar \(idx)", destination: Text("Secondary \(idx)"))
}.navigationTitle("List")
}
}
Like I said my answer isn't really a way of "fixing" the issue. Just dealing with it. To fix it we would have to somehow dismiss the "Third Screen/Welcome Screen". Then manipulate the remaining UISplitViewController (Several SO questions on this) to show both the SideBar/Master and the Detail View.
In UIKit it seems to have been done a lot, if you search SO, you will find a way to create a UISplitViewController that behaves like Settings.
Blank page on all kinds of iPad simulator
Go to Apple developer website to download tutorials project below:
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation
Run this on any iPad simulator, you will just get a blank page, but the code works fine on simulator of Mac/iPhone and my real iPhone device.
This is definitely a bug, and I've reported to Apple, I am posting here just want ppl like me who said this issue, pls don't waste your time on reset simulator, checking your code, restart your laptop, wait until apple to fix this.
Screenshot
Sample code from Apple SwiftUI tutorials project:
import SwiftUI
struct LandmarkList: View {
var body: some View {
NavigationView {
List(landmarkData) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
}
}
.navigationBarTitle(Text("Landmarks"))
}
}
}
struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
.previewDisplayName(deviceName)
}
}
}
It's actually working just fine. By default, on iPad, the navigationStyle of a NavigationView means that you are seeing the detail view with a collapsed master view. Try rotating device or simulator and you will then see your master list. Selecting an item will push that onto the detail view. Or, swipe right from the left edge and your list will appear.
Don't like this behavior? You can set your navigation view's navigationStyle to StackNavigationViewStyle(). It will only show a single view on top at any given time.
I can't currently find an option to always show the master view as that is currently how my app is configured using a UISplitViewController. It is likely a temporary situation.
According to answer of #Procrastin8, I am here to show the example code, you just need to add one line of code .navigationViewStyle(StackNavigationViewStyle()
import SwiftUI
struct LandmarkList: View {
var body: some View {
NavigationView {
List(landmarkData) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
}
}
.navigationBarTitle(Text("Landmarks"))
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
.previewDisplayName(deviceName)
}
}
}
Screenshot
When I first saw my app on the iPad I was also put off. But then I realized it makes sense not to waste all the screen on a List, so I show the first item in a detail view by default:
var body: some View {
NavigationView {
// Main view (by default shows on iPhone but not on iPad)
VStack{
List {
ForEach(viewModel.arPictures, id: \.date) { potd in
NavigationLink(destination: POTDDetailView(potd: potd)) {
Text(potd.title ?? "")
}
}
}
}.navigationBarTitle(Text("Last 8 days pictures"), displayMode: .inline)
// Detail view (by default shows on iPad but not on iPhone)
if (!viewModel.arPictures.isEmpty){
POTDDetailView(potd: viewModel.arPictures[0])
}
}
}
My app has simple navigation needs
List View (parent objects)
List View (child objects)
Detail View (child object)
I have this setup and working on iPhone, but when I run the app on iPad in portrait mode the master list is always hidden.
I'm using .isDetailLink(false) on the navigation link from the first list to the second, so both lists always stay in the master column. In iPad landscape everything works as expected but in portrait the detail view fills the screen. I can swipe in from the left side of the screen to show the list but I'd like to provide more clarity to the user.
I'd like to show or add the back button to show the master/list side (sort of like the Apple Notes app). On the iPhone I get the back button by default but on iPad in portrait mode there is nothing in its place.
This is what I see on iPhone
But this is what I see on iPad
Parent list
struct ParentList: View {
let firstList = ["Sample data 01", "Sample data 02", "Sample data 03", "Sample data 04", "Sample data 05"]
var body: some View {
NavigationView {
List{
ForEach(firstList, id: \.self) { item in
NavigationLink(destination: ChildList()){
Text(item)
}
.isDetailLink(false)
}
}
}
}
}
Child list
struct ChildList: View {
let secondList = ["More Sample data 01", "More Sample data 02", "More Sample data 03", "More Sample data 04", "More Sample data 05"]
var body: some View {
List{
ForEach(secondList, id: \.self) { item in
NavigationLink(destination: ChildDetail()){
Text(item)
}
}
}
}
}
Child detail
struct ChildDetail: View {
var body: some View {
Text("Child detail view")
}
}
Update: As of Oct 17, 2019 I have not found a way to get this to work. I decided to use .navigationViewStyle(StackNavigationViewStyle()) for the time being. Interestingly, this needs to go outside of the navigation view like a normal modifier, not inside it with the navigation title.
In portrait the default split view does not work. This may be fixed in future but it appears the current options are:
(a) change the navigation view style of your first list to .navigationViewStyle(StackNavigationViewStyle()) so the navigation will work like on iPhone and push each view.
(b) leave the style to default and only support landscape for iPad
(c) implement a UIKit split view controller
There also is a quite hacky workaround (see https://stackoverflow.com/a/57215664/3187762)
By adding .padding() to the NavigationView it seems to achieve the behaviour of always display the Master.
NavigationView {
MyMasterView()
DetailsView()
}.navigationViewStyle(DoubleColumnNavigationViewStyle())
.padding()
Not sure if it is intended though. Might break in the future (works using Xcode 11.0, in simulator on iOS 13.0 and device with 13.1.2).
You should not rely on it. This comment seems to be the better answer: https://stackoverflow.com/a/57919024/3187762
in iOS 13.4, a "back to master view" button has been added to the iPad layout. From the release notes:
When using a NavigationView with multiple columns, the navigation bar now shows a control to toggle the columns. (49074511)
For example:
struct MyNavView: View {
var body: some View {
NavigationView {
NavigationLink(
destination: Text("navigated"),
label: {Text("Go somwhere")}
)
.navigationBarTitle("Pick Item")
}
}
}
Has the following result:
Look this solution here
I hope this help
For my project I'm using this extension.
They will always use StackNavigationViewStyle for iPhone, iPad in a vertical orientation, and if you provide forceStackedStyle: true.
Otherwise DoubleColumnNavigationViewStyle will be used.
var body: some View {
NavigationView {
Text("Hello world")
}
.resolveNavigationViewStyle(forceStackedStyle: false)
}
extension View {
func resolveNavigationViewStyle(forceStackedStyle: Bool) -> some View {
if forceStackedStyle || UIDevice.current.userInterfaceIdiom == .phone {
return self.navigationViewStyle(StackNavigationViewStyle())
.eraseToAnyView()
} else {
return GeometryReader { p in
if p.size.height > p.size.width { self.navigationViewStyle(StackNavigationViewStyle())
} else {
self.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
.eraseToAnyView()
}
}
}