SwiftUI and WatchOS: Action Buttons Beneath the Navigation Bar

As we all know, the introduction of watchOS 7 has killed the force touch. In fact, in versions of watchOS before watchOS 7, people could press firmly on the display to open a hidden menu of actions relevant to the current screen.

Now Apple suggests removing hidden menus from our app, examining each item to determine whether it provides information, or it performs an action.

In their Human Interface Guidelines, they provide some alternatives for actionable items. One of them is putting an action button beneath the navigation bar.

Views on a smartwatch

Photo from Apple Developer.

In this design, people drag down to reveal the button. Even though such a button isn’t visible when the screen first opens, people can discover it easily because dragging is a very common gesture. For example, Mail relocates the Compose button from a hidden menu to a position above the list of messages in an inbox. The Compose button is out of the way until people drag down on the screen to refresh the message list.

In this article, we are going to examine this solution. This is what our app will look like:

App in action

Let’s first create a new SwiftUI watchOS project:

Creating a new project

Select WatchOS and then WatchApp:

Selecting WatchApp

Create Coloured List

Let’s navigate to ContentView.swift and create ten colored circles in a vertical ScrollView:

import SwiftUI

struct ContentView: View {
    @State var colors: [Color] = [.orange, .pink , .yellow]

    var body: some View {
        ScrollView {
                ForEach(0..<10) { i in
                    Text("## \(i)")
                        .frame(width: 100, height: 100)
                        .background(colors[i % colors.count]).cornerRadius(50)
                        .id(i)
                        .padding()

                }
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We marked colors, an array of type Color, with @State because we will need to modify it later on with the button that we are going to place beneath the navigation bar.

Then, in order to hide the button, we need to embed a structure called ScrollViewReader (introduced with watchOS 7 and iOS 14) inside our ScrollView:

import SwiftUI

struct ContentView: View {
    @State var changed = false
    @State var colors: [Color] = [.orange, .pink , .yellow]

    var body: some View {
        ScrollView {
            ScrollViewReader { value in
                Button("Change Color") {
                    changed.toggle()

                    if changed {
                        colors = [.red, .green, .blue]
                    } else {
                        colors = [.orange, .pink , .yellow]
                    }
                }

                ForEach(0..<10) { i in
                    Text("## \(i)")
                        .frame(width: 100, height: 100)

                        .background(colors[i % colors.count]).cornerRadius(50)
                        .id(i)
                        .padding()

                }.onAppear() {
                    value.scrollTo(0)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

#programming #swift #xcode #developer

What is GEEK

Buddha Community

SwiftUI and WatchOS: Action Buttons Beneath the Navigation Bar

andrew cls

1597337381

How to add button to navigation bar in SwiftUI

https://youtu.be/9IlmpY14vrM

#https://youtu.be/9ilmpy14vrm #how to add button to navigation bar in swiftui #ios

Fredy Larson

1594355340

Side Tab Bar Using SwiftUI - Vertical Tab Bar In SwiftUI - Food App UI SwiftUI

In this Video i’m going to show how to create a Food App UI With Side Tab Bar Using SwiftUI | Vertical Tab Bar Using SwiftUI | Side Tab Bar Using SwiftUI | Custom Tab Bar Using SwiftUI | Food App UI Using SwiftUI.

Source Code

https://kavsoft.tech/Swift/Vertical Tab Bar/
Support Us By Contributions !!!

https://donorbox.org/kavsoft

My Xcode Version is 11.4.1
My macOS Version is 10.15.3 Catalina

For Any Queries And Any Request For Videos Use The Given Link

https://kavsoft.tech/#contact

For More

https://kavsoft.tech

#swiftui #ui #vertical #bar

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Frederik VonRueden

1603875093