I am trying to build a simple navigation UI on Apple TV with SwiftUI:
As I can tell, I need to use either NavigationLink or NavigationLink combined with Button.
I have tried several implementations and none of them worked:
NavigationLink(destination: view2) {
Image("placeholder").frame(width:400, height: 300)
Text("Button")
}
NavigationLink(destination: view2) {
Button(action: {print("hey")}) {
VStack{
Image("placeholder").frame(width:400, height: 300)
Text("Button")
}
}
}
Button(action: {print("hi1")}) {
VStack{
Image("placeholder").frame(width:400, height: 300)
Text("Button")
}
}.background(NavigationLink(destination: view2) { Text("hi2") })
NavigationLink(destination: view2) {
Text("hey")
}.background(Button(action: {print("hey")}) {
VStack{
Image("placeholder").frame(width:400, height: 300)
Text("Button")
}
})
The first two ones are not selectable with Magic Remote: they won't become focused. The last ones are simply not navigating to another view when I press on them.
How do I implement this style of navigation on tvOS with SwiftUI?
NavigationLink works by itself, standalone, only on watchOS (that might confuse), in all other supported OSs it should be included in NavigationView to operate, so
in pseudo-code
NavigationView {
// ... some code
NavigationLink(...) // must be anywhere inside
// ... other code
}
Related
When I run the app on the iPad, the design does not appear on the screen. When you click on Home in the top left navigation bar, the design comes up, but it is half loaded. When I delete the NavigationView, the normal design appears but is not clickable.
struct MainView: View {
#EnvironmentObject var store: BlogPostsStore
#Environment(\.colorScheme) var colorScheme
var featuredPosts: [BlogPost] {
return store.blogPosts.filter {$0.featured == true}
}
var body: some View {
NavigationView {
ScrollView {
// featured article
if featuredPosts.count > 0 {
VStack {
HStack {
Text("Featured posts")
.font(.title.bold())
Spacer()
}
LazyVStack {
ForEach(featuredPosts) {post in
NavigationLink(destination: BlogPostView(blogPost: post)) {
BlogPostCardMain(blogPost: post)
}
}
}
}
.padding(.horizontal, 15)
.padding(.vertical, 30)
}
// latest articles
VStack {
HStack {
Text("Latest posts")
.font(.title.bold())
Spacer()
}
.padding(.horizontal, 15)
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 15) {
if store.blogPosts.count >= 3 {
ForEach(store.blogPosts[0...2]) {post in
NavigationLink(destination: BlogPostView(blogPost: post)) {
BlogPostCardMain(blogPost: post)
}
}
} else {
ForEach(store.blogPosts[0..<store.blogPosts.count]) {post in
NavigationLink(destination: BlogPostView(blogPost: post)) {
BlogPostCardMain(blogPost: post)
}
}
}
}
.padding(.leading, 15)
.padding(.trailing, 30)
}
.frame(height: 420)
Spacer()
}
.padding(.bottom, 40)
}
.navigationBarTitle("Home")
.navigationBarItems(
trailing: Button(action: {store.refreshView()}) { Image(systemName: "arrow.clockwise.circle.fill")
.resizable()
.frame(width: 30, height: 30)
})
}
}
}
enter image description here
enter image description here
This is down to how NavigationView works on iPads (and also larger iPhones in landscape).
The first view given to NavigationView acts as the collapsible left hand navigation, which is a fixed width. Any NavigationLink destinations in that view will open in the main, “detail” view that takes up the full screen.
You can specify a second view underneath the first one to provide a ‘default’ view to display in the main screen:
NavigationView {
// the sidebar view
ScrollView {
// etc.
}
// the default view
Text("Default view")
}
You could also add a third view, which will automatically give your iPad a three-column view similar to that used by Mail, etc. if you wanted to.
Another option is to force the NavigationView to work exactly the same way as it does for an iPhone in portrait mode, by adding a .navigationViewStyle argument:
NavigationView {
// contents as before
}
.navigationViewStyle(.stack)
While that will give you an iPhone-like experience on the iPad, it doesn’t really take full use of the larger screen space without careful design work. For that reason, it’s usually a good idea to invest some time in coming up with an app design that is tailored to the default iPad style of navigation view.
I want to create a simple NavigationView. But with code outside of it. Like this:
struct TestView: View {
var body: some View {
VStack{
RoundedRectangle(cornerRadius: 10)
.frame(width: 100, height: 100)
NavigationView {
VStack{
NavigationLink {
Text("HEllo")
} label: {
Text("Click me")
}
.navigationViewStyle(.columns)
}
.navigationTitle("A Title")
}
}
}
}
I do that so the navigation Title is below the item outside the NavigationView.
This code gives me this:
Image because I am not allowed to insert images yet.
When I click on the NavigationLink though I see this:
The Image
As you see the RoundedRectangle still is viewable at top of the screen. How can I fix that, so that the Rectangle disappears and the Destination is viewable in full screen?
Set navigation view first, You have to put everything inside the navigation view.
NavigationView { // Here
VStack{
RoundedRectangle(cornerRadius: 10)
.frame(width: 100, height: 100)
VStack{ // Remove from above
The RoundedRectangle is still visible because it is outside of the NavigationView, only the content of the NavigationView will move with the NavigationLink
Something you could do is to use the toolbar of the NavigationView to place items on the top of the screen
struct TestView: View {
var body: some View {
NavigationView {
NavigationLink {
Text("HEllo")
} label: {
Text("Click me")
}
.navigationViewStyle(.columns)
.navigationTitle("A Title")
.toolbar {
ToolbarItem {
RoundedRectangle(cornerRadius: 10)
.frame(width: 100, height: 100)
}
}
}
}
}
I like to recreate a toolbar similar to Apples Notes App using SwiftUI in a macOS app (I am using Xcode 12.3 and macOS 11.1):
My attempt was to use a Navigation View to get the Master/Detail setup (for now I do not need a third panel like the original Notes App has). I am interested in how to get the appearance right, e.g. background color and behavior of the buttons in the toolbar. I tried out some approaches, the best I came up with for the moment is this for the main file:
import SwiftUI
#main
struct App_Without_Name_in_Window_Top_AreaApp: App {
var body: some Scene {
WindowGroup("") { // <-- The ("") will remove the app name in the toolbar
ContentView()
}
.windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
}
}
And for the content view:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
Text("Master")
.frame(minWidth: 200, maxWidth: 300, minHeight: 300, alignment: .leading)
.padding()
.toolbar {
ToolbarItem(placement: .status) {
Button(action: {
myToggleSidebar()
}) {
Image(systemName: "sidebar.left")
}
}
}
.presentedWindowToolbarStyle(ExpandedWindowToolbarStyle())
Text("Detail")
.frame(minWidth: 200, alignment: .center)
.toolbar {
ToolbarItem(placement: .navigation) {
Button(action: {
print("Button pressed")
}) {
Image(systemName: "bold.italic.underline")
}
}
ToolbarItem(placement: .navigation) {
Button(action: {
print("Button pressed")
}) {
Image(systemName: "lock")
}
}
}
}
.frame(minWidth: 500, minHeight: 300)
}
}
func myToggleSidebar() {
NSApp.keyWindow?.firstResponder?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}
which yields a result like this:
Now my question is: How can I alter the color of the left and right parts of the toolbar? I also have problems with the behavior of the toolbar. When the master panel's size is increased, the buttons of the right part of the toolbar are disappearing very early although there is a lot of space left:
What do I have to do to prevent it?
Okay, I found a trick that works:
Set the scene's windowStyle to HiddenTitleBarWindowStyle, which both hides the title and removes the white background:
WindowGroup {
ContentView()
}
.windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
.windowStyle(HiddenTitleBarWindowStyle())
(Note that I don't set the scene name to an empty string, as that's no longer needed and it messed up the window name in the "Window" menu too)
To force a divider between the toolbar and the detail view content, stretch the detail content to fill the whole space and put a Divider behind it:
Text("Detail")
.frame(minWidth: 200, maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
.background(VStack {
Divider()
Spacer()
})
.toolbar { ...
That seems to do it!
What you want is to use
.windowToolbarStyle(UnifiedWindowToolbarStyle(showsTitle: false))
because it preserves the correct behavior when the user tabs the application
Using
.windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
.windowStyle(HiddenTitleBarWindowStyle())
Causes funky behavior when the user opens a new tab due to the coloring of the toolbar.
I'm trying to create something like this:
A navigation bar with 3 items, is it possible to do this using navigationBarItems?
My current plan is to hide the navbar using:
.navigationBarTitle("")
.navigationBarHidden(true)
and then creating the 3 buttons using a HStack. The Problem I have is because I'm hiding the navbar, the click of one of the buttons take it to another view, which also then hides the navbar (Thats not what im looking for)
I have tried:
.navigationBarItems(trailing:
HStack {
Button("About") {
print("About tapped!")
}
Button("Help") {
print("Help tapped!")
}
}
)
But this creates the two items next to each other on the right side. I tried putting a Spacer() in the above HStack, but this doesn't work.
I would prefer to use navigationBarItems but can't seem to find a way to centre an item?
A navigation bar with 3 items, is it possible to do this using navigationBarItems?
No. Moreover navigationBarItems modifier is deprecated since SwiftUI 2.0
SwiftUI 2.0
This can be done with toolbar modifier as easy as attach it to any view inside NavigationView
Demo prepared & tested with Xcode 12 / iOS 14:
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button(action: {}) { Image(systemName: "gear") }
}
ToolbarItem(placement: .principal) {
Button(action: {}) { Image(systemName: "car") }
}
ToolbarItem(placement: .navigation) {
Button(action: {}) { Image(systemName: "chevron.left") }
}
I have 2 buttons in an H/VStack. Both of them contain some text, in my example "Play" and "Pause". I would like to have that both buttons have the same width (and height) determined by the largest button. I have found some answers right here at SO but I can't get this code working unfortunately.
The following code illustrates the question:
import SwiftUI
struct ButtonsView: View {
var body: some View {
VStack {
Button(action: { print("PLAY tapped") }){
Text("Play")
}
Button(action: { print("PAUSE tapped") }) {
Text("Pause")
}
}
}
}
struct ButtonsView_Previews: PreviewProvider {
static var previews: some View {
ButtonsView()
}
}
The tvOS preview from Xcode shows the problem:
I would be thankful for an explanation for newbies 🙂
Here is run-time based approach without hard-coding. The idea is to detect max width of available buttons during drawing and apply it to other buttons on next update cycle (anyway it appears fluently and invisible for user).
Tested with Xcode 11.4 / tvOS 13.4
Required: Simulator or Device for testing, due to used run-time dispatched update
struct ButtonsView: View {
#State private var maxWidth: CGFloat = .zero
var body: some View {
VStack {
Button(action: { print("PLAY tapped") }){
Text("Play")
.background(rectReader($maxWidth))
.frame(minWidth: maxWidth)
}.id(maxWidth) // !! to rebuild button (tvOS specific)
Button(action: { print("PAUSE tapped") }) {
Text("Pause Long Demo")
.background(rectReader($maxWidth))
.frame(minWidth: maxWidth)
}.id(maxWidth) // !! to rebuild button (tvOS specific)
}
}
// helper reader of view intrinsic width
private func rectReader(_ binding: Binding<CGFloat>) -> some View {
return GeometryReader { gp -> Color in
DispatchQueue.main.async {
binding.wrappedValue = max(binding.wrappedValue, gp.frame(in: .local).width)
}
return Color.clear
}
}
}
You can implement the second custom layout example in the WWDC 2022 talk https://developer.apple.com/videos/play/wwdc2022/10056/ titled "Compose custom layouts with SwiftUI" which, if I understand the question, specifically solves it, for an arbitrary number of buttons/subviews. The example starts at the 7:50 mark.
after reading hit and trial implementing SO solns etc finally resolved this issue posting so that newbies as well as intermediate can benefit
paste it and obtain equal size(square) views
VStack(alignment: .center){
HStack(alignment:.center,spacing:0)
{
Button(action: {}, label: {
Text("Button one")
.padding(35)
.foregroundColor(.white)
.font(.system(size: 12))
.background(Color.green)
.frame(maxWidth:.infinity,maxHeight: .infinity)
.multilineTextAlignment(.center)
.cornerRadius(6)
}).background(Color.green)
.cornerRadius(6)
.padding()
Button(action: {}, label: {
Text("Button two")
.padding(35)
.foregroundColor(.white)
.font(.system(size: 12))
.frame(maxWidth:.infinity,maxHeight: .infinity)
.background(Color.green)
.multilineTextAlignment(.center)
}) .background(Color.green)
.buttonBorderShape(.roundedRectangle(radius: 8))
.cornerRadius(6)
.padding()
}.fixedSize(horizontal: false, vertical: true)
Add as many as buttons inside it. You can adjust it for VStack by adding only one button in hstack and add another button in another Hstack. I gave a general soln for both VStack and Hstack. You can also adjust padding of button as .padding(.leading,5) .padding(.top,5) .padding(.bottom,5) .padding(.trailing,5) to adjust the gaps between buttons
I think the best solution is to use GeometryReader, which resizes the width of the content of the Button. However, you need to check that you set a width of the Wrapper around the GeometryReader, because otherwise it would try to use the full screen width. (depends where you use that view, or if it is your primary view)
VStack
{
GeometryReader { geo in
VStack
{
Button(action: { print("PLAY tapped") }){
Text("Play")
.frame(width: geo.size.width)
}
.border(Color.blue)
Button(action: { print("Pause tapped") }){
Text("PAUSE")
.frame(width: geo.size.width)
}
.border(Color.blue)
}
}
}
.frame(width: 100)
.border(Color.yellow)
... which will look like that.
What happens if you put a Spacer() right after the Text("Play")? I think that might stretch out the 'Play' button.
Or maybe before and after Text("Play").