SwiftUI 게이지 보기

게이지 보기로 진행률 보기 속도 향상

게이지 는 개발자가 범위 내의 값을 표시할 수 있도록 Apple에서 도입한 새로운 SwiftUI 보기입니다. 반원형 Apple 위젯을 생각하고 있다면 맞습니다! 이제 위젯 또는 WatchOS 컴플리케이션의 반원형 보기를 게이지 보기 로 재현할 수 있습니다 . 어떻게 작동하는지 봅시다.

A게이지뷰 실제 사례

마스터-디테일 앱을 개발했다고 상상해 보십시오. 통계 시리즈가 있는 개체 목록이 있고 상세 보기에서 진행률 보기, 아마도 원형 또는 선형(예, 아직 포켓몬 앱입니다)으로 통계를 표시하려고 합니다. 퍼센트 숫자는 없지만 최소값(음수 값 또는 다른 0 값일 수 있음)과 최대값이 있는 범위 내의 값이 있습니다. 이것이 진행률 보기 와 게이지 보기 의 주요 차이점입니다 . 따라서 백분율 값을 관리하려면 진행률 보기 를 사용할 수 있고, 범위 내에 값이 있거나 특정 방식으로 값을 표시하려는 경우 게이지 보기 를 사용할 수 있습니다 . 게이지 보기사전 설정 스타일, 사용자 지정 스타일, 다양한 레이블 및 색상으로 사용자 지정할 수 있습니다.

실제 게이지 보기

작동 중인 게이지 보기를 살펴보겠습니다.

Gauge(value: progress, in: mininumGaugeValue...maximumGaugeValue, label: {
        Text("Title")
      }, currentValueLabel: {
        Text("Current value: \(progress.formatted())")
      }, minimumValueLabel: {
        Text(mininumGaugeValue.formatted())
      }, maximumValueLabel: {
        Text(maximumGaugeValue.formatted())
      })

• label : 게이지의 목적을 설명하는 데 사용되는 보기입니다. 게이지 상단에 그려집니다.
• currentValueLabel : 현재 값을 표시하는 데 사용되는 보기입니다. 게이지 하단에 그려져 있습니다.
• minimumValueLabel : 최소값을 표시하는 데 사용되는 보기입니다. 게이지 왼쪽에 그려집니다.
• maximumValueLabel : 최대값을 표시하는 데 사용되는 보기입니다. 게이지 오른쪽에 그려집니다.

진행률 보기와 게이지 보기 의 차이점 중 하나는 스타일입니다. 게이지 보기 에는 다음 과 같은 방식으로 열거형을 전달하는 보기 스타일을 변경 하는 한정자 gaugeStyle(_ style: S) 가 있습니다.

Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {}
        .gaugeStyle(.linearCapacity)

• linearCapacity : 기본 스타일입니다. Progress View 와 똑같이 왼쪽에서 오른쪽으로 채워지는 간단한 막대입니다 . 현재 값은 아래쪽, 최소값은 왼쪽, 최대값은 오른쪽, 제목은 위쪽에 있습니다.

• accessoryLinear : 초소형 버전입니다. 이 스타일에서는 제목 레이블과 현재 값이 표시되지 않습니다. 현재 값은 마커로 표시됩니다.

• accessoryCircular : 소형 원형 버전입니다. iOS 잠금 화면의 날씨 위젯이나 WatchOS 컴플리케이션에 사용되는 뷰이기 때문에 iOS 사용자라면 잘 알고 있는 뷰입니다. 이 보기에는 두 가지 변형이 있습니다. 최소 및 최대 보기가 있는 경우 오프닝 링의 왼쪽과 오른쪽에 표시됩니다. 그렇지 않으면 제목 보기가 표시됩니다.


• accessoryCircularCapacity : 이것은 게이지 보기 의 링 버전입니다 . 이 버전에서는 현재 값만 표시됩니다.

사용자 정의 GaugeViewStyle

이것이 새로운 게이지 보기 의 하이라이트입니다 . 사용자 정의 GaugeStyle 을 작성 하여 보기에 적용할 수 있습니다. 아래 예에서 게이지 스타일이 @ViewBuilder 콘텐츠 로 초기화 된 구현 예를 볼 수 있습니다. 코드를 보자:

/// The `GaugeStyle` of the `OverallView`.
struct OverallGaugeStyle<Content: View>: GaugeStyle {
  // MARK: - Properties
  
  /// The `View` contained by the gauge.
  var content: Content
  
  /// The `LinearGradient` used to style the gauge.
  private var gradient = LinearGradient(
    colors:
      [
        Color(uiColor: AppAsset.background.color.withAlphaComponent(0.5)),
        Color(uiColor: AppAsset.primary.color)
      ],
    startPoint: .trailing,
    endPoint: .leading
  )
  
  // MARK: - Init
  
  /// The `init` of the `OverallGaugeStyle`.
  /// - Parameter content: The `View` contained by the gauge.
  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }
  
  func makeBody(configuration: Configuration) -> some View {
    VStack {
      ZStack {
        content
        
        Circle()
          .trim(from: 0, to: configuration.value * 0.75)
          .stroke(gradient, style: StrokeStyle(lineWidth: 20, lineCap: .round))
          .rotationEffect(.degrees(135))
          .frame(width: 250, height: 250)
      }
      
      configuration.currentValueLabel
        .fontWeight(.bold)
        .font(.title2)
        .foregroundColor(Color(uiColor: AppAsset.background.color))
    }
  }
}

configuration.currentValueLabel

이제 할 일은 다음과 같이 올바른 수정자를 사용하여 사용자 지정 스타일을 설정하는 것뿐입니다.

Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {} currentValueLabel: {
      VStack {
        Text("\(model.title): \((model.value).formatted(.number))")
      }
    }
    .gaugeStyle(OverallGaugeStyle {
      ...
    })

다음 단계

이제 범위 내의 값을 표시해야 할 때 앱을 디자인할 수 있는 새로운 보기가 있습니다. iOS 의 게이지 보기 로 디자인하고 즐기세요 .