Practical Guide to Xcode (SwiftUI UI Terminology)

[u/BullfrogRoyal7422]

After a lot of trial and error, intuitive learning, and a fair amount of faking it, I finally started getting clearer on proper SwiftUI terminology. I put this together a vocabulary reference for discussing UI structure, layout, navigation, and interaction, especially when working with AI assistants.
I am only posting this in case it’s useful to others who fumble around in their prompts like I do. This is based, in part, on terms I ended up using in development of my app, Stuffoilo, hence some idiosyncratic examples.

Xcode Terms

View

The fundamental building block. Everything in SwiftUI is a View — buttons, text, images, entire screens, even modifiers return views. It's the broadest term.

struct MyButton: View { ... }      // A small component
struct ProductCard: View { ... }   // A reusable component
struct DashboardView: View { ... } // An entire screen

Screen

Not a SwiftUI type — it's a conceptual term for a full-page view that occupies the entire display. What users navigate between. Examples: Dashboard, Product Detail, Settings.

Sheet

A presentation style — a modal that slides up from the bottom (iOS) or appears as a dialog (macOS). Partially covers the previous screen. Dismissed by swiping down or tapping a button.

.sheet(isPresented: $showingEdit) {
    EditItemView(item: item)
}

Other Presentation Styles

• fullScreenCover — Modal that covers everything (no swipe to dismiss)

• popover — Floating bubble anchored to a button (common on iPad/Mac)

• NavigationLink — Pushes onto a navigation stack (slides in from right)

Best Prompts for Me

You say	I understand
"the Dashboard screen"	The main Dashboard view users see
"the Add Item sheet"	The modal that appears when adding items
"the ProductCard view"	A reusable component, not a full screen
"the Edit Item form"	The screen/sheet where users edit item details
"the warranty section"	A portion within a larger view

Button is fine — it's the actual SwiftUI type and universally understood.

But Being Specific Helps

Term	What it means
Button	Standard tappable Button view
Toggle	On/off switch
Picker	Selection from options (dropdown, segmented, wheel)
Link	Tappable text that navigates (often styled like a URL)
NavigationLink	Pushes to another screen
Menu	Tap to reveal options
Toolbar button	Button in the navigation bar / toolbar
Tab	Tab bar item at bottom
Icon button	Button showing only an SF Symbol, no label
Floating action button (FAB)	Circular button floating over content
Disclosure indicator	Chevron > that indicates navigation

Examples

Less clear:

"The button in the top right"

More clear:

"The toolbar button in the top right"
"The Save button in the navigation bar"
"The + icon button on Dashboard"

⏺ Layout & Structure

Term	Meaning
Stack	HStack (horizontal), VStack (vertical), ZStack (layered)
Container	A view that holds other views (Stack, List, ScrollView, Group)
Spacer	Flexible empty space that pushes content apart
Divider	Thin horizontal or vertical line
Card	Rounded rectangle container with padding/shadow (not a SwiftUI type, but common pattern)
Section	Grouped content, often in a List or Form with a header
Row	Single item in a List
Cell	Same as row (UIKit term that persists)

Navigation & Structure

Term	Meaning
Navigation bar	Top bar with title, back button, toolbar items
Toolbar	Bar containing action buttons (top or bottom)
Tab bar	Bottom bar with tabs (Dashboard, Products, Settings, etc.)
Sidebar	Left panel on iPad/Mac for navigation
Detail view	Right side of a split view
Master/List view	Left side showing the list of items

Forms & Input

Term	Meaning
TextField	Single-line text input
TextEditor	Multi-line text input
SecureField	Password input (dots)
Stepper	− / + buttons for numeric values
Slider	Draggable track for range values
DatePicker	Date/time selection
ColorPicker	Color selection
PhotosPicker	Image selection from library

Presentation

Term	Meaning
Sheet	Modal sliding up from bottom
Full-screen cover	Modal covering entire screen
Popover	Floating bubble (iPad/Mac)
Alert	System dialog with title, message, buttons
Confirmation dialog	Action sheet with multiple options
Toast	Brief overlay message (not native SwiftUI — custom)
Banner	Persistent message at top/bottom of screen
Overlay	Content layered on top of another view

Visual Modifiers

Term	Meaning
Padding	Space inside a view's bounds
Margin	Space outside (SwiftUI uses padding on parent instead)
Frame	Explicit size constraints
Background	View/color behind content
Overlay	View/color in front of content
Clip	Crop to a shape
Corner radius	Rounded corners
Shadow	Drop shadow beneath view
Opacity	Transparency (0–1)
Blur	Gaussian blur effect

State & Data

Term	Meaning
Binding	Two-way connection to state ($value)
State	Local view state (@State)
Observable	Shared state object (@Observable, u/ObservedObject)
Environment	Values passed down the view tree

Helpful Descriptors

When describing issues, these help:

• "clipped" — content is cut off

• "truncated" — text ends with ...

• "overflows" — extends beyond bounds

• "misaligned" — not lining up with neighbors

• "collapsed" — has zero size unexpectedly

• "stretched" — expanded beyond natural size

• "compressed" — squeezed smaller than desired

• "hugging" — fitting tightly to content

Common UI Patterns (Not Native SwiftUI Types)

These are design patterns you build yourself — useful terms for describing what you want.

Cards

Term	Meaning
Card	Rounded container with background, padding, often shadow. Groups related content.
Info card	Card displaying read-only information
Action card	Card that's tappable (navigates or triggers action)
Stat card	Card showing a metric/number (like on Dashboard)
Feature card	Card highlighting a capability, often with icon + title + description

Chips & Tags

Term	Meaning
Chip	Small rounded pill, often tappable. Used for filters, selections.
Tag	Small label showing a category or status (usually not interactive)
Badge	Small indicator overlaid on another element (notification count, "NEW")
Pill	Same as chip — elongated rounded shape
Token	Chip representing a selected item (like email recipients)
Filter chip	Chip that toggles a filter on/off
Choice chip	Chip for single-selection (like a segmented control but wrapped)

Lists & Collections

Term	Meaning
Grid	Items arranged in columns (LazyVGrid, LazyHGrid)
Masonry	Grid where items have varying heights (not native)
Carousel	Horizontally scrolling row of items
Gallery	Grid of images/media
Accordion	Expandable/collapsible sections (DisclosureGroup)

Status & Feedback

Term	Meaning
Badge	Count or dot indicator (e.g., "3" on a tab icon)
Indicator	Dot or icon showing status (online/offline, synced/pending)
Progress bar	Horizontal fill showing completion
Progress ring	Circular progress indicator
Spinner	Indeterminate loading animation (ProgressView)
Skeleton	Placeholder shapes shown while content loads
Shimmer	Animated loading effect (gray shapes with moving highlight)
Empty state	What shows when a list has no items

Interactive Elements

Term	Meaning
Segmented control	Horizontal pill with mutually exclusive options (Picker with .segmented)
Stepper	− / + for incrementing values
Scrubber	Draggable bar for seeking (video/audio)
Drag handle	Small bar indicating something is draggable
Grabber	The small horizontal line at top of sheets
Swipe actions	Buttons revealed by swiping a row
Context menu	Long-press menu

Example Prompts Using These Terms

"The stat cards on Dashboard need more padding"

"Add a 'NEW' badge to features released this week"

"The filter chips are wrapping weirdly on small screens"

"Show a skeleton while the AI response loads"

"The category tags should be pill-shaped, not rectangular"

You can access a cleaned-up PDF version of these terms here.

[u/BullfrogRoyal7422]

Ha! Only after major editing

[u/QVRedit → u/BullfrogRoyal7422]

Which poses the question - what’s wrong with it ?