0

How can I get SwiftUI to load 8 images horizontally but if the third image happens to go off screen it puts it in a Vstack underneath the 1st image with the same padding... and if three can fit on the screen it does the same to the 4th.

I can not find anyway to do this! TableViews were so easy to implement but now SwiftUI makes things much harder

iPhone:

[1] [2]
[3] [4]
[5] [6] 
[7] [8]

iPad Pro
[1] [2][3] [4]
[5] [6] [7] [8]

iPad Mini
[1] [2][3] 
[4] [5] [6] 
[7] [8]
Daniel Storm
  • 18,301
  • 9
  • 84
  • 152
RealTechyGod
  • 121
  • 1
  • 1
  • 11

1 Answers1

2

I have acheived this same requirement through below code. Please check.

We need to calculate number of rows and columns based on total items

Logic -

  1. Calculate columns by assuming equal width for each images in screen
    • Screen width/width of each image cell
  2. Calculate rows by dividing total image array count with number of columns.
  3. For example;

  • Total images in array - 5

  • Total columns say 2

  • Total rows = 5/2 = 2.5 that means we need 3rd row to display last image

struct GalleryView: View {
    //Sample array of images
    let images: [String] = ["preview1","preview2","preview3","preview4","preview5""]
    let columns = Int(UIScreen.main.bounds.width/120.0) //image width is 100 and taken extra 20 for padding
    
    var body: some View {
        ScrollView {
            GalleryCellView(rows: getRows(), columns: columns) { index in
                if index < self.images.count {
                    Button(action: { }) {
                        ImageGridView(image: self.images[index])
                    }
                }
            }.listRowInsets(EdgeInsets())
        }
    }
    
    func getRows() -> Int {
        //calculate rows based on image count and total columns
        let rows = Double(images.count)/Double(columns)
        return floor(rows) == rows ? Int(rows) : Int(rows+1.0)
        //if number of rows is a double values that means one more row is needed
    }
}

//Load image button cell
struct ImageGridView: View {
    let image: String
    var body: some View {
        Image(image)
            .renderingMode(.original)
            .frame(width:100, height:100)
            .cornerRadius(10)
    }
}

//Build cell view
struct GalleryCellView<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int) -> Content
    
    var body: some View {
        VStack(alignment: .leading, spacing : 0) {
            ForEach(0 ..< rows, id: \.self) { row in
                HStack(spacing : 10) {
                    ForEach(0 ..< self.columns, id: \.self) { column in
                        self.content((row * self.columns) + column)
                    }
                }.padding([.top, .bottom] , 5)
                .padding([.leading,.trailing], 10)
            }
        }.padding(10)
    }

    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }
}

Tested in Xcode Version 11.3 , iPhone 11 Pro Max & iPad Pro (12.9 - inch) simulators

Result in iPhone

Result in iPad

Sona
  • 394
  • 3
  • 15