ボタンは、ユーザーが触れたときに行う動作を伝えます。
ボタンは、標準の Android オープンソース プロジェクト(AOSP)コンポーネントです。背景は単色、または未塗りつぶし(背景が透明)のいずれかです。塗りつぶされたボタンは、メインまたは優先する操作を示します。常にグループ単位で表示されるタブとは異なり、ボタンは個別に表示することも、グループ化して表示することもできます。
構造
![ボタンの構造](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-anatomy-1.png?authuser=0&hl=ja)
2. メインの操作または優先操作を示す塗りつぶしボタンコンテナ
3. ボタンのラベル
仕様
ボタンの長さの最大値と最小値
![ボタンラベルの最大長は 20 文字です。ボタンの最小幅は 156 dp です。](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-spec-1.png?authuser=0&hl=ja)
アイコン付きのボタンとデフォルトのボタンの比較
![ボタンにはアイコンを含めることができます。含まれている場合、アイコンは通常、ボタンテキストの左側に表示されます。](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-spec-3.png?authuser=0&hl=ja)
ボタンは、アプリバーやダイアログなどの他のコンポーネントの要素として表示できます。
アプリバー内のボタンの配置
![アプリバーの右側にボタンを配置する](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-spec-2.png?authuser=0&hl=ja)
ダイアログ内のボタン
![ダイアログのボタンは通常、ダイアログの左下に配置する](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-spec-4.png?authuser=0&hl=ja)
ヒーローボタン
![ヒーローボタンの角が丸く、ボタンの重要性が際立つ](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-spec-5.png?authuser=0&hl=ja)
カスタマイズ
OEM は、ボタンの外観を次のように変更することで、ブランドを反映できます。
- アクセント カラーの指定
- カスタム アイコンの指定
- カスタム フォントの追加
- 有効なボタン、無効なボタン、無効なボタンの外観を変更する
- ボタンのサイズ、角の形状、配置を設定する
- モーションを使用してユーザーにフィードバックを提供する
Car UI ライブラリ統合ガイドには、コンポーネントのカスタマイズに関する OEM のガイダンスが記載されています。
デザイン システムは、レイアウト、色、タイポグラフィ、サイズ設定、シェイプ、モーションを使用してコンポーネントをカスタマイズするための具体的なガイダンスを提供します。
例
![埋められなかったボタンと塗りつぶされたボタン](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-mock-1.png?authuser=0&hl=ja)
![無効になっている塗りつぶしボタン](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-mock-2.png?authuser=0&hl=ja)
![未入力ボタンのダイアログ](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-mock-3.png?authuser=0&hl=ja)
![ボタンの波紋効果の時間](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-different-shapes.gif?authuser=0&hl=ja)
![ボタンの波紋アニメーション](https://developers.google.cn/cars/design/automotive-os/components/images/buttons-ripple.gif?authuser=0&hl=ja)