IconでMaterial Iconsを使う
組み込みのアイコンセットをどこでも使います。
「IconでMaterial Iconsを使う」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
Icon composableを知る
ハートや戻る矢印のような小さなシンボルには、ComposeのIconを使います。Imageより軽量で、テーマに合わせて自動的に色が付きます。
アイコンのライブラリ
MaterialアイコンセットのIconsから、何百もの完成済みシンボルを利用できます。描画や書き出しは不要で、名前を指定するだけです。
Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")imageVectorがシンボルになる
Iconは、Materialセットのベクター画像であるimageVectorを受け取ります。ベクターなので、どのサイズでも鮮明に表示されます。
5つの見た目のスタイル
各シンボルには、Default、Outlined、Rounded、Sharp、TwoToneのスタイルがあります。アプリの雰囲気に合うものを選んでください。
Icon(Icons.Outlined.Settings, contentDescription = "Settings")拡張アイコンパック
基本セットはアプリを軽量に保つため小さくなっています。material-icons-extended依存関係を追加すると、さらに何千ものシンボルを利用できます。
アイコンは自動的に色付けされる
デフォルトでは、Iconはテーマから現在のcontent colorを使って描画されます。そのため、自分で色を設定しなくても常に統一感のある見た目になります。
色付けを上書きする
カスタムカラーを使いたい場合は、tint引数を渡します。シンボルが指定した色で再描画されます。
Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)Iconのサイズを指定する
IconはMaterialの標準である24dpでデフォルト表示されます。他のcomposableと同じように、Modifier.sizeで変更できます。
Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))説明も指定する
Imageと同様に、IconにもcontentDescriptionが必要です。「お気に入りに追加」のように動作を説明するか、近くのラベルですでに説明されている場合はnullを渡します。
ボタン内にアイコンを配置する
Iconは他のcomposableの中で力を発揮します。IconButtonにIconを配置すると、タップ可能でサイズも適切なアクションになります。
IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }DrawableからIconを作る
imageVectorの代わりにpainterResourceを使えば、自分のアセットからIconを作ることもできます。自動的な色付けもそのまま利用できます。
確認問題
tintを設定しない場合、Iconが使うデフォルトの色は何ですか？
振り返り：Materialアイコン
鮮明なベクターシンボルにはIconを使い、スタイルを選択し、tintを上書きし、modifierでサイズを指定できるようになりました。次は画像の拡大縮小です！🎯
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「IconでMaterial Iconsを使う」レッスンは無料ですか？
はい。「IconでMaterial Iconsを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「IconでMaterial Iconsを使う」で何を学びますか？
組み込みのアイコンセットをどこでも使います。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「IconでMaterial Iconsを使う」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Image Composable
- IconでMaterial Iconsを使う
- ContentScaleとトリミング
- 画像をクリップして形を整える