์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
Tags
- BFS
- BOJ
- ํ๋ก๊ทธ๋๋จธ์ค
- Xcode
- raywenderlich
- ํจ์คํธ์บ ํผ์ค
- swift
- SwiftUI
- TCA
- ios
- ๋ฐฑ์ค
- combine
- arkit
- RxSwift
- visionOS
- tableView
- reactorkit
- SnapKit
- designpattern
- XCTest
- Lv2
- Kuring
- MVVM
- Swfit
- UIKit
- Flutter
- node.js
- realm
- CollectionView
- rxcocoa
Archives
- Today
- Total
lgvv98
[SwiftUI] lazyVGrid ๋ณธ๋ฌธ
lazyVGrid
โ swiftUI ์์ง๋ ๋ค๋ฃจ๋๊ฒ ์ด๋ ค์ด ๊ฒ ๊ฐ๋ค.
UIKit์ด์๋ค๋ฉด ๋ฑ ๋์ด์ผ ํ๋๊ฑด๋ฐ, ์ ์๋์ง ํ๋๊ฑธ ๋ณด๋๊น ์๋ จ๋๊ฐ ๋ฎ์ ๊ฒ ๊ฐ์์ ๊ฐ์๊ธฐ ์ฌํ๋ค ใ ใ
๋ ๋๋์ ์ธ๋ฐ ์ค์ ๊ฐ ๋๋ฑ๋๋ฑ ์ฒ์์ ํ 80ํ๋ก๊น์ง๋ ๋นจ๋ฆฌ ๋ง๋๋๋ฐ ๊ฒฐ๊ตญ์ UIKit ๋ถ๋ถ์ ์ฌ์ฉํด์ผ ํ๋ ์์ ์์๋ ์์ด ๋ง์ด๊ฐ๊ธฐ ์์ํด์, ํ ,,
โ ์ฝ๋
import Foundation
import SwiftUI
enum LayoutType: CaseIterable {
case table, grid, multiple
}
extension LayoutType {
// ๋ ์ด์์ ํ์
์ ๋ํ ์ปฌ๋ผ์ด ์๋์ผ๋ก ์ค์ ๋๋๋ก ํ๋ค
var columns : [GridItem] {
switch self {
case .table:
return [
// flexible ํ๋๋ก ํ์ค๋ก ํํ
GridItem(.flexible())
]
case .grid:
return [
// flexible ๋๊ฐ๋ฅผ ๋ฃ์ด์ ๋๊ฐ ์์ดํ
๋ค์ด๊ฐ๊ฒ ํจ
GridItem(.flexible()),
GridItem(.flexible())
]
case .multiple:
return [
// ์ด๋ตํฐ๋ธ๋ฅผ ํตํด ํฌ๊ธฐ ๋ฟ๋๋ฐ ๊น์ง ์์ดํ
์ฌ๋ฌ๊ฐ ๋ฃ๊ธฐ
GridItem(.adaptive(minimum: 100))
]
}
}
}
struct SegmentLayoutView: View {
var dummyDatas = MyModel.dummyDataArray
@State var selectedLayoutType: LayoutType = .table
var body: some View{
VStack{
// ํผ์ปค
Picker(selection: $selectedLayoutType, label: Text("๋ ์ด์์ ํ์
"), content: /*@START_MENU_TOKEN@*/{
ForEach(LayoutType.allCases, id: \.self , content: { layoutType in
switch layoutType {
case .table:
Image(systemName: "list.dash")
case .grid:
Image(systemName: "square.grid.2x2.fill")
case .multiple:
Image(systemName: "circle.grid.3x3.fill")
}
})
}/*@END_MENU_TOKEN@*/)
.frame(width: 250)
.pickerStyle(SegmentedPickerStyle())
// ๋ด์ฉ๋ฌผ
ScrollView{
LazyVGrid(columns: selectedLayoutType.columns, content: /*@START_MENU_TOKEN@*/ {
// Contents์ชฝ์ switch๋ฌธ ๋ฌ์์ view์ ํ
ForEach(dummyDatas) { dataItem in
switch selectedLayoutType {
case .table:
Card(icon: "book.fill", title: "์ฑ
์ฝ๊ธฐ", start: "1 PM", end: "3 PM", bgColor: Color.green)
case .grid:
RoundedRectangle(cornerRadius: 25.0)
.foregroundColor(Color.init(#colorLiteral(red: 1, green: 0.5758225922, blue: 0.3784928128, alpha: 1)))
.frame(height: 200)
.overlay(
VStack(spacing: 2){
Circle().frame(height: 100)
.foregroundColor(.yellow)
Spacer().frame(height: 10)
Text("\(dataItem.title)")
.font(.system(size: 20))
.fontWeight(.bold)
Text("\(dataItem.content)")
}
)
case .multiple:
Rectangle()
.foregroundColor(.blue)
.frame(height: 100)
}
}
}/*@END_MENU_TOKEN@*/)
.animation(.easeInOut) // ํจ๊ณผ ๋ฌ์์ฃผ๊ธฐ
.padding(.horizontal, 10)
}
}
}
}
โ ๋ด๊ฐ ์ง์ ๊ตฌํํด๋ณด์
import SwiftUI
enum LayoutType: CaseIterable {
case table, grid, multiple
var columns: [GridItem] {
switch self {
case .table:
return [GridItem(.flexible())]
case .grid:
return [
GridItem(.flexible()),
GridItem(.flexible())
]
case .multiple:
return [GridItem(.adaptive(minimum: 100))]
}
}
}
struct HomeView: View {
@State var selectedLayoutType: LayoutType = .table
var body: some View {
VStack(spacing: 0) {
Picker("", selection: $selectedLayoutType) { // picker๋ฅผ ์ค์์น๋ฌธ์ผ๋ก ๊ด๋ฆฌ
ForEach(LayoutType.allCases, id: \.self) {
switch $0 {
case .table: Image(systemName: "list.dash")
case .grid: Image(systemName: "square.grid.2x2.fill")
case .multiple: Image(systemName: "circle.grid.3x3.fill")
}
}
}
.pickerStyle(.segmented)
.padding()
Spacer()
ScrollView {
LazyVGrid(
columns: selectedLayoutType.columns,
spacing: 5
) {
ForEach((0...30), id: \.self) { index in
switch selectedLayoutType { // ์ค์์น๋ฌธ!
case .table:
RoundedRectangle(cornerRadius: 25.0)
.frame(height: 100)
.foregroundColor(.blue)
.padding([.leading, .trailing], 10)
case .grid:
RoundedRectangle(cornerRadius: 25.0)
.frame(height: 200)
.foregroundColor(.blue)
.overlay(
VStack(spacing: 2){
Circle()
.frame(height: 100)
.foregroundColor(.yellow)
Spacer().frame(height: 10)
Text("\(index)")
.font(.system(size: 20))
.fontWeight(.bold)
Text("\(index)")
}
)
case .multiple:
Rectangle()
.foregroundColor(.blue)
.frame(height: 100)
}
}
}
.animation(.easeInOut)
.padding(.horizontal, 10)
}
Spacer()
}
}
}
struct HalfSheet_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}
extension Color {
static func random() -> Color {
let random = Double(CGFloat(arc4random()) / CGFloat(UInt32.max))
return Color(
red: random,
green: random,
blue: random
)
}
}
'apple > ๐ SwiftUI & Combine' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[iOS] ํ๋ฉด ์คํฌ๋ฆฐ์ท ๋ฐ ๋ นํ ๊ฐ์ง (feat. SwiftUI) (0) | 2022.06.02 |
---|---|
[SwiftUI] ViewModifier (0) | 2022.06.02 |
[SwiftUI] menu (feat. Picker) (0) | 2022.05.25 |
[SwiftUI] Picker, segmentedStyle (feat. enum CaseIterable) (0) | 2022.05.23 |
[SwiftUI] Toast, popup (0) | 2022.05.23 |
Comments