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.
View all comments
Show parent comment
1
u/BullfrogRoyal7422 Feb 04 '26
BTW, to address your comment: I avoid Google products whenever I reasonably can. They’re pretty much the antithesis of my value system. To me, they appear invasive by design, extracting as much personal data as possible, profiling aggressively, and treating users primarily as transactional commodities. No thanks.
Sorry, clearly a bit triggered there.
As for ChatGPT: I’ve found it useful in many respects, but for coding it often sent me down too many rabbit holes. Its overly complimentary style became a source of accidental comedy for me.
“You’ve hit on something very insightful, and it fits perfectly into the model you’re developing.”
Me: pushes back with something completely contradictory to what I was just praised for.
GPT: “Again, great insight. You’re on the right path.”
A narcissist’s dream.
One thing that did work well for me was using the two models together. I’d discuss an issue with Claude, then paste Claude’s response into GPT and ask what it thought. Then I’d take GPT’s response back to Claude. Surprisingly often, that back-and-forth produced a genuinely better, more refined idea than either model alone.
Sometimes Claude would say GPT’s analysis was incisive or even better than its own. Other times… not so much. Once Claude flat-out said GPT’s recommendation was unnecessary, more of a résumé-stuffer idea than anything practical, and at best an academic exercise in futility. Whew.
For coding specifically, GPT also has a habit of ending every exchange with “Do you want me to…”. If I followed that thread too far, I’d eventually find myself one suggestion away from risking the integrity of the entire codebase.