List view로 Grid 만들기
New file을 만들어 이름은 'Dish
' 라고 정해주고, 아래 이미지를 Assets
에 넣어줍니다.
(출처: 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())
}
}
}
}
}
}
읽어주셔서 감사합니다🤟
본 게시글의 전체코드 GitHub 👇🏻
'PROJECT > Simple' 카테고리의 다른 글
SwiftUI Project6 : Use Views From Other Frameworks (0) | 2021.03.08 |
---|---|
SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기' (0) | 2021.03.06 |
SwiftUI Project4 : Lottie 애니메이션으로 카드만들기 (0) | 2021.02.10 |
SwiftUI Project2 : Slider (2) | 2021.02.05 |
SwiftUI Project1 : Extension으로 정보가져오기 (0) | 2021.02.02 |