[SwiftUI] 애플에서 제공하는 LazyVGrid 구현 예제

SwiftUI는 애플에서 샘플까지 제공해주고 있어서, 구현하는데 많은 도움이 되곤 합니다.

최근에 GridView를 통한 UI 구현할일이 있어 가이드 문서 살펴보니, 역시나 애플에서 친절하게 방법을 제공해 주고 있었습니다.

예제에서 소개한 방법은 이모지를 유니코드와 이모지 아이콘을 표시하는 방법을 LazyVGrid를 통해 설명한 문서입니다.

https://developer.apple.com/documentation/swiftui/lazyvgrid

LazyVGrid | Apple Developer Documentation

가장 살펴봐야할 곳은 바로 여기인데

LazyVGrid에 들어갈 column 개수를 아래와 같이 지정할 수 있습니다.

 let columns = [GridItem(.flexible()), GridItem(.flexible())]

만약,

column 개수를 가변으로 지정하고 싶으면 아래와 같이 @State를 두어 사용가능합니다.

(가로모드 및 특정 개수에 따라 column 개수를 다르게 지정하는 것도 가능하겠네요 👍)

@State private var columns = Array(repeating: GridItem(.flexible()), count: 2)

LazyVGrid안에는 ForEach문을 통해 그리고자 하는 대상을 지정하면 위에서 지정한 colums에 맞게 표시해줍니다.

ForEach(0x1f600...0x1f679, id: \.self) { value in
	Text(String(format: "%x", value))
	Text(emoji(value))
		.font(.largeTitle)
}

 

이를 통한 전체 예제입니다.

struct VerticalSmileys: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible())]

    var body: some View {
         ScrollView {
             LazyVGrid(columns: columns) {
                 ForEach(0x1f600...0x1f679, id: \.self) { value in
                     Text(String(format: "%x", value))
                     Text(emoji(value))
                         .font(.largeTitle)
                 }
             }
         }
    }
    
    private func emoji(_ value: Int) -> String {
        guard let scalar = UnicodeScalar(value) else { return "?" }
        return String(Character(scalar))
    }
}

 

문서를 찾다보니 ImageGallery 구현관련 예제를 발견했습니다.

아마 LazyVGrid에 가장 알맞는 예제이지 않나 싶어요ㅎㅎ

 

아래는 전체 예제입니다.

https://developer.apple.com/tutorials/sample-apps/imagegallery

Image Gallery | Apple Developer Documentation