DEV Community: Duncan Kent

Sheets, Half Sheets & more with Presentation Detents in SwiftUI

Duncan Kent — Tue, 20 Sep 2022 16:09:49 +0000

Apple added Detents to their Presentation Containers in WWDC2022, in order to provide more flexibility among various parts of your app's view hierarchy.

The new PresentationDetent struct comes with 2 included properties:

medium - the sheet takes up approximately half of the device's screen
large - the sheet covers the entire screen

medium

large

These detents can be implemented using the .presentationDetents modifier on a sheet. You can choose to include multiple options using a Set of type PresentationDetent.

.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents([.medium, .large])
}

There are a few documented methods also, that allow for greater flexibility when using sheet.

This means that it would be very straightforward to create the /bottom drawer/ effect that is becoming more popular in apps using the following two methods:

fraction - allows you to specify a fractional height (of the screen)
height- specify a height that your sheet will occupy (relative to the bottom of the screen)

Both methods use the type CGFloat, and can be assigned to variables and changed programmatically, altering the placement of your sheet each time it appears in the app session.

A custom PresentationDetent can be created which must conform to the protocol CustomPresentationDetent . In this example, I have created a detent specifically to act in a "drawer" presentation style.

DrawerDetent Struct and Extension to PresentationDetent

private struct DrawerDetent: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        max(80, context.maxDetentValue * 0.15)
    }
}

extension PresentationDetent {
    static let drawer = Self.custom(DrawerDetent.self)
}

Calling this on the view, with the appropriate modifier:

.sheet(isPresented: $sheetPresented)
    SheetView()
        .presentationDetents([.drawer])
}

Drawer Style Sheet Result:

If you'd prefer to have a range of different sizes, and allow the user a lot more control over the placement of the sheet, you can include many options in the .presentationDetents Set.

let heights = stride(from: 0.2, through: 1.0, by: 0.2).map {
    PresentationDetent.fraction($0)
}

.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents(Set(heights))
}

Lastly, you can combine these previous examples, for even more bespoke sheet options using the union function of Set:

SheetView()
    .presentationDetents(Set(heights).union([.drawer, .medium]))

Recreating the iOS Battery Graph using Swift Charts

Duncan Kent — Fri, 08 Jul 2022 12:29:17 +0000

Apple's Implementation

The battery level / usage graph in iOS provides a visual, graphical overview of your device's battery information in a couple of ways:

The % amount of battery used on a given day, over a 10 day period
The battery level of the device over the previous 24 hour time period

Main Components

The main features that both designs boast:

Chart title describing content
Toggle to switch between graph views
Horizontal grid marks at 0, 25, 50 , 75 and 100 percentages
Y-axis labels for the 0, 50 and 100 percentages

Creating the data points for our graphs

In this small project, I used an enum to store all battery data in a single location, that can be easily accessed for prototyping purposes. Within this, I created a basic struct that would act as a single data point for a plot on the graph. This also conformed to Identifiable to ensure that this could be iterated on by a SwiftUI view seamlessly.

struct BatteryUsageData: Identifiable {
  let batteryDate: Date
  let percentageUsed: Float
  var id: Date { batteryDate }
}

I extended enum to provide two arrays of data, using the below custom Date initialiser with the device's current calendar.

func date(year: Int, month: Int, day: Int = 1, hour: Int = 0, minutes: Int = 0, seconds: Int = 0) -> Date {
  Calendar.current.date(from: DateComponents(year: year, month: month, day: day, hour: hour, minute: minutes, second: seconds)) ?? Date()
}

Function to create date for graph data points

extension BatteryData.BatteryUsageData {
  static var previous10days: [Self] = [
    .init(batteryDate: date(year: 2022, month: 6, day: 6, hour: 0, minutes: 1), percentageUsed: Float.random(in: 0.2...1.0)),
    .init(batteryDate: date(year: 2022, month: 6, day: 5, hour: 0, minutes: 1), percentageUsed: Float.random(in: 0.2...1.0))
...
}

Previous 10 days battery % usage data

extension BatteryData.BatteryUsageData {
  static var previous24hours: [Self] = [
    .init(batteryDate: date(year: 2022, month: 6, day: 6, hour: 0, minutes: 0), percentageUsed: Float.random(in: 0.9...1.0)),
    .init(batteryDate: date(year: 2022, month: 6, day: 6, hour: 0, minutes: 20), percentageUsed: Float.random(in: 0.9...1.0))
...
}

Previous 24 hours battery % data

Setting up the graph picker view

In order to change between the two graph types, we will follow Apple's design using a Picker view.

We will need an @State variable for the property to be observed and updated by the view.

@State private var currentBatteryDataTime: BatteryDataTimes = .day10

I used an enum to store the separate cases and strings used in the interface:

enum BatteryDataTimes: String, CaseIterable {
  case hour24, day10

  var batteryDataText: String {
    switch self {
    case .hour24:   return "Last 24 Hours"
    case .day10:    return "Last 10 Days"
    }
  }

  var batteryGraphTitle: String {
    switch self {
    case .hour24:   return "Battery Level"
    case .day10:    return "Battery Usage"
    }
  }
}

Note: Conforming to the String and CaseIterable protocols in order to loop over these cases, so that it would be easy to add expand this selection later.

Using a Picker and iterating over the cases, we can create our picker now. Ensure to pass in the binding to the current value of our @State property that is storing the current selected graph.

VStack {

      Picker("Battery Graph Time", selection: $currentBatteryDataTime) {
        ForEach(BatteryDataTimes.allCases, id: \.self) { time in
          Text(time.batteryDataText)
        }
      }
      .pickerStyle(.segmented)
      .padding(.bottom)

      VStack(spacing: 2) {
        Text(currentBatteryDataTime.batteryGraphTitle.uppercased())
          .foregroundColor(.secondary)
          .frame(maxWidth: .infinity, alignment: .leading)
      }

      Spacer()

    }
    .padding(.horizontal, 8)

The produced view:

Displaying different graph views

We can add a switch statement between our graph title Text and the Spacer in our VStack in order to switch between views dependent on the currently selected timeframe in our picker. A frame modifier provides a maximum height for the graph.

switch currentBatteryDataTime {

  case .day10:
    // Graph showing 10 day battery use   

  case .hour24:
    // Graph showing 24 hour battery level

}
.frame(height: 180)

24 Hour Battery Level Graph

Plotting the data points is relatively straightforward for this bar graph. You provide the data source for the chart and iterate over each data point assigning an x and y value. In this graph, I have also opted to provide a width for the bar to ensure there is space between values.

Chart(BatteryData.BatteryUsageData.previous24hours) { batteryData in
  BarMark (
    x: .value("Date", batteryData.batteryDate),
    y: .value("Battery Percent", batteryData.percentageUsed),
    width: .fixed(3.5)
  )
  .foregroundStyle(Color.green.gradient)
}

Axes

The x-axis of this graph has intervals every 3 hours. To achieve this, we will add AxisMarks with values that stride by the hour.

We convert the value back to a date using the current calendar, and extract the hour date component from it. We can then add labels where hour % 3 gives no remainder.

.chartXAxis {
      AxisMarks(values: .stride(by: .hour)) { value in

        if let date = value.as(Date.self) {

          let calendar = Calendar.current
          let currentHour = calendar.dateComponents([.hour], from: date)
          if currentHour.hour! % 3 == 0 {

            AxisGridLine()
            AxisTick()
            AxisValueLabel {
              Text("\(date, format: .dateTime.hour())")
                .padding(.top, 16)

            }
          }
        }
      }
    }

We can take a similar approach when creating the y-axis using stride, however this time we stride from 0 to 1 in increments of 0.25. This will allow us to match Apple's implementation of having an AxisGridLine every 25%

By converting the value back to a Float we can check if the truncatingRemainder when dividing by 0.5 is 0. This will allow us to add an AxisValueLabel at 0%, 50% and 100% only.

.chartYAxis {
      AxisMarks(values: .stride(by: 0.25)) { value in
        AxisGridLine()
        if let percentage = value.as(Float.self) {
          if percentage.truncatingRemainder(dividingBy: 0.5) == 0 {
            AxisValueLabel("\(percentage, format: .percent)")
          }
        }
      }
    }

These implementations give us the following view:

Note: You could also use a DateFormatter to match the X axis labels exactly to Apple's implementation (e.g. 15 instead of 3 PM)

Previous 10 DaysBattery Usage Graph

Plotting the values for the graph is very similar to the previous example, however, the unit used for the x value in this scenario is .day instead of .hour

Chart(BatteryData.BatteryUsageData.previous10days) { batteryData in
      BarMark(
        x: .value("Date", batteryData.batteryDate, unit: .day),
        y: .value("Percent Used", batteryData.percentageUsed)
      )
      .foregroundStyle(Color.green.gradient)
    }

Axes

The implementation for the y-axis can match the previous graph, the x-axis is implemented slightly differently however.

We stride through values using the .day modifier instead of .hour. We then convert this value to a Date type and extract the DateComponents [.weekday, .day, .month].

.chartXAxis {
      AxisMarks(values: .stride(by: .day)) { value in
        AxisGridLine()

        if let day = value.as(Date.self) {
          let calendar = Calendar.current
          let currentDay = calendar.dateComponents([.weekday, .day, .month], from: day)
        }
      }
    }

Apple has a slightly different axis label for Mondays. They use an AxisTick with a filled line rather than a dotted line, and also add extra information such as the day of the month and current month.

After retrieving the current day, we can then add the following code to check if the current weekday value is 2 (Monday).

if currentDay.weekday == 2 {
            if let d = currentDay.day {
              AxisTick(stroke: .some(.init(lineWidth: 1)))
              AxisValueLabel {
                VStack(alignment: .leading) {
                  Text(day, format: .dateTime.weekday(.narrow))
                  Text("\(d)")
                    .offset(y: 2)
                  Text("\(day, format: .dateTime.month(.abbreviated))")
                    .offset(y: 2)
                }
              }
            }
          } else {
            AxisTick()
            AxisValueLabel(format: .dateTime.weekday(.narrow))
          }

All days have an AxisValueLabel that contains the first letter of the day.

After implementing the axes, we have the following resulting graph:

Note: the x-axis differs slightly from Apple's implementation as the date becomes truncated if the day of the month is 2 digits - haven't found a great solution for this just yet!

The new NavigationStack & NavigationPath for SwiftUI

Duncan Kent — Thu, 09 Jun 2022 13:55:30 +0000

The Navigation API

Apple recently released their improved method of navigation in SwiftUI, which was announced at WWDC 2022.

Whilst the API is very likely to change and evolve before the full release, this article looks at how it can be implemented to handle some trickier navigation tasks in native SwiftUI.

Navigation in SwiftUI so far

Programmatic navigation and deep linking has been more challenging for newer developers, such as myself, to adopt in purely SwiftUI projects.

I have mostly relied on NavigationView and NavigationLink to perform the navigation within my apps, which is functional but pretty basic and limited in nature.

With the introduction of NavigationStack, NavigationPath, navigationDestination modifier and adjustments to NavigationLink, more complex navigation tasks such as deep linking and popping multiple views/popping to root become easier to implement purely in SwiftUI.

Holiday Destinations - Example

In this sample project, I have a few screens that can be navigated between.

DestinationListView - A view containing a list of the available holiday destinations
DestinationDetailView - A view that provides more detail about the destination that was selected from the above list view
DestinationInfoView / DestinationBookingView - Views that would allow the user to view more information or book the destination. These can be accessed from the detail view via corresponding buttons

Project Setup

To begin, I created a basic data model, DestinationModel. This must conform to Hashable to be used with the navigationDestination view modifier later. Alongside this model, I created a mockDestinations property that stores some sample data, which can be viewed in the full file below.

struct DestinationModel: Hashable, Identifiable {
    let id = UUID()
    let location: String
    let pricePerPerson: Double
    let description: String

    static let mockDestinations: [DestinationModel] = [
        ...
    ]
}

Full file: DestinationModel.swift

(note: if you have a more complex data model with properties that do not conform to Hashable, you will need to add a hash(into:) method manually)

Storing Navigation State

In order to keep track of the navigation routes that our app has taken, it is best to abstract the storage of this information as a navigation path outside of the views.

I created an ObserverableObject class Router to do just this.

final class Router: ObservableObject {

    @Published var navPath: NavigationPath = .init()

}

Providing Access to the Navigation State in a View

Then, instantiate this in the root view of the app as a StateObject, which can then be injected to the child views as an environmentObject. This enables us to gain access to the properties of our Router object in any view.

@main
struct NavigationStackApp: App {

    @StateObject private var router = Router()

    var body: some Scene {
        WindowGroup {
            NavigationStack(path: $router.navPath) {
                DestinationListView()
                    .navigationBarTitleDisplayMode(.inline)
            }
            .environmentObject(router)
        }
    }
}

(note: We are also wrapping our root view in the new NavigationStack, so that we can use the Navigation API in all child views using the @EnvironmentObject property wrapper)

struct DestinationListView: View {

    @EnvironmentObject var router: Router

    var body: some View {
      ...
    }
}

Passing a value to `NavigationLink`

Previously when using NavigationLink, we would typically pass a destination and label as parameters for a new view.

Now, we can use a new completion that passes a value and label. The value must conform to Hashable, which our model already does. We can use the destination that is being iterated on in our list, to pass into the NavigationLink as a value. We can then use a closure to provide the label for the NavigationLink, just as before.

struct DestinationListView: View {

    @EnvironmentObject var router: Router

    var body: some View {
        List {
            ForEach(DestinationModel.mockDestinations) { destination in
                NavigationLink(value: destination) {
                    VStack (alignment: .leading, spacing: 10) {
                        Text(destination.location)
                            .font(.headline)
                        Text("\(destination.pricePerPerson, format: .currency(code: "USD"))")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
    }
}

Setting the destination for `NavigationLink`

We can then add the navigationDestination modifier to the outside of our list, and provide the type of model that we have declared in our NavigationLink(value: _). This allows our NavigationPath to know the type of element that is being appended to the stack, and since it is hashable, it can also be identified and compared by it's hashValue.

For each destination we pass to the navigationDestination, we can then provide the view to be navigated to, as well as pass in any properties that view may require.

.navigationDestination(for: DestinationModel.self) { destination in
                DestinationDetailView(destination: destination)
            }

Full file: DestinationListView.swift

Destination Detail View

This is the view that will be shown when a destination in the previous list view was tapped.

struct DestinationDetailView: View {

    @EnvironmentObject var router: Router

    let destination: DestinationModel

    var body: some View {
        VStack(alignment: .center, spacing: 50) {
            Text(destination.location)
                .font(.title)
            Text(destination.description)
                .font(.body)
            VStack {
                Text("Price per Person")
                Text("\(destination.pricePerPerson, format: .currency(code: "USD"))")
                    .bold()
            }
        }
        .padding(.horizontal)
    }
}

struct DestinationDetailView_Previews: PreviewProvider {
    static var previews: some View {
        DestinationDetailView(destination: DestinationModel.mockDestinations.first!)
            .environmentObject(Router())
    }
}

The two buttons both toggle a sheet to show a different view (DestinationBookingView or DestinationInfoView). We can add a property to our router to allow us to programmatically toggle the sheet.

@Published var showSheet = false

We can also start leveraging the power of Swift to allow us to switch our navigation path's route. By declaring an enum, and using @ViewBuilder, we can be more dynamic in which sheet is shown.

enum Router {
        case info
        case booking

        @ViewBuilder
        var view: some View {
            switch self {
            case .info:
                DestinationInfoView()
            case .booking:
                DestinationBookingView()
        }
    }
}

var nextRoute: Router = .booking

By adding the property nextRoute, we are able to change which view will be displayed on the sheet on the fly.

Full file: Router.swift

In our DestinationDetailView file, we can now alter the properties on the router dependent on which button has been pressed.

Button("Info") {
    router.nextRoute = .info
    router.showSheet.toggle()
}

Button("Book") {
    router.nextRoute = .booking
    router.showSheet.toggle()
}

Remember to also create a sheet using the sheet modifier. Bind this to the Router's showSheet property, and the view that will be displayed will be the returned value of the @ViewBuilder we used in our Router class.

.sheet(isPresented: $router.showSheet) {
    router.nextRoute.view
}

Full file: DestinationDetailView.swift

Popping to the root view

So far, we haven't navigated too deep into our app, but the following will demonstrate how you can pop to the root view of your NavigationPath.

(note: the DestinationBookingView and DestinationInfoView contain almost identical code, as they are placeholder views)

By reinitialising our Router's navPath property, we are essentially saying that the NavigationPath is empty, and that are stack should contain no additional views.

Button("Pop to root") {
    router.showSheet = false

    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
        router.navPath = .init()
    }
}

This will dismiss the sheet, and after a short delay, navigate back to the root view, and clears any additional data in the router.navPath property.

DestinationBookingView.swift
DestinationInfoView.swift

Deeplinking and further implementations

With the setup used above, we are able to dynamically switch the path of the navigation router, as well as programmatically pass particular data models when navigating.

The below is an example of navigating to a random element in the array of mock destinations, and then opening a specific sheet. We can also detmine which sheet by adjusting the nextRoute property of Router.

In DestinationListView:

.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
       router.navPath.append(DestinationModel.mockDestinations.randomElement()!)
       router.nextRoute = .info
    }
}

In DestinationDetailView:

.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        router.showSheet.toggle()
    }
}

You can also programmatically navigate using the array's index of the element you wish to pass. For example, you could navigate to the first destination that contains the following for the location property: "Costa Rica, Central America".

In DestinationDetailView:

.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        guard let index = DestinationModel.mockDestinations.firstIndex(where: { $0.location == "Costa Rica, Central America" }) else { return }
            router.navPath.append(DestinationModel.mockDestinations[index])
            router.nextRoute = .info
    }
}

Finishing Thoughts

You could continue further, and build up a variety of different routes your app could take by creating a Route object, and then passing an array of this to your router to handle. However, I'm not quite there with the implementation just yet myself!

Any feedback/improvements/mistakes to correct is always appreciated.

The full repo can be found here.

DEV Community: Duncan Kent

Sheets, Half Sheets & more with Presentation Detents in SwiftUI

medium

large

DrawerDetent Struct and Extension to PresentationDetent

Drawer Style Sheet Result:

Recreating the iOS Battery Graph using Swift Charts

Apple's Implementation

Main Components

Creating the data points for our graphs

Setting up the graph picker view

Displaying different graph views

24 Hour Battery Level Graph

Axes

Previous 10 DaysBattery Usage Graph

Axes

The new NavigationStack & NavigationPath for SwiftUI

The Navigation API

Navigation in SwiftUI so far

Holiday Destinations - Example

Project Setup

Storing Navigation State

Providing Access to the Navigation State in a View

Passing a value to NavigationLink

Setting the destination for NavigationLink

Destination Detail View

Popping to the root view

Deeplinking and further implementations

Finishing Thoughts

Passing a value to `NavigationLink`

Setting the destination for `NavigationLink`