SwiftUI by Apple | Layout and Style — Designing an Interface

Tony Trejo
2 min readApr 16, 2024
Apple Journey | Layout and Style — Designing an Interface

🚀 #5 Topic: Layout and Style — Designing an Interface

Practice positioning views and examining their dimensions by crafting two onboarding screens for an iOS app.

Experiment with layout, colors, graphics, and text to personalize this project according to your preferences.

🔗 Tutorial Link: https://developer.apple.com/tutorials/develop-in-swift/design-an-interface

📝 Subtopics:

- Type Inference:

- Introduction and application in the `.font` modifier.

[Type Safety and Type Inference](https://docs.swift.org/swift-book/documentation/the-swift-programming-language/thebasics/#Type-Safety-and-Type-Inference)

- View Modifiers:

- `.fontWidth`: Adjusting font width for various font styles.

[Font.Width](https://developer.apple.com/documentation/swiftui/font/width)

- `.fontDesign`: Customizing font design for different visual effects.

[Font.Design](https://developer.apple.com/documentation/swiftui/font/design)

- `.multilineTextAlignment`: Aligning text within a view.

- `.border`: Adding borders to views for debugging purposes.

[Debug View Hierarchy](https://developer.apple.com/documentation/xcode/diagnosing-issues-in-the-appearance-of-your-running-app)

- `.frame`: Positioning a view within an invisible frame with specified dimensions.

- `.background(_:in:fillStyle:)`: Setting the background of a view with an insettable shape and fill style.

- `.opacity`: Adjusting the transparency of a view.

- `.brightness`: Brightening a view by a specified amount.

- Views:

- `RoundedRectangle`: Creating a rectangular shape with rounded corners.

- `ZStack`: Overlaying subviews and aligning them in both axes.

- `Spacer`: Expanding space within stack layouts.

- `TabView`: Switching between multiple child views with interactive elements.

- `Image(systemName: “”)`:

Utilizing system images for a consistent set of icons in the app.

[Configuring and Displaying Symbol Images](https://developer.apple.com/documentation/uikit/uiimage/configuring_and_displaying_symbol_images_in_your_ui)

🔍 Key Insights:

- Introduction and application of Type Inference, simplifying code readability and maintenance.

- Utilization of border modifiers for debugging, with additional resources on debugging view hierarchy.

- Comprehensive explanation of padding modifiers and edge restrictions.

- Utilization of system images and customization through font size and color adjustments.

- Introduction to working with multiple files and utilizing Previews, with considerations for parameter requirements in views.

- Attention to deprecated modifiers such as `.background(_:alignment:)`, with room for additional commentary.

- Implementation of `TabView` for navigation, akin to `UIPageViewController`.

- Incorporation of Color Sets in Asset Catalogs, with a valuable note on naming conventions.

- Integration of engaging questions to reinforce understanding of covered topics.

- Acknowledgment of content depth, potentially overwhelming for beginners, with encouragement to persist and grow.

Let’s continue embracing challenges, learning from experiences, and growing as developers! 🌟👩‍💻👨‍💻 #SwiftLang #DevelopInSwift #Xcode #AppDevelopment

--

--