構造体
Gauge
範囲内の値を表示するビュー。
宣言
struct Gauge<Label, CurrentValueLabel, BoundsLabel, MarkedValueLabels> where Label : View, CurrentValueLabel : View, BoundsLabel : View, MarkedValueLabels : View
概観
ゲージは、自動車の燃料計と非常によく似た、指定された有限の容量に関連する値の現在のレベルを示すビューです。ゲージの表示は構成可能です。ゲージの現在の値、ゲージが表示できる範囲、およびゲージ自体の目的を描写するラベルの任意の組み合わせを表示できます。
最も基本的な形式では、ゲージは 0 から 100 パーセントの範囲にマッピングされたゲージのパス (path) に沿って単一の値を表示します。以下の例では、ゲージのインジケータをゲージのパスに沿って 40 パーセントの位置に設定します。
struct SimpleGauge: View {
@State private var batteryLevel = 0.4
var body: some View {
Gauge(value: batteryLevel) {
Text("Battery Level")
}
}
}
ゲージの目的を説明し、現在の値と開始値と終了値を表示することで、ゲージをよりわかりやすくすることができます。この例は、範囲を受け入れ、ゲージの現在の値と最小値および最大値を描写する複数の末尾に続くクロージャを使用してラベルを追加するゲージバリアントを示しています。
struct LabeledGauge: View {
@State private var current = 67.0
@State private var minValue = 0.0
@State private var maxValue = 170.0
var body: some View {
Gauge(value: current, in: minValue...maxValue) {
Text("BPM")
} currentValueLabel: {
Text("\(Int(current))")
} minimumValueLabel: {
Text("\(Int(minValue))")
} maximumValueLabel: {
Text("\(Int(maxValue))")
}
}
}
上に示したように、ゲージのデフォルトのスタイルは、現在の値を示すインジケータと、ゲージの目的、現在値、最小値、および最大値を描写するオプションのラベルが付いた線形の連続バーです。
注意
Gauge の一部の視覚的提示では、API に必要なすべてのラベルが表示されません。ただし、入手可能システム (accessibility system) はラベルコンテンツを使用するため、入手可能システムのユーザのゲージを完全に描写するには、これらのラベルを使用する必要があります。
ゲージのスタイルを変更するには、gaugeStyle(_:) ビュー修飾子を使用して、特定のゲージスタイルのイニシャライザを指定します。たとえば、同じゲージを円形スタイルで表示するには、circular スタイルをビューに適用します。
struct LabeledGauge: View {
@State private var current = 67.0
@State private var minValue = 0.0
@State private var maxValue = 170.0
var body: some View {
Gauge(value: current, in: minValue...maxValue) {
Text("BPM")
} currentValueLabel: {
Text("\(Int(current))")
} minimumValueLabel: {
Text("\(Int(minValue))")
} maximumValueLabel: {
Text("\(Int(maxValue))")
}
.gaugeStyle(.circular)
}
}
ゲージの表示の要素のスタイルを設定するには、変更したい要素にビュー修飾子を適用します。以下の例では、現在の値、最小値、および最大値のラベルにカスタム色があります。
struct LabeledGauge: View {
@State private var current = 67.0
@State private var minValue = 50.0
@State private var maxValue = 170.0
var body: some View {
Gauge(value: current, in: minValue...maxValue) {
Image(systemName: "heart.fill")
.foregroundColor(.red)
} currentValueLabel: {
Text("\(Int(current))")
.foregroundColor(Color.green)
} minimumValueLabel: {
Text("\(Int(minValue))")
.foregroundColor(Color.green)
} maximumValueLabel: {
Text("\(Int(maxValue))")
.foregroundColor(Color.red)
}
.gaugeStyle(.circular)
}
}
スタイルのイニシャライザに tint の色またはグラデーションを指定することで、ゲージの外観をさらにスタイル設定できます。以下の例は、CircularGaugeStyle ゲージの初期化におけるグラデーションの効果を示しており、ゲージの長さ全体にカラフルなグラデーションを示します。
struct LabeledGauge: View {
@State private var current = 67.0
@State private var minValue = 50.0
@State private var maxValue = 170.0
let gradient = Gradient(colors: [.green, .yellow, .orange, .red])
var body: some View {
Gauge(value: current, in: minValue...maxValue) {
Image(systemName: "heart.fill")
.foregroundColor(.red)
} currentValueLabel: {
Text("\(Int(current))")
.foregroundColor(Color.green)
} minimumValueLabel: {
Text("\(Int(minValue))")
.foregroundColor(Color.green)
} maximumValueLabel: {
Text("\(Int(maxValue))")
.foregroundColor(Color.red)
}
.gaugeStyle(CircularGaugeStyle(tint: gradient))
}
}
トピックス
ゲージの作成
init<V>(value: V, in: ClosedRange<V>, label: () -> Label)
範囲内の値を示すゲージを作成し、ゲージの目的と現在の値を描写します。
init<V>(value: V, in: ClosedRange<V>, label: () -> Label, currentValueLabel: () -> CurrentValueLabel)
範囲内の値を示し、ゲージの目的と現在の値を描写するゲージを作成します。
init<V>(value: V, in: ClosedRange<V>, label: () -> Label, currentValueLabel: () -> CurrentValueLabel, markedValueLabels: () -> MarkedValueLabels)
範囲内の値を表すゲージを作成します。
init<V>(value: V, in: ClosedRange<V>, label: () -> Label, currentValueLabel: () -> CurrentValueLabel, minimumValueLabel: () -> BoundsLabel, maximumValueLabel: () -> BoundsLabel)
範囲内の値を示すゲージを作成し、ゲージの現在の値、最小値、および最大値を描写します。
init<V>(value: V, in: ClosedRange<V>, label: () -> Label, currentValueLabel: () -> CurrentValueLabel, minimumValueLabel: () -> BoundsLabel, maximumValueLabel: () -> BoundsLabel, markedValueLabels: () -> MarkedValueLabels)
範囲内の値を表すゲージを作成します。
ゲージのスタイル設定
標準の修飾子の適用
デフォルトの実装
View の実装
関連
以下への準拠
View
以下も見よ
値のインジケータ