[SwiftUI] DisclosureGroup & OutlineGroup

생성일

2024/08/25 23:40

태그

틈틈히 자기개발

SwiftUI

[SwiftUI] DisclosureGroup & OutlineGroup

SwiftUI의 List 에 속해있는 타입인 DisclosureGroup & OutlineGroup

단순하게 생각해서 접고 펼 수 있는 파일인 트리 구조의 형태를 가지게 할 수 있는 뷰

•

이 두 가지는 iOS 14 이상에서만 제공을 하고 있다.

DisclosureGroup

•

제어의 상태에 따라 하위 컨텐츠를 표시하거나 숨길 수 있는 뷰이다.

struct DisclosureGroup<Label, Content> where Label: View, Content: View
Swift
복사

제네릭하게 Label을 받고 하위 담길 Content를 받아 구성하는 형식

즉, 해당 뷰는 내용을 식별할 수 있는 Label과 표시 및 숨김 처리할 수 있는 하위 뷰로 컨트롤 한다.

DisclosureGroup 구현

import SwiftUI

struct DisclosureGroupView: View {
		@State private var expanded: Bool = false
		
		var body: some View {
				DisclosureGroup("1번 그룹", isExpanded: $expanded) {
						Text("1번 그룹에 속한 텍스트")
						DisclosureGroup("2번 그룹") {
								Text("2번 그룹에 속한 텍스트")
						}
				}
		}
}
Swift
복사

위에서 펼치고 숨기는 상태를 제어하는 expanded 변수를 생성

그리고 1번, 즉, 최상위에서 DisclosureGroup을 만들고 이 변수를 통해 넣어주면 재부 구현을 통해 이 값을 사용자의 액션에 따라 바꿔준다.

즉, isExpanded 파라미터는 Binding<Bool> 타입인 것.

public init(_ titleKey: LocalizedStringKey, isExpanded: Binding<Bool>, @ViewBuilder content: @escaping () -> Content)
Swift
복사

그리고 하위에 Content로 원하는 텍스트를 넣거나 또 이어서 DisclosureGroup을 만들어 넣을 수도 있다.

여기서 중요한건 두 DisclosureGroup은 상하위 개념으로 속하고 있지만 펼침/숨김에 대해서는 따로 가져가거나 같이 가졀갈 수도 있다.

따로 가져가려면 아래와 같이 별도 변수로 컨트롤 해주면 된다.

import SwiftUI

struct DisclosureGroupView: View {
		@State private var firstExpanded: Bool = false
		@State private var secondExpanded: Bool = true
		
		var body: some View {
				DisclosureGroup("1번 그룹", isExpanded: $firstExpanded) {
						Text("1번 그룹에 속한 텍스트")
						DisclosureGroup("2번 그룹", isExpanded: $secondExpanded) {
								Text("2번 그룹에 속한 텍스트")
						}
				}
		}
}
Swift
복사

→ 이렇게 커스텀한 DisclosureGroup을 만들어 파일 구조처럼 뷰를 만들 수 있다.

OutlineGroup

Disclosure Views를 사용하여 데이터 계층 구조를 나타낼 수 있는 View가 필요할 때 OutlineGroup을 사용하면 된다.

정의에서 말한 데이터 계층 구조 (폴더 계층 구조)

애플 예제)

struct FileItem: Hashable, Identifiable {
		var id: Self { self }
		var name: String
		var children: [FileItem]? = nil
		
		var fileName: String {
				switch self.children {
				case nil:
						return "📄 \(self.name)"
				case .some(let children):
						return children.isEmpty ? "📂 \(self.name)" : "📁 \(self.name)"
				}
		}
}

let data = FileItem(name: "users", children:
										[FileItem(name: "Zedd", children:
																[FileItem(name: "Photos", children:
																						[FileItem(name: "photo001.jpg"),
																						 FileItem(name: "photo002.jpg")]),
																 FileItem(name: "Movies", children:
																						[FileItem(name: "movie001.mp4")]),
																 FileItem(name: "Documents", children: [])
																]),
										 FileItem(name: "Alan Walker", children:
																[FileItem(name: "Documents", children: [])
																])
										 ])
Swift
복사

이렇게 FileItem 타입이 있다.

파일이 자식으로 또 파일을 가질 수 있으므로 children의 타입은 [FileItem]이고,

가질 수도 있고, 안가질 수도 있기 때문에 최종 타입은 [FileItem]? 이 된다.

그리고 fileName은 만약 children이 없으면 파일 이름을 보여주고,

있다면 폴더 아이콘과 함께 폴더 이름을 보여준다.

OutlineGroup(root: Identifiable, children: KeyPath<Identifiable, _?>, content: (Identifiable) -> _)
Swift
복사

OutlineGroup은 이렇게 root와 children을 받는다.

struct ContentView: View {
		let data =
					FileItem(...)
					
		var body: some View {
				NavigationView {
						Form {
								OutlineGroup(self.data, children: \.children) { item in
										Text("\(item.fileName)")
								}
						}.navigationTitle("파일")
				}
		}
}
Swift
복사

Reference

SwiftUI ) OutlineGroup / DisclosureGroup

안녕하세요 :) Zedd입니다. 오늘은!! OutlineGroup과 DisclosureGroup을 공부해보려고 합니다. 애플 문서에 있는 Hierarchical Views섹션에 있는 친구들이에요! OutlineGroup disclosure views를 사용하여 데이터 계층 구조를 나타낼 수 있는 View가 필요할 때 OutlineGroup을 사용하면 됩니다. 정의에서 말한 데이터 계층 구조...라고 하면 가장 쉽게 생각 할 수 있는게 이런 폴더 계층 구조일 것 같아요. 애플 예제를 살펴볼게요. 이렇게 FileItem타입이 있습니다. 파일이 자식으로 또 파일을 가질 수 있으므로 children의 타입은 [FileItem]이고, 가질수도 있고 안가질수도 있기때문에 최종 타입은 [FileItem]?이 됩니다...

https://zeddios.tistory.com/1179

SwiftUI - DisclosureGroup & OutlineGroup

안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI의 Lists에 속해있는 타입인 DisclosureGroup & OutlineGroup에 대해 학습해보겠습니다🙌 우선 이 둘이 대략적으로 어떤건지 간단히 설명해볼께요. 단순하게 생각해서 접고 펼 수 있는 파일인 트리 구조의 형태를 가지게 할 수 있는 뷰라고 보면 됩니다. 이정도로만 설명해서는 감이 안오실 수도 있겠지만 실제로 아래 구현된걸 보면 바로 빡 아~ 이런거 할거에요😄 아..! 참고로 이 두가지는 SwiftUI라고 다 사용할 수 있는것이 아니고 iOS 14 이상에서만 제공합니다🕺🏻 그럼 이건 코드가 더 쉽게 이해될 수 있으니 바로 본론으로 가볼께요! DisclosureGroup? 제어의 상태에 따라 하위 컨텐츠를 표시하거나 숨길 수 있는 뷰입..

https://green1229.tistory.com/285