マテリアル アイコン
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Icon
コンポーザブルを使用すると、マテリアル デザイン ガイドラインに沿った単色のアイコンを画面に簡単に描画できます。Icon
を使用するには、Compose マテリアル ライブラリ(または Compose マテリアル 3 ライブラリ)を含めます。
たとえば、マテリアルのデフォルトで読み込むベクター型ドローアブルがある場合は、次のように Icon
コンポーザブルを使用できます。
Icon(
painter = painterResource(R.drawable.baseline_directions_bus_24),
contentDescription = stringResource(id = R.string.bus_content_description)
)
デフォルトでは、Icon
コンポーザブルの色は LocalContentColor.current
で、サイズは 24.dp
です。また、tint
カラー パラメータも公開されています(画像の色合いのセクションで説明したものと同じ色合い調整のメカニズムが使用されます)。Icon
コンポーザブルは、小さなアイコン要素での使用を目的としています。その他のカスタマイズ オプションについては、Image
コンポーザブルを使用する必要があります。
また、マテリアル アイコン ライブラリには、SVG を手動でインポートしなくても Compose で使用できる、事前定義された Icons
のセットも含まれています。丸みを帯びたショッピング カート アイコンを描画する方法は次のとおりです。
Icon(
Icons.Rounded.ShoppingCart,
contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
画面に VectorDrawable
をレンダリングするために Icon
を使用する必要はありません。内部的には、Icon
は Modifier.paint(painterResource(R.drawable.ic_bus_stop)
を使用して画面に Icon
を描画します。使用可能なすべてのアイコンの詳細については、アイコンのドキュメントをご覧ください。
あなたへのおすすめ
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2024-09-12 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2024-09-12 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-09-12 UTC。"]]