Saturday, September 24, 2022
HomeiOS DevelopmentFacet Ratios in SwiftUI · objc.io

Facet Ratios in SwiftUI · objc.io


One of many modifiers that all the time puzzled me a bit was .aspectRatio. How does it actually work? As soon as I figured it out, it turned out to be easier than I assumed.

One place the place we are able to discover out loads about how SwiftUI works is SwiftUI’s .swiftinterface file. That is situated inside Xcode. Inside your Terminal, go to /Functions/Xcode.app, and carry out the next command:

								discover . -path "*/SwiftUI.framework*swiftinterface"

							

There are a couple of variants of the .aspectRatio API, however all of them boil all the way down to a single implementation:

								func aspectRatio(_ aspectRatio: CGFloat?, contentMode: ContentMode) -> some View {
    
}

							

The variant with CGSize simply calls this technique with dimension.width/dimension.peak, and .scaledToFit and .scaledToFill name this technique with the respective content material modes and an aspectRatio of nil.

After we name aspectRatio with a set side ratio, e.g. .aspectRatio(16/9, contentMode: .match), the side ratio implementation takes the proposed dimension, and proposes a brand new dimension to its baby. When the content material mode is .match, it matches a rectangle with the specified side ratio contained in the proposed dimension. For instance, once you suggest 100×100, it should suggest 100×56.2 to its baby. If you select .fill as a substitute, it should suggest 177.8×100 to its baby as a substitute.

I discovered this conduct by printing the proposed sizes. Extra on that under.

Maybe the most typical use of aspectRatio is mixed with a resizable picture, like so:

								Picture("take a look at")
    .resizable()
    .aspectRatio(contentMode: .match)

							

This can draw the picture to suit inside the proposed dimension. Observe that we don’t specify the precise side ratio: it’s derived from the underlying picture.

After we do not specify a set side ratio however use nil for the parameter, the side ratio modifier seems on the superb dimension of the underlying view. This implies it merely proposes nil×nil to the underlying view, and makes use of the results of that to find out the side ratio. For instance, when the picture studies its superb dimension as 100×50, the computed side ratio is 100/50.

The method then continues like earlier than: when the view was proposed 320×480, the picture will probably be sized to 320×160 when the content material mode is ready to .match, and 960×480 when the content material mode is ready to .fill.

Determining proposed sizes

Proposed sizes aren’t a part of the general public API of SwiftUI. Although you completely want to know how this works so as to write efficient layouts, this is not actually documented. The one official place the place this conduct is described is within the glorious 2019 WWDC speak Constructing Customized Views with SwiftUI.

Nonetheless, there’s a hack to do that. Contained in the interface file talked about above, I looked for “ProposedSize” and located a protocol named _ArchivableView which permits us to override sizeThatFits:

								struct MySample: _ArchivableView {
    var physique: some View {
        Rectangle()
    }
    
    func sizeThatFits(in proposedSize: _ProposedSize) -> CGSize {
        print(proposedSize.fairly)
        return proposedSize.orDefault
    }
}

							

We are able to now merely assemble a MySample with a facet ratio and print the end result. As an alternative of a .body, you may as well use .fixedSize() to suggest nil for the width and/or peak. Likewise, strive leaving out the primary parameter and see how .aspectRatio proposes nil to determine the best dimension of its baby view.

								MySample()
    .aspectRatio(100/50, contentMode: .fill)
    .body(width: 320, peak: 480)

							

Sadly the width and peak properties on _ProposedSize aren’t seen within the swift interface, so I had to make use of introspection to print these (and likewise add a couple of helper strategies like .fairly and .orDefault). The total code is in a gist.

If you wish to be taught extra about how SwiftUI works, learn our e book Considering in SwiftUI. When your organization is already constructing issues in SwiftUI — or is about to get began — think about reserving a SwiftUI Workshop to your group.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

6 − 3 =

Most Popular

Recent Comments