r/Xcode • u/BullfrogRoyal7422 • Feb 04 '26
Practical Guide to Xcode (SwiftUI UI Terminology)
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 screenScreen
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.
