XCode 26.4 日本語化計画
元のドキュメント：developer.apple.com/documentation/swiftui/shapestyle
プロトコル
ShapeStyle
図形を描画する際に使用する色またはパターン。
iOS 13.0+ iPadOS 13.0+ macOS 10.15+
tvOS 13.0 VisionOS 1.0+ WatchOS 6.0+
概観
ShapeStyle プロトコルに準拠する型を宣言し、必要な revolution 関数を実装することで、カスタムシェイプスタイルを作成できます。この関数は、現在の環境に基づいて目的の外観を表すシェイプスタイルを返します。
例えば、以下のシェイプスタイルは、環境から現在のカラースキームを読み取り、その色が合成されるブレンドモードを選択します。
struct MyShapeStyle: ShapeStyle {
func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
if environment.colorScheme == .light {
return Color.red.blendMode(.lighten)
} else {
return Color.red.blendMode(.darken)
}
}
}
カスタムシェイプスタイルを作成するだけでなく、SwiftUI で定義されている具体的なスタイルの一つを使用することもできます。特定の色やパターンを指定するには、Color を使用でき、image(_:sourceRect:scale:) で返されるスタイル、または radialGradient(_:center:startRadius:endRadius:) で返されるようなグラデーションタイプを使用できます。与えられたプラットフォームのコンテキストに適した色を設定するには、background や primary などのセマンティックスタイル (意味のあるスタイル) を使用します。
シェイプスタイルは、以下の方法で使用できます。
Path { path in
path.move(to: .zero)
path.addLine(to: CGPoint(x: 50, y: 0))
path.addArc(
center: .zero,
radius: 50,
startAngle: .zero,
endAngle: .degrees(90),
clockwise: false)
}
.fill(.radialGradient(
Gradient(colors: [.yellow, .red]),
center: .topLeading,
startRadius: 15,
endRadius: 80))
RoundedRectangle(cornerRadius: 10)
.stroke(.mint, lineWidth: 10)
.frame(width: 200, height: 50)
VStack(alignment: .leading) {
Text("Primary")
.font(.title)
Text("Secondary")
.font(.caption)
.foregroundStyle(.secondary)
}
トピックス
システムカラー
UI 要素での使用に適した黒色。
UI 要素での使用に適したコンテキスト依存の青色。
UI 要素での使用に適したコンテキスト依存の茶色。
UI 要素での使用に適したクリアカラー。
UI 要素での使用に適したコンテキスト依存のシアン色。
UI 要素での使用に適したコンテキスト依存の灰色。
UI 要素での使用に適したコンテキスト依存の緑色。
UI 要素での使用に適したコンテキスト依存のインディゴ色。
UI 要素での使用に適したコンテキスト依存のミント色。
UI 要素での使用に適したコンテキスト依存のオレンジ色。
UI 要素での使用に適したコンテキスト依存のピンク色。
UI 要素での使用に適したコンテキスト依存の紫色。
UI 要素での使用に適したコンテキスト依存の赤色。
UI 要素での使用に適したコンテキスト依存のティール色。
UI 要素での使用に適した白色。
UI 要素での使用に適したコンテキスト依存の黄色。
角度のグラデーション
static angularGradient(_:center:startAngle:endAngle:)
角度のグラデーションとは、開始角度と終了角度の間で角度が変化するにつれて色関数を適用するもので、塗りつぶされた形状内の相対的な中心点に固定されます。
色のコレクションによって定義される角度のグラデーション。
色の停止点のコレクションによって定義される角度のグラデーション。
円錐グラデーション
static conicGradient(_:center:angle:)
円錐グラデーションで、与えられた角度から開始し、塗りつぶされた図形内の相対的な中心点に固定された、完全な回転を完了します。
static func conicGradient(colors: [Color], center: UnitPoint, angle: Angle) -> AngularGradient
円錐グラデーションは、完全な回転を完了する色のコレクションによって定義されます。
円錐グラデーションは、完全な回転を完了するカラー停止点のコレクションによって定義されます。
楕円のグラデーション
static ellipticalGradient(_:center:startRadiusFraction:endRadiusFraction:)
楕円を描く放射状グラデーション。
色のコレクションによって定義される楕円を描画する放射状グラデーション。
カラー停止点のコレクションによって定義される楕円を描画する放射状グラデーション。
線形グラデーション
static linearGradient(_:startPoint:endPoint:)
線形グラデーション。
色のコレクションによって定義される線形グラデーション。
カラー停止点のコレクションによって定義される線形グラデーション。
放射状グラデーション
static radialGradient(_:center:startRadius:endRadius:)
放射状グラデーション。
色のコレクションによって定義される放射状グラデーション。
カラー停止点のコレクションによって定義される放射状グラデーション。
素材
static var ultraThinMaterial: Material
ほぼ透明な素材。
static var thinMaterial: Material
不透明よりは透明な素材。
static var regularMaterial: Material
やや透明な素材。
static var thickMaterial: Material
半透明というよりは不透明に近い素材。
static var ultraThickMaterial: Material
ほぼ不透明な素材。
システムツールバーのスタイルにマッチする素材。
画像ペイントスタイル
static func image(Image, sourceRect: CGRect, scale: CGFloat) -> ImagePaint
画像の領域を繰り返して図形を塗りつぶす図形スタイル。
階層的スタイル
var secondary: some ShapeStyle
この形状スタイルの 2 番目のレベルを返します。
この形状スタイルの 3 番目のレベルを返します。
var quaternary: some ShapeStyle
この形状スタイルの 4 番目のレベルを返します。
この形状スタイルの 5 番目のレベルを返します。
static var primary: HierarchicalShapeStyle
現在のコンテンツスタイルの第 1 レベルに対応する形状スタイル。
static var secondary: HierarchicalShapeStyle
現在のコンテンツスタイルの第 2 レベルに対応する形状スタイル。
static var tertiary: HierarchicalShapeStyle
現在のコンテンツスタイルの第 3レ ベルに対応する形状スタイル。
static var quaternary: HierarchicalShapeStyle
現在のコンテンツスタイルの第 4 レベルに対応する形状スタイル。
static var quinary: HierarchicalShapeStyle
現在のコンテンツスタイルの第 5 レベルに対応する形状スタイル。
セマンティック(意味)スタイル
static var foreground: ForegroundStyle
現在の文脈における前景のスタイル。
static var background: BackgroundStyle
現在の文脈における背景のスタイル。
static var selection: SelectionShapeStyle
プラットフォームの慣習的な色や動作に従って、選択状態を視覚的に示すために使用されるスタイル。
static var separator: SeparatorShapeStyle
前景の区切り線や境界線に適したスタイル。
static var tint: TintShapeStyle
現在の tint 色を反映したスタイル。
static var placeholder: PlaceholderTextShapeStyle
プレースホルダーテキストに適したスタイル。
static var link: LinkShapeStyle
リンクに適したスタイル。
static var fill: FillShapeStyle
図形を塗りつぶすためのオーバーレイ塗りつぶしスタイル。
static var windowBackground: WindowBackgroundShapeStyle
要素が属するウィンドウの背景色に合わせるべき要素に適したスタイル。
形状スタイルの変更
func blendMode(BlendMode) -> some ShapeStyle
self に基づいて、描画時に指定されたブレンドモードを適用する新しいスタイルを返します。
func opacity(Double) -> some ShapeStyle
self に基づいて、描画時に指定された不透明度で乗算する新しいスタイルを返します。
func shadow(ShadowStyle) -> some ShapeStyle
指定された影の効果を形状スタイルに適用します。
デフォルトの形状スタイルの構成
static func blendMode(BlendMode) -> some ShapeStyle
現在のスタイルを基に、描画時にブレンドモードとして mode を使用する新しいスタイルを返します。
static func opacity(Double) -> some ShapeStyle
現在のスタイルを基に、描画時に opacity を乗算して、新しいスタイルを返します。
static func shadow(ShadowStyle) -> some ShapeStyle
指定された影のスタイルを現在のスタイルに適用する形状スタイルを返します。
絶対座標へのマッピング
func `in`(CGRect) -> some ShapeStyle
形状スタイルの単位空間座標を、与えられた長方形の絶対座標にマッピングします。
環境内で形状スタイルを解決
func resolve(in: EnvironmentValues) -> Self.Resolved
与えられた現在の environment (環境) に基づいて、解決済みの形状スタイルを評価します。
必須 デフォルトの実装が提供されます。
associatedtype Resolved : ShapeStyle = Never
これが変換される形状スタイルの型。
必須
形状スタイルをビューとして使用
var body: _ShapeView<Rectangle, Self>
形状スタイルで塗りつぶされた長方形のビュー。
サポートする型
形状スタイルプロトコルのプロパティとメソッドを使用して、これらのスタイルのインスタンスを構築します。
角度のグラデーション。
楕円を描く放射状グラデーション。
線形のグラデーション。
放射状のグラデーション。
背景素材の型。
画像の領域を繰り返して形状を塗りつぶす形状スタイル。
番号付きのコンテンツスタイルのいずれかに対応する形状スタイル。
struct HierarchicalShapeStyleModifier
階層構造を持つ形状に適用できるスタイル。
現在の文脈における前景のスタイル。
現在の状況における背景のスタイル。
プラットフォームの慣習的な色や動作に従って、選択状態を視覚的に示すために使用されるスタイル。
前景の区切り線や境界線に適したスタイル。
現在の tint 色を反映したスタイル。
上塗り塗りつぶしの 1 つを表示する形状スタイル。
リンクに適したスタイル。
struct PlaceholderTextShapeStyle
プレースホルダーテキストに適したスタイル。
struct WindowBackgroundShapeStyle
要素が配置されているウィンドウの背景色に合わせるべき要素に適したスタイル。
インスタンスメソッド
func materialActiveAppearance(MaterialActiveAppearance) -> some ShapeStyle
このスタイルで作成された素材に対して、明示的なアクティブな外観を設定します。
関連
以下からの継承
SendableMetatype
準拠する型
Color.Resolved
Color.ResolvedHDR
HierarchicalShapeStyleModifier
Shader
以下も見よ
スタイリングコンテンツ
func border<S>(S, width: CGFloat) -> some View
指定されたスタイルと幅で、このビューに境界線を追加します。
func foregroundStyle<S>(S) -> some View
ビューの前面要素に与えられたスタイルを使用するように設定します。
func foregroundStyle<S1, S2>(S1, S2) -> some View
子ビューにおける前景スタイルの第一レベルと第二レベルを設定します。
func foregroundStyle<S1, S2, S3>(S1, S2, S3) -> some View
前景スタイルの第一、第二、および第三レベルを設定します。
func backgroundStyle<S>(S) -> some View
ビュー内の背景をレンダリングするために指定されたスタイルを設定します。
var backgroundStyle: AnyShapeStyle?
設定するとデフォルトのシステム背景スタイルを上書きするオプションのスタイル。
struct AnyShapeStyle
型が消去された ShapeStyle 値。
struct Gradient
それぞれがパラメータ化された位置値を持つカラー停止点の配列として表現されるカラーグラデーション。
struct MeshGradient
配置された色の 2 次元グリッドによって定義される 2 次元グラデーション。
色のグラデーション。
struct ShadowStyle
影をレンダリングする際に使用するスタイル。
struct Glass
リキッドガラス材料の構成を定義する構造。
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ