iOS Development

Side Ratios in SwiftUI · objc.io

Side Ratios in SwiftUI · objc.io
Written by admin


One of many modifiers that at all times puzzled me a bit was .aspectRatio. How does it actually work? As soon as I figured it out, it turned out to be less complicated than I believed.

One place the place we will discover out so much about how SwiftUI works is SwiftUI’s .swiftinterface file. That is situated within Xcode. Inside your Terminal, go to /Purposes/Xcode.app, and carry out the next command:

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

							

There are just a few variants of the .aspectRatio API, however all of them boil right down to a single implementation:

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

							

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

Once we name aspectRatio with a hard and fast facet ratio, e.g. .aspectRatio(16/9, contentMode: .match), the facet ratio implementation takes the proposed measurement, and proposes a brand new measurement to its baby. When the content material mode is .match, it suits a rectangle with the specified facet ratio contained in the proposed measurement. For instance, if you suggest 100×100, it’s going to suggest 100×56.2 to its baby. Whenever you select .fill as an alternative, it’s going to suggest 177.8×100 to its baby as an alternative.

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

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

								Picture("check")
    .resizable()
    .aspectRatio(contentMode: .match)

							

This may draw the picture to suit throughout the proposed measurement. Word that we don’t specify the precise facet ratio: it’s derived from the underlying picture.

Once we do not specify a hard and fast facet ratio however use nil for the parameter, the facet ratio modifier appears to be like on the very best measurement 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 facet ratio. For instance, when the picture stories its very best measurement as 100×50, the computed facet 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 about to .match, and 960×480 when the content material mode is about to .fill.

Determining proposed sizes

Proposed sizes should not a part of the general public API of SwiftUI. Although you completely want to grasp how this works with the intention to write efficient layouts, this is not actually documented. The one official place the place this conduct is described is within the wonderful 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 will now merely assemble a MySample with a side 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 perfect measurement 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 just a few helper strategies like .fairly and .orDefault). The total code is in a gist.

If you wish to study extra about how SwiftUI works, learn our guide Pondering in SwiftUI. When your organization is already constructing issues in SwiftUI — or is about to get began — take into account reserving a SwiftUI Workshop on your staff.

About the author

admin

Leave a Comment