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)