How can I give a sequence of Text views in a horizontal ScrollView equally sized square backgrounds in SwiftUI?

Question

I'm working on a layout for a push-up counter app. That is my code and the result so far:

struct ContentView: View {
    
let sets = [1,3,6,8,12,16,23,43,56,76,100,101,125]
    
var body: some View {
    VStack {
            
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(sets, id: \.self) { set in
                    Text("\(set)")
                        .padding(8)
                        .background(Color.blue)
                }
            }
        }
            
        Color.green
            .overlay {
                Text("56")
                    .font(.largeTitle.weight(.bold))
            }
        }
    }
}

The numbers above are sets the user has to perform. I want all the numbers to be in equally sized perfect squares rather than rectangles and the spacing between those squares to be equal. This layout has to dynamically scale and adapt to all font size variants and screen sizes. How can I achieve that in a declarative manner? With no hacks and hard coding.

Conceptually, I want the end result to look like this:

So far, I've tried geometry reader, fixed size modifier, and setting aspect ratio in various places, but everything falls apart.

You can download a sample project here. I appreciate your help!

You could give Apple's MyEqualWidthHStack example a try: developer.apple.com/documentation/swiftui/… — malhal
– malhal, Commented Nov 9, 2023 at 12:50
Does this answer your question? Equal widths of subviews with SwiftUI — Teja Nandamuri
– Teja Nandamuri, Commented Nov 9, 2023 at 15:47

Benzy Neez · Accepted Answer · 2023-12-16 11:12:17Z

1

This requirement can be achieved with a custom Layout implementation:

struct HStackEqualSquares: Layout {
    var spacing: CGFloat = 10

    private func preferredSize(subviews: Subviews, proposedWidth: CGFloat?) -> CGSize {
        let subviewDimensions = subviews.map { $0.dimensions(in: .unspecified) }
        let maxWidth: CGFloat = subviewDimensions.reduce(.zero) { currentMax, subviewSize in
            max(currentMax, subviewSize.width)
        }
        let nSubviews = CGFloat(subviews.count)
        let totalWidth = (nSubviews * maxWidth) + ((nSubviews - 1) * spacing)
        return CGSize(width: totalWidth, height: maxWidth)
    }

    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Void
    ) -> CGSize {
        return preferredSize(subviews: subviews, proposedWidth: proposal.width)
    }

    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Void
    ) {
        let height = preferredSize(subviews: subviews, proposedWidth: bounds.width).height
        var point = bounds.origin
        for subview in subviews {
            let placementProposal = ProposedViewSize(width: height, height: height)
            subview.place(at: point, proposal: placementProposal)
            point = CGPoint(x: point.x + height + spacing, y: point.y)
        }
    }
}

In order that the items actually expand to fill the sizes they are given, .frame(maxWidth: .infinity, maxHeight: .infinity) needs to be set on the text items. Here is how it comes together:

struct ContentView: View {

    let sets = [1,3,6,8,12,16,23,43,56,76,100,101,125]

    var body: some View {
        VStack {
            ScrollView(.horizontal, showsIndicators: false) {
                HStackEqualSquares {
                    ForEach(sets, id: \.self) { set in
                        Text("\(set)")
                            .padding(8)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(.blue)
                    }
                }
            }

            Color.green
                .overlay {
                    Text("56")
                        .font(.largeTitle.weight(.bold))
                }
        }
    }
}

Screenshot

EDIT Following up on your comment in which you asked about a solution for older iOS versions, it would be possible to get near to the same solution by going back to my original solution (using GeometryReader) and using an HStack instead of the Layout implementation. However, you would have to guess the height that is added to the row. This height would need to be applied to the HStack as bottom padding. It means the solution doesn't quite fulfil the requirement of no hard-coded values, but maybe it is adequate for the purpose of supporting older iOS versions. The size of the padding could at least be defined as a ScaledMetric so that it adapts to changes to the text size:

@ScaledMetric(relativeTo: .body) private var bottomPadding: CGFloat = 10

Then it is used like this:

private var simpleFootprint: some View {
    Text("888")
        .hidden()
}

private var compositeFootprint: some View {
    ZStack {
        ForEach(sets, id: \.self) { set in
            Text("\(set)")
        }
    }
    .hidden()
}

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 10) { // instead of HStackEqualSquares
        ForEach(sets, id: \.self) { set in
            compositeFootprint // or simpleFootprint, if sufficient
                .padding(8)
                .overlay {
                    GeometryReader { proxy in
                        let width = proxy.size.width
                        Text("\(set)")
                            .frame(width: width, height: width)
                            .background(.blue)
                    }
                }
        }
    }
    .padding(.bottom, bottomPadding)
}

edited Dec 16, 2023 at 11:12

answered Nov 9, 2023 at 19:58

Benzy Neez

29.4k3 gold badges22 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gene Bogdanovich Over a year ago

Thank you for your detailed answer! I have a couple of follow-up questions if you don't mind. Apple claims that the Layout protocol replaces the Geometry reader when we need to solve a problem, like in my question. In your solution, we are using both. Apple also claims we're bypassing the layout engine by using a Geometry reader in an overlay, which could crash our app. I'm referring to Compose custom layouts with SwiftUI WWDC session at 18:18. What are your thoughts on that?

Gene Bogdanovich Over a year ago

I was also wondering if there is a solution to achieve the same effect without the Layout protocol with the deployment target of iOS 15. If you have something in mind, please share! It would be valuable for me and for the community.

Benzy Neez Over a year ago

@GeneBogdanovich Thanks for your feedback. After a bit of thought, I have updated the answer to work without using a GeometryReader. For older iOS versions, the previous version of the answer (which did use a GeometryReader) could be used as a possible fallback solution, except that you would need to define the padding that is used. This alternative approach is described at the bottom of the answer.

Benzy Neez Over a year ago

I edited the solution once again to simplify the version with the custom Layout. There is no need to use overlays if the maxWidth and maxHeight is set on the individual text items.

Collectives™ on Stack Overflow

How can I give a sequence of Text views in a horizontal ScrollView equally sized square backgrounds in SwiftUI?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related