티스토리 뷰

iOS 개발/SwiftUI

SwiftUI) Grid 사용 예제

iDrogba 2022. 1. 28. 16:56

- Grid : CollectionView 와 비슷, 바둑판 배열

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import SwiftUI
 
struct ContentView: View {
    
    var columns:[GridItem] {
        [GridItem(.fixed(100))]
    }
    
    var body: some View {
        ScrollView(.vertical){
        ScrollView(.horizontal){
            
            LazyHGrid(rows: columns, content: {
                Image(systemName: "music.mic")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
            })
            
            LazyVGrid(columns: columns, content:  {
                Image(systemName: "music.mic")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "music.mic").resizable()
                    .aspectRatio(contentMode: .fit)
            })
        }
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
 
 cs

- Grid와 ScrollView를 사용하는 예제

- 본 예제에서 ScrollView는 .horizontal, .vertical 이중으로 사용함.

- LazyHGrid, LazyVGrid를 동시에 사용함.

- 각각의 row와 columns의 [GridItem] 값으로 var columns를 따로 선언하여 할당해주었음.

- [GridItem]값으로는 .fixed, .flexible, .adaptive 가 존재함.

- .flexible 은 maximum을 지향하며 상황에 따라 최대한 크게 frame을 설정함.

- .adaptive 은 minimum을 지향하며 상황에 따라 최대한 작게 frame을 설정함.

 

결과물

 

저작자표시

'iOS 개발 > SwiftUI' 카테고리의 다른 글

SwiftUI) NavigationView 사용 예제  (0) 2022.01.29
SwiftUI) placeholder 사용 예제  (0) 2022.01.28
SwiftUI) WebView 사용하기 예제 - UIKit으로 만든 웹뷰 가져오기 예제  (0) 2022.01.28
SwiftUI) button alert 예제  (0) 2022.01.23
SwiftUI) ViewModifer 개념 예제  (0) 2022.01.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함