SwiftUI GroupBox, Menu

GroupBox

GroupBox 컴포넌트는 일반 Text나 Label 요소를 그룹화하여 스타일링 해주는 컴포넌트이다.

 

Example

간단한 GroupBox 사용방법이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        GroupBox(
            label: Label("swiftUI", systemImage: "heart.fill")
                .foregroundColor(.red)
        ) {
            Text("Welcome to swiftUI world")
        }.padding()
        
    }
}

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

GroupBox에는 크게 2가지 파라미터로 구성되어있다. 제목을 나타내는 파라미터 label과 박스안에 내용을 담는 content이다. label 파라미터안에는 Label 컴포넌트만 사용할 수 있고 content안에는 자유롭게 작성이 가능하다.

 

 

Example2

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [.init(), .init()]) {
                ForEach(0..<10) { _ in
                    GroupBox(
                        label: Label("swiftUI", systemImage: "heart.fill")
                            .foregroundColor(.red)
                    ) {
                        Text("Welcome to swiftUI world")
                    }
                }
            }.padding()
        }
    }
}

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

LazyVGrid 컴포넌트를 이용해서 10개의 GroupBox를 나열한 모습이다. LazyVGrid의 columns 파라미터에 2개의 init()이 있어서 2줄로 나뉘어서 표현되는걸 알 수 있다.

 

 

GroupBoxStyle

GroupBox에 스타일을 적용시켜주는 Protocol이다 이 프로토콜을 이용하여 GroupBox를 꾸밀 수 있는 함수를 만들 수 있다.

 

Example

import SwiftUI

struct PlainGroupBoxStyle: GroupBoxStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(alignment: .leading) {
            configuration.label
            configuration.content
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [.init(), .init()]) {
                ForEach(0..<10) { _ in
                    GroupBox(
                        label: Label("swiftUI", systemImage: "heart.fill")
                            .foregroundColor(.red)
                    ) {
                        Text("Welcome to swiftUI world")
                    }.groupBoxStyle(PlainGroupBoxStyle())
                }
            }.padding()
        }
    }
}

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

VStack으로 label과 content를 쌓는 스타일을 적용시키는 PlainGroupBoxStyle이다. makeBody는 필수 메서드로 configure 파라미터를 통해 GroupBox에 접근이 가능하다.

이 스타일을 적용하면 그냥 일반 VStack처럼 GroupBox를 표시한다.

 

---

Menu

메뉴를 표현해주는 컴포넌트로 보조작업이 필요한 View나 선택 옵션이 필요한 경우에 제공하는 방법이다.

 

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu("Actions") {
            Button("Duplicate", action: {})
            Button("Rename", action: {})
            Button("Delete", action: {})
            Menu("Copy") {
                Button("Copy", action: {})
                Button("Copy Formatted", action: {})
                Button("Copy Library Path", action: {})
            }
        }
    }
}

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

간단한 메뉴를 보여주는 버튼 컴포넌트를 생성하였다. Menu 컴포넌트에 첫 파라미터는 Menu의 타이틀을 표현하고 중괄호 안에는 Menu안에 보여주는 화면을 작성한다. 해당 예제처럼 메뉴안에 메뉴를 넣을 수 있다.

 

 

Example2

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu {
            Section {
                Button(action: {}) {
                    Label("Create a file", systemImage: "doc")
                }
                Button(action: {}) {
                    Label("Create a folder", systemImage: "folder")
                }
            }
            Section(header: Text("Secondary actions")) {
                Button(action: {}) {
                    Label("Remove old files", systemImage: "trash")
                        .foregroundColor(.red)
                }
            }
        }
        label: {
            Label("Add", systemImage: "plus")
        }
    }
}

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

Menu 안에서도 Section별로 분류가 가능하다 Section을 통해 버튼을 나누면 Menu안에 여백이 생겨서 구분하기 편하게 만들어 준다.

 

 

Menu Styling

Menu도 MenuStyle 프로토콜을 통해 커스텀할 수 있다. 기본적인 옵션은 3가지가 존재하고 다른 스타일링을 하고 싶을 때는 MenuStyle 프로토콜을 채택하는 구조체를 만들어 주면 된다.

 

기본 MenuStyling 종류

— DefaultMenuStyle : 메뉴의 컨텍스트를 기반으로하는 기본 메뉴 스타일이다. MenuStyle을 지정하지 않으면 이 속성으로 지정된다.

— BorderedButtonMenuStyle : 눌렀을 때 토글하는 테두리가 있는 버튼을 표시하는 스타일이다.

— BorderlessButtonMenuStyle : 눌렀을 때 토글하는 테두리가 없는 버튼을 표시하는 스타일이다.

 

import SwiftUI

struct RedMenu: MenuStyle {
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration)
            .foregroundColor(.red)
            .border(Color.red)
    }
}

struct ContentView: View {
    var body: some View {
        Menu {
            Section {
                Button(action: {}) {
                    Label("Create a file", systemImage: "doc")
                }
                Button(action: {}) {
                    Label("Create a folder", systemImage: "folder")
                }
            }
            Section(header: Text("Secondary actions")) {
                Button(action: {}) {
                    Label("Remove old files", systemImage: "trash")
                }
            }
        }
        label: {
            Label("Add", systemImage: "plus")
        }
        .menuStyle(RedMenu())
    }
}

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

MenuStyle을 통해 글씨 색깔과 테두리를 빨간색으로 변경한 RedMenu를 만들었다.

 

 

Uploaded by Notion2Tistory v1.1.0