Exibição do Medidor SwiftUI

Acelere sua visualização de progresso com a visualização Gauge

Gauge é um novo SwiftUI View introduzido pela Apple para ajudar os desenvolvedores a mostrar um valor dentro de um intervalo. Se você está pensando em um widget semicircular da Apple, você está certo! A visão semicircular de seus widgets ou suas complicações do WatchOS agora podem ser reproduzidas com uma exibição de medidor . Vamos ver como funciona.

Um caso real do Gauge View

Imagine que você desenvolveu um aplicativo mestre-detalhe; você tem uma lista de objetos com uma série de estatísticas e, na visualização de detalhes, deseja mostrar as estatísticas com uma visualização de progresso, talvez circular ou linear (sim, ainda é um aplicativo Pokémon). Não temos um número percentual, mas um valor dentro de um intervalo, que possui um valor mínimo (pode ser também um valor negativo ou um valor zero diferente) e um valor máximo. Esta é a principal diferença entre uma Visualização de Progresso e uma Visualização de Medidor ; portanto, se quisermos gerenciar um valor percentual, podemos usar uma exibição de progresso , enquanto se tivermos um valor dentro de um intervalo ou se quisermos mostrar o valor de uma maneira específica, podemos usar uma exibição de medidor . A visualização do medidorpode ser personalizado com um estilo predefinido, um estilo personalizado e diferentes rótulos e cores.

Exibição do medidor em ação

Vamos ver o Gauge View em ação:

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

• label : A exibição usada para descrever a finalidade do medidor. É desenhado na parte superior do medidor.
• currentValueLabel : A exibição usada para mostrar o valor atual. É desenhado na parte inferior do medidor.
• MinimumValueLabel : A exibição usada para mostrar o valor mínimo. É desenhado à esquerda do medidor.
• maximumValueLabel : A exibição usada para mostrar o valor máximo. É desenhado à direita do medidor.

Uma das diferenças entre uma visualização de progresso e uma visualização de medidor é o estilo. A Gauge View tem um modificador, gaugeStyle(_ style: S) , que altera o estilo da view passando um enum desta forma:

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

• linearCapacity : Este é o estilo padrão. É uma barra simples que é preenchida da esquerda para a direita, exatamente como uma Visualização de Progresso . O valor atual está na parte inferior, o mínimo à esquerda, o máximo à direita e o título na parte superior.

• acessórioLinear : Esta é uma versão super compacta. Neste estilo, o rótulo do título e o valor atual não são mostrados. O valor atual é indicado com um marcador.

• acessórioCircular : Esta é a versão circular compacta. É uma visualização que os usuários do iOS conhecem bem porque é a visualização usada para o widget do tempo na tela de bloqueio do iOS ou nas complicações do WatchOS. Existem duas variantes dessa visão; se existirem vistas mínimas e máximas, estas serão mostradas nos lados esquerdo e direito do anel de abertura. Caso contrário, a visualização do título será exibida


• acessórioCircularCapacity : Esta é a versão em anel da Exibição de Medidor . Nesta versão, apenas o valor atual é mostrado

GaugeViewStyle personalizado

Este é o destaque da nova Exibição de medidor : você pode criar um GaugeStyle personalizado e aplicá-lo à sua exibição. No exemplo abaixo, podemos ver um exemplo de implementação onde nosso GaugeStyle é inicializado com o conteúdo @ViewBuilder . Vejamos o código:

/// 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

A única coisa a fazer agora é definir o estilo personalizado com o modificador correto, desta forma:

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

Próximos passos

Agora você tem uma nova View para projetar seus aplicativos quando eles precisam mostrar um valor dentro de um intervalo. Projete e divirta-se com o Gauge View no iOS.