SwiftUI by Apple | Wrap-up: Layout and Style — Part 2.2

SwiftUI by Apple | Wrap-up: Layout and Style — Part 2.2

🚀 #6.3 Excited to share Wrap-up: Refine the spacing and alignment of your views! 🌟

🔗 Tutorial: https://developer.apple.com/tutorials/sample-apps/layingoutviews#Refine-the-spacing-and-alignment-of-your-views

📝 Subtopics:

VStack Alignment (HorizontalAlignment)

Use `HorizontalAlignment` to align views horizontally in a `VStack`.

📚 Documentation: https://developer.apple.com/documentation/swiftui/horizontalalignment

• `.leading`: Aligns views to the left.
• `.center`: Centers views (default alignment).
• `.trailing`: Aligns views to the right.

ℹ️ Use `.trailing` carefully with `maxWidth: .infinity` to avoid overriding parent alignment.

Note 1: This alignment applies to subviews unless their frame is set with `maxWidth: .infinity`, in which case the frame’s alignment takes precedence. For instance, the following code aligns the Image to the right, overriding the leading alignment from the parent VStack.

VStack(alignment: .leading) {
  Image(systemName: "books.vertical.fill")
                .font(.system(size: 40))
                .frame(maxWidth: .infinity, alignment: .trailing)
}

HStack Alignment (VerticalAlignment)

Use `VerticalAlignment` to align views vertically in an `HStack`.

📚 Documentation: https://developer.apple.com/documentation/swiftui/verticalalignment

• `.top`: Aligns views to the top.
• `.center`: Centers views (default alignment).
• `.bottom`: Aligns views to the bottom.

Using Spacer for Alignment:

• Adding a `Spacer` in an `HStack` shifts views to the right.

- Example:

VStack(alignment: .leading) {
        HStack {
            Spacer()
            Image(systemName: "books.vertical.fill").font(.system(size: 40))
              .background(Color.yellow)
            Image(systemName: "books.vertical.fill").font(.system(size: 40))
        }
    }

Attribute:

• `@inlinable`: Swift attribute for faster function execution by embedding function instructions directly in the app’s executable.

📖 Documentation: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/attributes#inlinable

Here is a simple example:

@inlinable
public func add(_ a: Int, _ b: Int) -> Int {
    return a + b
}

In this example, the add function is marked with @inlinable. This means whenever you use this function in your app, Swift can quickly grab the instructions from a handy spot, making things a bit more efficient.

Without @inlinable:

┌────────────┐     ┌────────────┐
│ App Code   │ --> │ add(a, b)  │
└────────────┘     └────────────┘

With @inlinable:

┌────────────┐
│ App Code   │
│ add(a, b)  │  (The add function is inlined directly here during compile
│            │   time, making it faster)
└────────────┘

🔍 Key Insights

• Precision in Alignment: Use alignment options (`leading`, `center`, `trailing`, `top`, `bottom`) to precisely position views for a polished UI.
• Performance Boost with `@inlinable`: Enhance app performance by reducing function call overhead with `@inlinable`.
• Effective Use of Spacers: Incorporate `Spacer` to control spacing and achieve balanced layouts.

🎨 Playing with the configurations in this tutorial taught me so much about aligning views in various scenarios. It’s exciting to see how different alignments can transform the look and feel of an app! 🌟

Let’s keep challenging ourselves, learning from these experiences, and growing as developers! 🌟👩‍💻👨‍💻 #SwiftUI #DevelopInSwift #Xcode #AppDevelopment