コイルとは

githubを開き、coilを検索すると、次の概要が表示されます。

Coilは、Kotlinコルーチンを介して画像を読み込むAndroid画像読み込みライブラリです。

READMEを下にスクロールすると、そのような段落が表示されます。

私は言わなければならない、コイルは本当に香りがよい

表示画像の作成方法

ネットワーク画像をロードする前に、基礎を築き、通常の画像がどのように表示されるかを確認する必要があります。

画像形式

知識のポイントを振り返ると、画像の形式は一般的にビットマップとベクターグラフィックに分けられます

ビットマップ： Androidネイティブでは、ビットマップを使用してビットマップをロードします。ビットマップはピクセルで構成されており、拡大すると歪んでしまいます。
ベクターグラフィック：ベクターグラフィックは幾何学的特性に従って描画され、拡大後に歪むことはありません。Androidネイティブでは、通常、 VectorDrawableまたはサードパーティライブラリ（グライド/コイル）がロードされます。

作成はローカル画像をロードします（画像）

Androidネイティブでは、ImageViewは通常、画像を表示するために使用されます。作成では、Imageは次のように画像を表示するために使用されます。

@Composable
fun ShowLauncher() {
    Image(painter = painterResource(id = R.drawable.jin), contentDescription = "")
}
复制代码

質問をひねって、ジンはとてもハンサムです

画像パラメータの説明

必須パラメーター

painter：painterResourceを使用して、ImageBitmap（composeのビットマップクラス）/ ImageVector（composeのベクトルクラス）のようなpainterオブジェクトを作成します。特定のタイプは、画像自体の形式によって決まります。
contentDescription：ユーザー補助モードの場合

必須ではないパラメータ

配置：親レイアウトでの画像のレイアウト方法を定義します
contentScale：スケーリングルールを定義します
アルファ：透明性
colorFilter：画像の色を変更するために使用されます

画像サイズ

Androidネイティブ開発では、一般的なサイズは3つの方法で設定できます。これは、特定の値/ wrap / matchです。composeでは、対応する値は次のとおりです。

特定の値->xxx.dip
wrap->デフォルトはwrapです
一致->fillMaxSize/ fillMaxHeight / fillMaxWidth

試してみましょう、画像を画面全体にズームします

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxWidth()
    )
}
复制代码

emmm ...、変更はありますが、私たちの高い期待とは一致していないようです。この時点で、contentScaleのルールをFillHeightに変更すると、問題は解決されます。

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxHeight(),
        contentScale = ContentScale.FillHeight
    )
}
复制代码

ここでジンのクローズアップをお楽しみください

Web画像を読み込む

前述のように、coilはcomposeの画像読み込みをすでにサポートしており、coilのサポートは次のようにこれまでになく簡単です。

依存関係のインポート

implementation("io.coil-kt:coil-compose:2.0.0")
复制代码

ここで、ネイティブにインポートする必要のあるパッケージと矛盾していることに注意してください

使用する

@Composable
fun ShowLauncher() {
    AsyncImage(
        model = "https://pic.iyingdi.com/post/content/2022/05/14/16325/ed50f6b7-8654-44ff-8762-7596c40928a7.png?imageMogr2/format/jpg|imageMogr2/quality/70",
        contentDescription = "")
}
复制代码

モデル：画像アドレス
contentDescription：ユーザー補助モードの使用法

この時点で、ネットワークイメージはcomposeに正常にロードされます

コイル-composeはWeb画像をロードするための最良のパートナーです