[SwiftUI] @ToolbarContentBuilder로 가독성 개선

🧑‍💻 코드

import SwiftUI

public struct SampleView: View {
  @State var title: String = "Hi, guys"
  @Environment(\\.presentationMode) var presentationMode: Binding
  
  public var body: some View {
    VStack {
      Text(title)
        .font(.system(size: 26, weight: .bold))
        .foregroundColor(.black)
        .padding()
      
      NavigationLink {
        BaseWebView(url: "<https://www.google.com>")
      } label: {
        Text("구글 웹사이트")
          .padding()
      }
      
      Spacer()
    }
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarBackButtonHidden()
    .toolbar {
      toolbarContent()
    }
  }
  
  @ToolbarContentBuilder
  private func toolbarContent() -> some ToolbarContent {
    ToolbarItem(placement: .principal) {
      Text("Download")
    }
    
    ToolbarItem(placement: .navigationBarLeading) {
      backButton
    }
    
    ToolbarItem(placement: .navigationBarTrailing) {
      actionButtons
    }
  }
  
  private var backButton: some View {
    Image(systemName: "chevron.backward")
      .padding(.horizontal, 8)
      .onTapGesture {
        self.presentationMode.wrappedValue.dismiss()
      }
  }
  
  private var actionButtons: some View {
    HStack(spacing: 0) {
      Image(systemName: "dot.radiowaves.left.and.right")
        .padding(.horizontal, 8)
        .onTapGesture {
          title = "라디오 버튼 선택함"
        }
      Image(systemName: "heart.fill")
        .padding(.horizontal, 8)
        .onTapGesture {
          title = "하트 버튼 선택함"
        }
    }
  }
  
}

 

@ToolbarContentBuilder

https://developer.apple.com/documentation/swiftui/toolbarcontentbuilder

ToolbarContentBuilder | Apple Developer Documentation

some ToolbarContent를 return하는 메서드를 만들어서 View의 body 아래 부분의 가독성을 개선해줄 수 있음

 

추가 설명

@ToolbarContentBuilder는 SwiftUI에서 툴바 컨텐츠를 구성할 때 사용하는 특별한 빌더입니다. SwiftUI는 다양한 뷰를 조합하여 사용자 인터페이스를 구축하는 선언적 프레임워크이며, @ToolbarContentBuilder는 이러한 패러다임을 툴바 컨텐츠의 구성에 적용합니다. @ToolbarContentBuilder를 사용하면 복잡한 툴바를 보다 구조적이고 선언적인 방식으로 정의할 수 있습니다.

 

Usage

@ToolbarContentBuilder는 함수나 계산된 변수 앞에 붙는 속성(어트리뷰트)입니다. 이를 사용하면 여러 툴바 아이템을 그룹화하여 한 번에 반환할 수 있습니다. SwiftUI는 이 어트리뷰트가 붙은 함수나 변수 내부에서 생성된 모든 툴바 아이템을 자동으로 인식하고, 이를 툴바로 구성합니다.

 

.toolbar {
    toolbarContent()
}

 

 

- 툴바 아이템(ToolbarItem): 툴바에 표시될 개별 요소를 정의합니다. 각 ToolbarItem은 placement 매개변수를 통해 툴바 내의 위치를 지정할 수 있습니다.

 

- 배치(Placement): 툴바 아이템이 툴바 내에서 어디에 배치될지 결정합니다. 예를 들어, .navigationBarLeading, .navigationBarTrailing, .principal 등이 있습니다.

 

- ToolbarContentBuilder: 이 어트리뷰트는 컴파일러에게 여러 툴바 아이템을 조합하여 하나의 툴바 컨텐츠로 구성하도록 지시합니다. 이는 복잡한 툴바 구성도 간결하고 선언적인 코드로 표현할 수 있게 해줍니다.

 

@ToolbarContentBuilder를 사용함으로써, SwiftUI 앱의 툴바를 효율적으로 관리하고, 다양한 툴바 아이템을 유연하게 조합하여 사용자에게 필요한 인터페이스를 제공할 수 있습니다.