DEV Community

Anis Ali Khan
Anis Ali Khan

Posted on

Tutorial 29: 📍 TrailBlazer AR: Building a Navigation & TabView-Based SwiftUI App

🛠️ Tech Stack: SwiftUI, CoreLocation, ARKit, Motion Sensors (Accelerometer, Gyroscope, Compass)

📌 Table of Contents

  1. Introduction
    • What We’re Building
    • Why Use NavigationView & TabView?
    • Required Tools & Setup
  2. Project Setup
    • Creating a New Xcode Project
    • Adding Dependencies (ARKit, CoreLocation)
  3. Building the UI with NavigationView
    • Creating the Main NavigationView
    • Displaying a List of Trails
    • Detail View for Each Trail
  4. Implementing TabView for Multiple Features
    • Designing the TabView Layout
    • Adding AR Navigation Mode
    • Implementing a User Activity Tracker
  5. Integrating Sensors & AR Features
    • Accessing GPS & Compass Data
    • Using the Accelerometer for Motion Detection
    • Displaying AR Waypoints
  6. Polishing & Testing the App
    • Adding Icons & Styling
    • Testing on a Physical Device
    • Final Thoughts & Next Steps

1️⃣ Introduction

🎯 What We’re Building

Welcome to TrailBlazer AR! This iPhone app helps users explore hiking trails with AR waypoints, real-time GPS data, and step tracking.

Key Features:

✅ AR Waypoints: Use ARKit to display virtual waypoints along trails.

✅ NavigationView: Browse trails and view details.

✅ TabView: Switch between map mode, saved routes, and activity tracking.

✅ Sensor Integration: Use GPS, accelerometer, and gyroscope to enhance the experience.

🛠️ Why Use NavigationView & TabView?

  • NavigationView lets us create structured navigation for browsing trail details.
  • TabView allows easy switching between different app features.

🖥️ Required Tools & Setup

  • Xcode 15+
  • Swift 5+
  • iPhone (or Simulator with location simulation enabled)

2️⃣ Project Setup

🎬 Creating a New Xcode Project

  1. Open Xcode, select Create a new Xcode project.
  2. Choose iOS App, select SwiftUI as the interface.
  3. Name the project TrailBlazerAR.
  4. Enable ARKit & CoreLocation under "Frameworks & Libraries".

📦 Adding Dependencies

Add these imports in TrailBlazerARApp.swift:

import SwiftUI
import ARKit
import CoreLocation
import CoreMotion
Enter fullscreen mode Exit fullscreen mode

3️⃣ Building the UI with NavigationView 

struct TrailListView: View {
    let trails = ["Mountain Peak", "Forest Path", "Lakeside Walk", "Desert Trail"]

    var body: some View {
        NavigationView {
            List(trails, id: \.self) { trail in
                NavigationLink(destination: TrailDetailView(trailName: trail)) {
                    Text(trail)
                        .font(.headline)
                }
            }
            .navigationTitle("🏕 TrailBlazer AR")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

4️⃣ Implementing TabView for Multiple Features 

struct MainTabView: View {
    var body: some View {
        TabView {
            TrailListView()
                .tabItem {
                    Label("Trails", systemImage: "map")
                }

            ARViewContainer()
                .tabItem {
                    Label("AR Mode", systemImage: "arkit")
                }

            ActivityTrackerView()
                .tabItem {
                    Label("Activity", systemImage: "figure.walk")
                }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

5️⃣ Integrating Sensors & AR Features 

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private var manager = CLLocationManager()

    @Published var heading: Double = 0.0
    @Published var latitude: Double = 0.0
    @Published var longitude: Double = 0.0

    override init() {
        super.init()
        manager.delegate = self
        manager.requestWhenInUseAuthorization()
        manager.startUpdatingLocation()
        manager.startUpdatingHeading()
    }

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            latitude = location.coordinate.latitude
            longitude = location.coordinate.longitude
        }
    }

    func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
        heading = newHeading.trueHeading
    }
}
Enter fullscreen mode Exit fullscreen mode

6️⃣ Polishing & Testing the App

🎨 Adding Icons & Styling

  1. Update Assets.xcassets with custom icons.
  2. Use .background(Color.blue.opacity(0.1)) for better UI contrast.

🛠️ Testing on a Physical Device

  1. Connect an iPhone via USB and enable location permissions.
  2. Run the app in AR Mode and verify waypoints align with real-world direction.

🎬 Final Thoughts & Next Steps

✅ Congrats! You built an AR-powered trail explorer with NavigationView, TabView, and real-time sensor data! 🚀

🔹 Next Steps:

  • Add offline trail maps
  • Allow users to leave AR notes at waypoints
  • Integrate Apple HealthKit for step tracking

Hope you enjoyed building TrailBlazer AR! 🌎✨

Top comments (0)