How to create a 2 column grid with square shaped cells in SwiftUI

Question

I'm trying to replicate this UI in SwiftUI using a Grid.

I created the cell like this.

struct MenuButton: View {
    let title: String
    let icon: Image
    
    var body: some View {
        Button(action: {
            print(#function)
        }) {
            VStack {
                icon
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 60, height: 60)
                Text(title)
                    .foregroundColor(.black)
                    .font(.system(size: 20, weight: .bold))
                    .multilineTextAlignment(.center)
                    .padding(.top, 10)
            }
        }
        .frame(width: 160, height: 160)
        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.fr_primary, lineWidth: 0.6))
    }
}

And the Grid like so.

struct LoginUserTypeView: View {
    private let columns = [
        GridItem(.flexible(), spacing: 20),
        GridItem(.flexible(), spacing: 20)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 30) {
                ForEach(Menu.UserType.allCases, id: \.self) { item in
                    MenuButton(title: item.description, icon: Image(item.icon))
                }
            }
            
            .padding(.horizontal)
            .padding()
        }
    }
}

But on smaller screens like the iPod, the cells are overlapped.

On bigger iPhone screens, still the spacing is not correct.

What adjustments do I have to make so that in every screen size, the cells would show in a proper square shape and equal spacing on all sides?

Does this your questions answered? stackoverflow.com/a/65890000/14733292 — Raja Kishan
– Raja Kishan, Commented Feb 16, 2021 at 12:33
@RajaKishan Thanks. I gave it a try. It also works but I don't want to hardcode the number of rows. — Isuru
– Isuru, Commented Feb 16, 2021 at 13:42

Tomas Jablonskis · Accepted Answer · 2021-02-16 13:49:20Z

1

MenuButton has fixed width and height, thats why it behaves incorrectly.

You could utilise .aspectRatio and .frame(maxWidth: .infinity, maxHeight: .infinity) for this:

struct MenuButton: View {
    let title: String
    let icon: Image

    var body: some View {
        Button(action: {
            print(#function)
        }) {
            VStack(spacing: 10) {
                icon
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: 60, maxHeight: 60)
                Text(title)
                    .foregroundColor(.black)
                    .font(.system(size: 20, weight: .bold))
                    .multilineTextAlignment(.center)
            }
            .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .aspectRatio(1, contentMode: .fill)
        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color. fr_primary, lineWidth: 0.6))
    }
}

edited Feb 16, 2021 at 13:49

answered Feb 16, 2021 at 12:32

Tomas Jablonskis

4,4364 gold badges25 silver badges41 bronze badges

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

3 Comments

Isuru Over a year ago

Thanks for the response. That indeed fixed my cell sizing issue. However there's a small problem. Even though the cell resizes, the content inside (image and the text) are still the same size. So in smaller screens, it looks like this. Is there a way to resize those elements to fit inside the cell as well?

Isuru Over a year ago

I tried setting the aspect ratio to the Text object. It's pushing out the image.

Tomas Jablonskis Over a year ago

@Isuru I assume you want to keep your buttons square.

Collectives™ on Stack Overflow

How to create a 2 column grid with square shaped cells in SwiftUI

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related