Ускорьте просмотр прогресса с помощью представления 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())
      })

Представление датчика принимает в качестве параметра значение, то есть значение, отображаемое в представлении. Вместо этого границы представляют собой диапазон с минимальным и максимальным возможными значениями (по умолчанию от 0 до 1). Кроме того, вы можете реализовать эти необязательные представления:

  • ярлык: представление, используемое для описания назначения индикатора. Рисуется в верхней части шкалы.
  • currentValueLabel: представление, используемое для отображения текущего значения. Рисуется в нижней части шкалы.
  • minimumValueLabel: представление, используемое для отображения минимального значения. Рисуется слева от датчика.
  • maximumValueLabel: представление, используемое для отображения максимального значения. Рисуется справа от датчика.

Стиль

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

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

Возможные значения стилей:

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

. accessoryLinearCapacity: это компактная версия linearCapacity. Заголовок и текущее значение располагаются по направлению к переднему краю.

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

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

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

Это предустановленные стили для нового представления датчика. Отмечает, что все эти стили можно анимировать; кроме того, вы можете раскрасить вид с помощью модификатора tint. В этих примерах я использовал представление LinearGradient для раскрашивания представлений.

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

В этом особенность нового представления Gauge: вы можете создать собственный 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))
    }
  }
}

Пользовательский стиль соответствует GaugeStyle. Таким образом, метод makeBody должен быть реализован, возвращая View; Метод makeBody принимает объект Configuration, который является псевдонимом типа GaugeStyleConfiguration, структуры со всеми свойствами представления датчика. Так, например, если мы настроим представление датчика с представлением currentValueLabel, мы можем использовать его, вызвав

configuration.currentValueLabel

В примере инициализация с содержимым @ViewBuilder была добавлена ​​и использована внутри представления GaugeStyle. Представление Круг обрезается, чтобы получить дизайн, аналогичный дизайну полукруга в стиле accessoryCircular.

Единственное, что нужно сделать сейчас, это установить пользовательский стиль с правильным модификатором, таким образом:

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

Вот и все!

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

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