カスタムスタイル

Places UI キットのコンポーネントと UI キット以外の機能の色、タイポグラフィ、スペーシング、境界線、角をカスタマイズできます。

Places UI キットは、マテリアルデザイン（Google マップ固有の変更がいくつか加えられています）にほぼ基づいた、ビジュアルカスタマイズに対するデザインシステムアプローチを提供します。マテリアルデザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアルデザイン言語に準拠しています。

コンポーネントのルックアンドフィールは、placesMaterialColor、placesMaterialFont、placesMaterialShape、placesMaterialTheme 構造体でカスタマイズされます。

Places UI Kit はデフォルトでダークモードを提供するため、ダークモードとライトモードの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、カスタムテーマに .dark と attribution.darkModeColor の値を追加します。

次のスタイルをカスタマイズできます。

テーマ属性	用途
色
`theme.color.surface`	コンテナとダイアログの背景
`theme.color.outlineDecorative`	コンテナの境界線
`theme.color.primary`	リンク、読み込みインジケーター、概要アイコン
`theme.color.onSurface`	見出し、ダイアログのコンテンツ
`theme.color.onSurfaceVariant`	お店/スポット情報
`theme.color.secondaryContainer`	ボタンの背景
`theme.color.onSecondaryContainer`	ボタンのテキストとアイコン
`theme.color.neutralContainer`	日付バッジ、読み込みプレースホルダの形状を確認
`theme.color.onNeutralContainer`	レビューの日付、読み込みエラー
`theme.color.positiveContainer`	EV 充電器ありバッジ
`theme.color.onPositiveContainer`	利用可能な EV 充電器バッジのコンテンツ
`theme.color.positive`	「営業中」ラベルを配置
`theme.color.negative`	閉店した場所のラベル
`theme.color.info`	入口がバリアフリーのアイコン
`theme.measurement.borderWidthButton`	[地図で開く] ボタンと [OK] ボタン

タイポグラフィ
`theme.font.bodySmall`	お店/スポット情報
`theme.font.bodyMedium`	場所の情報、ダイアログのコンテンツ
`theme.font.labelMedium`	バッジのコンテンツ
`theme.font.labelLarge`	ボタンのコンテンツ
`theme.font.headlineMedium`	ダイアログの見出し
`theme.font.displaySmall`	場所の名前
`theme.font.titleSmall`	場所の名前

スペーシング
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

測定
`borderWidth`	コンテナ
`theme.measurement.borderWidthButton`

シェイプ
`theme.shape.cornerRadius`	コンテナ
`theme.shape.cornerRadiusButton`	[マップで開く] ボタンと [OK] ボタン（丸いアイコンボタンを除く）
`theme.shape.cornerRadiusThumbnail`	サムネイル画像を配置する
`theme.shape.cornerRadiusCollageOuter`	メディアコラージュ
`theme.shape.cornerRadiusCard`	場所情報カード、ユーザーレビューカード
`theme.shape.cornerRadiusDialog`	Google マップの開示ダイアログ

Google マップのブランドアトリビューション
`attribution.lightModeColor`	ライトモードの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）
`attribution.darkModeColor`	ダークモードの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）

アトリビューションの色

Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのいずれかを使用することが義務付けられています。この帰属情報は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。

ライトモードとダークモードで個別に設定できる 3 つのブランドカラーから選択できます。

ライトテーマ: 白、グレー、黒の列挙型を含む attributionColorLight。
ダークモード: 白、グレー、黒の列挙型を含む attributionColorDark。

例

この関数は、デフォルトのスタイル属性をオーバーライドするテーマを作成します。オーバーライドされていないテーマ属性は、デフォルトスタイルを使用します。

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

カスタム スタイル

アトリビューションの色

例

Swift

各コンポーネントの完全な例

カスタムスタイル