Working with percentages in SwiftUI structure – Ole Begemann

SwiftUI’s structure primitives typically don’t present relative sizing choices, e.g. “make this view 50 % of the width of its container”. Let’s construct our personal!

Use case: chat bubbles

Contemplate this chat dialog view for example of what I wish to construct. The chat bubbles all the time stay 80 % as extensive as their container because the view is resized:

Constructing a proportional sizing modifier

1. The Format

We are able to construct our personal relative sizing modifier on high of the Format protocol. The structure multiplies its personal proposed dimension (which it receives from its father or mother view) with the given components for width and peak. It then proposes this modified dimension to its solely subview. Right here’s the implementation (the complete code, together with the demo app, is on GitHub):

/// A customized structure that proposes a share of its
/// acquired proposed dimension to its subview.
///
/// - Precondition: should include precisely one subview.
fileprivate struct RelativeSizeLayout: Format {
    var relativeWidth: Double
    var relativeHeight: Double

    func sizeThatFits(
        proposal: ProposedViewSize, 
        subviews: Subviews, 
        cache: inout ()
    ) -> CGSize {
        assert(subviews.depend == 1, "expects a single subview")
        let resizedProposal = ProposedViewSize(
            width: proposal.width.map { $0 * relativeWidth },
            peak: proposal.peak.map { $0 * relativeHeight }
        )
        return subviews[0].sizeThatFits(resizedProposal)
    }

    func placeSubviews(
        in bounds: CGRect, 
        proposal: ProposedViewSize, 
        subviews: Subviews, 
        cache: inout ()
    ) {
        assert(subviews.depend == 1, "expects a single subview")
        let resizedProposal = ProposedViewSize(
            width: proposal.width.map { $0 * relativeWidth },
            peak: proposal.peak.map { $0 * relativeHeight }
        )
        subviews[0].place(
            at: CGPoint(x: bounds.midX, y: bounds.midY), 
            anchor: .middle, 
            proposal: resizedProposal
        )
    }
}

Notes:

• I made the sort non-public as a result of I wish to management how it may be used. That is necessary for sustaining the idea that the structure solely ever has a single subview (which makes the mathematics a lot easier).

• Proposed sizes in SwiftUI might be nil or infinity in both dimension. Our structure passes these particular values by way of unchanged (infinity occasions a share continues to be infinity). I’ll focus on under what implications this has for customers of the structure.

2. The View extension

Subsequent, we’ll add an extension on View that makes use of the structure we simply wrote. This turns into our public API:

extension View {
    /// Proposes a share of its acquired proposed dimension to `self`.
    public func relativeProposed(width: Double = 1, peak: Double = 1) -> some View {
        RelativeSizeLayout(relativeWidth: width, relativeHeight: peak) {
            // Wrap content material view in a container to ensure the structure solely
            // receives a single subview. As a result of views are lists!
            VStack { // alternatively: `_UnaryViewAdaptor(self)`
                self
            }
        }
    }
}

Notes:

• I made a decision to go along with a verbose title, relativeProposed(width:peak:), to make the semantics clear: we’re altering the proposed dimension for the subview, which gained’t all the time end in a special precise dimension. Extra on this under.

• We’re wrapping the subview (self within the code above) in a VStack. This might sound redundant, however it’s crucial to ensure the structure solely receives a single factor in its subviews assortment. See Chris Eidhof’s SwiftUI Views are Lists for an evidence.

Utilization

The structure code for a single chat bubble within the demo video above appears like this:

let alignment: Alignment = message.sender == .me ? .trailing : .main
chatBubble
    .relativeProposed(width: 0.8)
    .body(maxWidth: .infinity, alignment: alignment)

The outermost versatile body with maxWidth: .infinity is accountable for positioning the chat bubble with main or trailing alignment, relying on who’s talking.

You’ll be able to even add one other body that limits the width to a most, say 400 factors:

let alignment: Alignment = message.sender == .me ? .trailing : .main
chatBubble
    .body(maxWidth: 400)
    .relativeProposed(width: 0.8)
    .body(maxWidth: .infinity, alignment: alignment)

Right here, our relative sizing modifier solely has an impact because the bubbles turn out to be narrower than 400 factors. In a wider window the width-limiting body takes priority. I like how composable that is!

80 % gained’t all the time end in 80 %

For those who watch the debugging guides I’m drawing within the video above, you’ll discover that the relative sizing modifier by no means stories a width higher than 400, even when the window is extensive sufficient:

It’s because our structure solely adjusts the proposed dimension for its subview however then accepts the subview’s precise dimension as its personal. Since SwiftUI views all the time select their very own dimension (which the father or mother can’t override), the subview is free to disregard our proposal. On this instance, the structure’s subview is the body(maxWidth: 400) view, which units its personal width to the proposed width or 400, whichever is smaller.

Understanding the modifier’s conduct

Proposed dimension ≠ precise dimension

It’s necessary to internalize that the modifier works on the premise of proposed sizes. This implies it is dependent upon the cooperation of its subview to attain its aim: views that ignore their proposed dimension will probably be unaffected by our modifier. I don’t discover this significantly problematic as a result of SwiftUI’s whole structure system works like this. In the end, SwiftUI views all the time decide their very own dimension, so you’ll be able to’t write a modifier that “does the suitable factor” (no matter that’s) for an arbitrary subview hierarchy.

nil and infinity

I already talked about one other factor to pay attention to: if the father or mother of the relative sizing modifier proposes nil or .infinity, the modifier will cross the proposal by way of unchanged. Once more, I don’t assume that is significantly unhealthy, however it’s one thing to pay attention to.

Proposing nil is SwiftUI’s manner of telling a view to turn out to be its ultimate dimension (fixedSize does this). Would you ever wish to inform a view to turn out to be, say, 50 % of its ultimate width? I’m unsure. Perhaps it’d make sense for resizable photographs and comparable views.

By the way in which, you might modify the structure to do one thing like this:

1. If the proposal is nil or infinity, ahead it to the subview unchanged.
2. Take the reported dimension of the subview as the brand new foundation and apply the scaling components to that dimension (this nonetheless breaks down if the kid returns infinity).
3. Now suggest the scaled dimension to the subview. The subview may reply with a special precise dimension.
4. Return this newest reported dimension as your personal dimension.

This technique of sending a number of proposals to youngster views is known as probing. Plenty of built-in containers views do that too, e.g. VStack and HStack.

Nesting in different container views

The relative sizing modifier interacts in an attention-grabbing manner with stack views and different containers that distribute the out there area amongst their youngsters. I believed this was such an attention-grabbing matter that I wrote a separate article about it: How the relative dimension modifier interacts with stack views.

The code

The whole code is obtainable in a Gist on GitHub.

Digression: Proportional sizing in early SwiftUI betas

The very first SwiftUI betas in 2019 did embrace proportional sizing modifiers, however they had been taken out earlier than the ultimate launch. Chris Eidhof preserved a duplicate of SwiftUI’s “header file” from that point that reveals their API, together with fairly prolonged documentation.

I don’t know why these modifiers didn’t survive the beta part. The discharge notes from 2019 don’t give a cause:

The relativeWidth(_:), relativeHeight(_:), and relativeSize(width:peak:) modifiers are deprecated. Use different modifiers like body(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) as a substitute. (51494692)

I additionally don’t keep in mind how these modifiers labored. They in all probability had considerably comparable semantics to my resolution, however I can’t make sure. The doc feedback linked above sound easy (“Units the width of this view to the required proportion of its father or mother’s width.”), however they don’t point out the intricacies of the structure algorithm (proposals and responses) in any respect.