SwiftUI

SwiftUI Toggle, Label, Grid

Daesiker 2021. 2. 22. 16:44
반응형

Toggle

on/off 버튼을 만드는 컴포넌트이다.

 

Example

import SwiftUI

struct ContentView: View {
    @State private var status = true
    var body: some View {
        Toggle(isOn: $status, label: {
            Text("toggle")
        })

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기본적으로 bool 값을 받는 isOn 파라미터와 제목을 Text 컴포넌트로 받는 label 파라미터가 있다.

 

 

Example2

Toggle 스타일을 통해 toggle 버튼을 커스텀할 수 있다.

import SwiftUI

struct CheckBoxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        return HStack {
            configuration.label
            Spacer()
            Image(systemName: configuration.isOn ? "checkmark.square" : "square")
                .resizable()
                .frame(width: 22, height: 22)
                .onTapGesture {
                    configuration.isOn.toggle()
                }
        }
    }
}

struct ContentView: View {
    @State private var status = true
    var body: some View {
        VStack(alignment: .leading) {
            Text("Setting")
                .font(.title)
            Divider()
            Toggle(isOn: $status, label: {
                Text("Sleeping")
            }).toggleStyle(CheckBoxToggleStyle())
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

togglestyle 프로토콜을 통해 토글 버튼의 스타일을 임의로 지정을 할 수 있다. makeBody라는 필수 메서드가 있고 여기에서 return 되는 컴포넌트가 Toggle에 표시가 된다. makeBody안에 파라미터는 토글버튼이며 파라미터를 통해 토글 요소에 접근이 가능하다. configuration.isOn은 Toggle.isOn이고 configuration.label 은 Toggle.label이라고 생각하면 쉽게 만들 수 있다.

 

Label

레이블을 표현하는 컴포넌트이다. UIKit 라이브러리에 있는 UILabel과 같은 기능을 제공한다.

 

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Swift UI", systemImage: "heart.fill")
            Label("Cookie", image: "cookie")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

첫번째 파라미터에는 표현하고자 하는 문자열을 삽입하면 되고 2번째 파라미터는 이미지를 넣는 부분인데, xcode 안에 기본으로 제공하는 이미지를 사용할려면 systemImage 파라미터를 사용하여 이미지의 제목을 문자열로 삽입하면 되고 Assets 안에 있는 이미지 파일을 넣고 싶을 때는 image 파라미터를 사용하여 표현할 수 있다.

 

 

 

Grid

Grid는 그리드 기반의 레이아웃을 구축하는데 사용하는 컴포넌트로 기존 UIKit에 있는 UICollectionView의 대체안으로 만든 컴포넌트이다. 축에 따라서 LazyVGrid와 LazyHGrid로 나뉘어져 있는데 LazyVGrid는 자식을 세로방향으로 정렬하고 LazyHgrid는 자식을 가로방향으로 정렬한다.

 

Example

import SwiftUI

struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random()
                    }
                }
                Section(header: Text("section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random()
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension Color {
    static func random() -> Color {
        return Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1), opacity: 1.0)
    }
}

Color 프로토콜에 색상이 랜덤으로 출력할 수 있도록 도와주는 random()함수를 추가한 뒤 각 자식요소의 색깔이 랜덤으로 출력되는 Grid 컴포넌트이다.

 

 

GridItem

그리드의 모든 열은 GridItem 구조체를 사용하여 정의하여야 한다. 현재 코드의 GridItem 구조체 배열에는 총 3가지의 GridItem이 들어있어서 3열씩 채워지는 것을 알 수 있다.

 

—Parameter

—size(Size) : 아이템의 사이즈를 정하는 속성이다. 필수 파라미터이며 예제 코드에는 100으로 고정시킨것을 알 수 있다.

 

— Size(enum)

adaptive(minimum: CGFloat, maximum: CGFloat) : 최소크기와 최대 크기를 정해서 화면에 따라 사이즈가 바뀌되 해당 크기를 벗어날 수 없게 지정한다. 여러 열 공간의 항목을 배치할 때 사용한다.

fixed(CGFloat) : 고정된 사이즈로만 존재한다.

flexible(minimum: CGFloat, maximum: CGFloat) : 최소크기와 최대 크기를 정해서 화면에 따라 사이즈가 바뀌되 해당 크기를 벗어날 수 없게 지정한다. 단일 열 공간의 항목을 배치할 때 사용한다.

 

 

 

—alignment(Alignment) : 정렬 옵션을 지정한다.

 

—spacing(CGFloat) : 항목간 간격을 지정한다.

 

LazyVGrid

GridItem을 통해 만든 자식들을 표현해주는 컴포넌트이다.

 

—Parameter

— columns([GridItem]) : 열을 정의하는 파라미터이다. GridItem 배열을 선언한다.

— alignment(Alignment) : 정렬 옵션을 지정한다.

— spacing(CGFloat) : 내부 열 사이의 간격을 지정한다.

— pinnedView(PinnedScrollableViews) : 머리글과 바닥글에 대한 고정 옵션을 지정한다. 기본 옵션은 비어있고 .sectionHeaders가 머리글에 대한 옵션이고 .sectionFooters가 바닥글에 대한 옵션이다.

— contents Grid안에 있는 내용을 집어넣는 공간으로 Grid안에 넣고 싶은 컴포넌트를 입력하면 된다.

 

 

Uploaded by Notion2Tistory v1.1.0

반응형