SwiftUI Project3 : List view를 사용하여 Grid 만들기

List view로 Grid 만들기

New file을 만들어 이름은 'Dish' 라고 정해주고, 아래 이미지를 Assets에 넣어줍니다.

 

Dish.zip

7.08MB

(출처: unsplash.com/photos/8Nc_oQsc2qQ)

 

그리고 Dish 라는 Extension값을 넣어주겠습니다.

import Foundation
import SwiftUI

struct Dish {
    
    //Dish를 구별하기 위해 고유 ID를 저장해줌
    let id = UUID()
    let name : String
    let price : Double
    let imageURL : String
    
}

이제 아래에 각 요리에 대한 정보를 입력해주겠습니다.

extension Dish {
    static func all() -> [Dish] {
        return [
        
            Dish(name: "김치", price: 10000, imageURL: "Kimchi"),
            Dish(name: "스파게티", price: 8500, imageURL: "Spagetti"),
            Dish(name: "토스트", price: 3000, imageURL: "Toast"),
            Dish(name: "초밥", price: 12000, imageURL: "Sushi"),
            Dish(name: "스테이크", price: 25000, imageURL: "Steak"),
            Dish(name: "치킨", price: 17000, imageURL: "Chicken")
        
        ]
    }
}

이제 contentView에 위에 값을 추가해줘야하는데, 그전에 Dish에 식별가능한지 확인 할 수 있는 Identifiabel을 매개변수 타입을 넣어줘야합니다.

import Foundation
import SwiftUI
    //식별가능여부 매개변수 타입 추가
struct Dish : Identifiable {
    
    //Dish를 구별하기 위해 고유 ID를 저장해줌
    let id = UUID()
    let name : String
    let price : Double
    let imageURL : String
    
}

Xcode에 새로운  폴더를 만들고, 이름을 Extension이라고 정합니다. 새로운 폴더를 생성후 이름은 'Array+Extension'이라고 설정해줬습니다. 코드를 다음과같이 작성해줍니다.

import Foundation

extension Array {
    func chunked(into size: Int) -> [[Element]] {
        return stride(from: 0, to: count, by: size).map {
            Array(self[$0 ..< Swift.min($0 + size, count)])
        }
    }
}

 

이렇게 chunked 함수가 생성 되었습니다. 이제 이것을 contentView에 넣어주도록 하겠습니다.

struct ContentView: View {
    
    let dishes = Dish.all()
    
    var body: some View {
                        //into의 숫자만큼 grid개수가 정해짐
        let chunkedDishes = dishes.chunked(into: 2)
        
        return List {
            
            ForEach(0..<chunkedDishes.count) { index in
                
                HStack(alignment: .center) {
                    ForEach(chunkedDishes[index]) { dish in
                        Image(dish.imageURL)
                            .resizable()
                            .aspectRatio(ontentMode: .fill)
                    }
                }
            }
        }
        
    }
}

위와같이 코드를 작성하면, 비율이 다른 사진들이 scaledToFill 해도 화면을 넘어가는것을 확인 할 수 있습니다. 그럴때는 아래와 같이 수정해주면 화면에 맞게 사진이 채워집니다.

struct ContentView: View {
    
    let dishes = Dish.all()
    
    var body: some View {
                        //into의 숫자만큼 grid개수가 정해짐
        let chunkedDishes = dishes.chunked(into: 2)
        
        return List {
            
            ForEach(0..<chunkedDishes.count) { index in
                
                HStack(alignment: .center) {
                    ForEach(chunkedDishes[index]) { dish in
                        Image(dish.imageURL)
                            .resizable()
                            .aspectRatio(1.0, contentMode: .fill)
                            .clipShape(Circle())
                    }
                }
            }
        }
        
    }
}

왼:  .aspectRatio(1.0, contentMode: .fill)    /    오:  .aspectRatio(contentMode: .fill)

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_Creating-Grid-using-List

이 글도 읽어보세요

[SwiftUI 기초/View layout] - SwiftUI : List (ListStyle / onDelete / onMove)

[SwiftUI 기초/View layout] - SwiftUI : List를 이용해서 Grid형식 만들기