ios – Tips on how to group a set of images in a particular method utilizing the present view measurement in SwiftUI

ios – Tips on how to group a set of images in a particular method utilizing the present view measurement in SwiftUI


I wish to obtain a particular design with 7 photos. The 7 photos include 5 squares (800x800px unique) and a pair of rectangle (400x200px unique). The tip objective ought to appear to be this instance.

It needs to be 3 rows of images, row 1 consists of three squares, the place on is a couple of third of the row, row 2 has a rectangle and a sq. and the final row simply has a single rectangle. The Drawback I am going through is that once I add the view to the mother or father, I get that end result.

To attain this format I attempted to make use of a mix of VStacks and HStack and tried to calculate the width of the photographs utilizing about 1/3 of the view with a GeometryReader.

import SwiftUI

struct OverviewTiles: View {
    var physique: some View {
        // TODO: There can be completely different designs so you should definitely look out for that
        GeometryReader { geo in
            let measurement = geo.measurement.width * 0.66
            VStack(spacing: 16) {
                HStack(spacing: 16) {
                    Picture("tiles_square")
                        .resizable()
                        .scaledToFit()
                        .body(width: measurement)
                    VStack(spacing: 16) {
                        Picture("tiles_square")
                            .resizable()
                            .scaledToFit()
                        Picture("tiles_square")
                            .resizable()
                            .scaledToFit()
                    }
                }
                HStack(spacing: 16) {
                    Picture("tiles_landscape")
                        .resizable()
                        .scaledToFit()
                        .body(width: measurement)
                    Picture("tiles_square")
                        .resizable()
                        .scaledToFit()
                }
                Picture("tiles_landscape")
                    .resizable()
                    .scaledToFit()
            }
            .body(maxWidth: .infinity, maxHeight: .infinity)
        }
        
    }
}

The View itself is instantiated inside a ScrollView. I am comparatively new to SwiftUI and I want to know if that is even the right strategy. In the end I prefer to have this aspect react appropriately to orientation modifications, although possibly the order of the pictures needs to be modified then. So, is utilizing GeometryReader the right method or are there higher methods to realize this?

Thanks very a lot, for serving to out.

author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 
rooshohttps://www.roosho.com
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Latest Articles

author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog.