SwiftUI-Views
Views are the heart and soul of building user interfaces in SwiftUI. To help keep things organized, group views into categories based on their primary jobs. Here’s a sneak peek at some of the most common categories you’ll encounter:
Layout Views
These help you arrange and position other views. Think of them as organizing shelves, helping you neatly place images, text, and buttons exactly where you want them. Examples include:
- HStack: Arranges views horizontally (side-by-side).
- VStack: Arranges views vertically (top to bottom).
- ZStack: Layers views on top of each other.
Control Views
These let the user interact with your app. Controls also need to be large enough for people to accurately click or tap. They empower users to tap to start a level in a game, adjust their music volume, or toggle settings on and off. Examples include:
- Button: Lets the user tap to trigger an action.
- Toggle: Acts like an on/off switch.
- Slider: Lets the user pick a value by sliding.
- Picker: Presents a list of options for selection.
Text Views
These specialize in displaying text. They display everything from simple welcome messages to detailed instructions or even the high scores in your game. Examples include:
- Text: Displays a piece of text on the screen.
- Label: Displays text with an optional icon.
Image & Shape Views
Image and shape views are graphical elements that add a level of visual enhancement for your app. These could be product images for a shopping app, achievements for a game, or a dynamic background pattern you create by layering and aligning various shapes. Examples include:
- Image: Displays an image (picture, illustration, or icon).
- Rectangle: Creates a rectangular shape.
- Circle: Creates a circular shape.
- Ellipse: Creates an elliptical shape.
- Capsule: Creates a rounded rectangle.
Container Views
These provide structure and navigation for your app’s interface. They help you create smooth transitions between screens, organize content into tabs for easy browsing, and build sophisticated user flows. Examples include:
- NavigationStack: Enables hierarchical navigation structures.
- ScrollView: Provides scrollable content areas.
- List: Displays rows of data efficiently.
- TabView: Organizes content into multiple tabs.
Remember: Don’t worry about memorizing all these categories and views right now. As you progress through this module, you’ll naturally learn them and discover many more powerful SwiftUI views, unlocking the potential to create incredible user interfaces.