Просмотр индикатора SwiftUI

Ускорьте просмотр прогресса с помощью представления Gauge

Gauge — это новое представление SwiftUI, представленное Apple, чтобы помочь разработчикам отображать значение в диапазоне. Если вы думаете о полукруглом виджете Apple, вы правы! Полукруглый вид ваших виджетов или расширений WatchOS теперь можно воспроизвести с помощью Gauge View . Посмотрим, как работает.

A Gauge Посмотреть реальный случай

Представьте, что вы разработали приложение master-detail; у вас есть список объектов с серией статистики, и в подробном представлении вы хотите показать статистику с представлением прогресса, может быть круговым или линейным (да, это пока приложение Pokémon). У нас есть не процентное число, а значение в пределах диапазона, которое имеет минимальное (также может быть отрицательное значение или другое нулевое значение) и максимальное значение. Это основное различие между представлением прогресса и представлением шкалы ; поэтому, если мы хотим управлять процентным значением, мы можем использовать представление прогресса , а если у нас есть значение в пределах диапазона или если мы хотим показать значение определенным образом, мы можем использовать представление датчика . Калибровочное представлениеможно настроить с помощью предустановленного стиля, пользовательского стиля и различных меток и цветов.

Экран датчика в действии

Давайте посмотрим на экран Gauge View в действии:

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 : Представление, используемое для отображения минимального значения. Рисуется слева от датчика.
• maxValueLabel : Представление, используемое для отображения максимального значения. Рисуется справа от датчика.

Одним из различий между представлением прогресса и представлением шкалы является стиль. Gauge View имеет модификатор GaugeStyle (_ style: S) , который изменяет стиль представления, передавая перечисление следующим образом:

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

• linearCapacity : это стиль по умолчанию. Это простая полоса, которая заполняется слева направо, точно так же, как Progress View . Текущее значение находится внизу, минимум слева, максимум справа и заголовок вверху.

• аксессуарЛинейный : это суперкомпактная версия. В этом стиле метка заголовка и текущее значение не отображаются. Текущее значение указано маркером.

• аксессуарКруглый : Это компактная круглая версия. Это представление, которое пользователи iOS знают правильно, потому что оно используется для виджета погоды на экране блокировки iOS или в расширениях WatchOS. Есть два варианта этого представления; если существуют минимальный и максимальный виды, они будут показаны слева и справа от открывающегося кольца. В противном случае будет отображаться вид заголовка


• accessorCircularCapacity : это кольцевая версия Gauge View . В этой версии отображается только текущее значение

Пользовательский GaugeViewStyle

Это изюминка нового представления Gauge View : вы можете создать собственный GaugeStyle и применить его к своему представлению. В приведенном ниже примере мы видим пример реализации, в котором наш 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 {
      ...
    })

Следующие шаги

Теперь у вас есть новый вид для разработки ваших приложений, когда им нужно показать значение в пределах диапазона. Создавайте дизайн и получайте удовольствие с Gauge View на iOS.