Xcode interface (navigator, editor, inspector) in iOS Swift - Mini App: Build & Ship

Build: Xcode Interface Overview

This screen shows the main parts of the Xcode interface: navigator, editor, and inspector. It helps beginners understand where to find files, edit code, and adjust settings.

Target UI

┌───────────────────────────────────────────────┐
│ Navigator             │ Editor               │ Inspector           │
│ ┌───────────────┐    │ ┌───────────────┐    │ ┌───────────────┐  │
│ │ Files List    │    │ │ Code Area     │    │ │ Properties   │  │
│ │ (Project)    │    │ │ (Main.swift)  │    │ │ (Details)    │  │
│ └───────────────┘    │ └───────────────┘    │ └───────────────┘  │
│                                               │
│                                               │
└───────────────────────────────────────────────┘

Show three main sections horizontally: Navigator on left, Editor in center, Inspector on right

Navigator shows a simple list of files (e.g., Main.swift, AppDelegate.swift)

Editor shows a code snippet area with sample Swift code

Inspector shows details or properties related to the selected file

Use clear labels for each section

Layout should be responsive and visually separated

Starter Code

iOS Swift

import SwiftUI

struct XcodeInterfaceView: View {
    var body: some View {
        HStack(spacing: 0) {
            // TODO: Add Navigator view here
            // TODO: Add Editor view here
            // TODO: Add Inspector view here
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct XcodeInterfaceView_Previews: PreviewProvider {
    static var previews: some View {
        XcodeInterfaceView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

struct XcodeInterfaceView: View {
    var body: some View {
        HStack(spacing: 0) {
            // Navigator
            VStack(alignment: .leading) {
                Text("Navigator")
                    .font(.headline)
                    .padding(.bottom, 5)
                List {
                    Text("Main.swift")
                    Text("AppDelegate.swift")
                    Text("ContentView.swift")
                }
                .listStyle(PlainListStyle())
            }
            .frame(width: 150)
            .padding()
            .background(Color(UIColor.systemGray6))
            .border(Color.gray.opacity(0.5))

            // Editor
            VStack(alignment: .leading) {
                Text("Editor")
                    .font(.headline)
                    .padding(.bottom, 5)
                ScrollView {
                    Text("import SwiftUI\n\nstruct ContentView: View {\n    var body: some View {\n        Text(\"Hello, Xcode!\")\n            .padding()\n    }\n}")
                        .font(.system(.body, design: .monospaced))
                        .padding()
                        .background(Color.white)
                        .cornerRadius(5)
                        .shadow(radius: 1)
                }
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color(UIColor.systemBackground))
            .border(Color.gray.opacity(0.5))

            // Inspector
            VStack(alignment: .leading) {
                Text("Inspector")
                    .font(.headline)
                    .padding(.bottom, 5)
                VStack(alignment: .leading, spacing: 8) {
                    Text("File: Main.swift")
                    Text("Size: 2 KB")
                    Text("Modified: Today")
                    Text("Type: Swift Source File")
                }
                .font(.subheadline)
                .padding(8)
                .background(Color(UIColor.systemGray6))
                .cornerRadius(5)
            }
            .frame(width: 180)
            .padding()
            .background(Color(UIColor.systemGray5))
            .border(Color.gray.opacity(0.5))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct XcodeInterfaceView_Previews: PreviewProvider {
    static var previews: some View {
        XcodeInterfaceView()
    }
}

This SwiftUI view uses an HStack to arrange three vertical sections side by side, mimicking the Xcode interface layout.

The Navigator is a fixed width vertical list showing file names with a label on top. It uses a List for a simple file list.

The Editor is the largest area in the center with a scrollable text showing sample Swift code in a monospaced font. It has padding and a subtle shadow to look like a code editor.

The Inspector on the right shows file details with a label and some text lines describing the selected file.

Each section has background colors and borders to visually separate them, making the layout clear and easy to understand for beginners.

Final Result

Completed Screen

┌───────────────────────────────────────────────┐
│ Navigator             │ Editor               │ Inspector           │
│ ┌───────────────┐    │ ┌───────────────┐    │ ┌───────────────┐  │
│ │ Main.swift    │    │ │ import SwiftUI│    │ │ File: Main.swift│  │
│ │ AppDelegate.swift│  │ │ struct ContentView│ │ Size: 2 KB     │  │
│ │ ContentView.swift│  │ │ {             │    │ │ Modified: Today│  │
│ └───────────────┘    │ │ Text("Hello, Xcode!")│ │ Type: Swift Source│  │
│                       │ │ }             │    │ │ File          │  │
│                       │ └───────────────┘    │ └───────────────┘  │
└───────────────────────────────────────────────┘

User can scroll the code in the Editor section

User sees file list on the left to understand Navigator role

User sees file details on the right in Inspector section

Stretch Goal

Add a toggle button to collapse and expand the Navigator panel

💡 Hint

Use a @State variable to track if Navigator is shown, and a Button to toggle it. Adjust the Navigator width to zero when collapsed.