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) )
![アイコンが表示されたショッピング カートのベクター](https://android-dot-devsite-v2-prod.appspot.com/static/develop/ui/compose/images/graphics-shopping.png?hl=ja)
画面に VectorDrawable
をレンダリングするために Icon
を使用する必要はありません。内部的には、Icon
は Modifier.paint(painterResource(R.drawable.ic_bus_stop)
を使用して画面に Icon
を描画します。使用可能なすべてのアイコンの詳細については、アイコンのドキュメントをご覧ください。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose のリソース
- Compose のユーザー補助
- 画像の読み込み {:#loading-images}