(第1部)Jetpack ComponentとGlide、Cool、FrescoイメージロードライブラリLandscapsist

この文章は2編連載されていますが、次の2編目を参照してください.

(第2部)Jetpack ComponentとGlide、Cool、FrescoイメージロードライブラリLandscapsist

この記事では、Jetpack ComponentやTwitterなど、オープンソースライブラリlandscapistの使用状況を紹介し、世界中でAndroidアプリケーションの開発に使用されています.

Jetpack Compose

Jetpack Composeは、従来のAndroid XMLレイアウト構造に完全に取って代わり、宣言構造によってUIコンポーネントの再利用性を最大限に向上させ、より多くのメリットを得るために、長年にわたって丹念に開発されてきた次世代UIツールです.GoogleはJetpack Componentを次のように紹介しています.
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

昨年7月28日の1.0安定版リリース日から、世界各地の科学技術会社がAndroidアプリケーション開発にJetpack Componentを導入し始めた.最も代表的なのは、私たちがよく使うGoogle Playの多くの画面がJetPack Composeが開発したもので、Twitter、SquareのCash App、Airbnb、Lyftなどのグローバル企業がJetPack Composeを生産レベルで積極的に利用していることです.
GoogleはJetpack Composeの開発に資源を提供し、複数のグローバル企業の製品開発に導入してきたが、Jetpack Composeは現在非常に発展の見込みがあり、将来の発展もますます期待されている.

Landscapist

GoogleはJetpack Composeという次世代技術を発表したが、声明的なUIモデルであり、Android Viewに関連する多くのUIソリューションはJetpack Composeをサポートするために個別のソリューションを提供する必要があり、アプリケーション開発において大きな比重を占めるイメージアップロードソリューションも例外ではない.
Androidシステムでは、最もポピュラーなイメージロード用のオープンソースライブラリGlide、Coil、Fresco、accompanistが既存のAndroid Viewシステムに基づいて開発されているため、Jetpack Componentはこれらのソリューションを適切に使用する必要がある.
Coilでサポートされていたイメージ・ロード・ライブラリは、当時グーグルの非公式Jetpack Componentツール・パッケージと呼ばれていましたが、GlideとPicassoソリューションが追加されましたが、現在はメンテナンスの問題です.
したがって、Jetpack Componentの採用を検討する場合は、独自のソリューションを開発するか、イメージライブラリをCoilに移行する必要があります.これは、多くの既存のプロジェクトがJetpack Componentの導入に大きな障害をもたらす可能性があることを示しています.landscapistは、コストを最小限に抑えるために設計されています.🎉

Go Foraward with Landscapist

accompanistは当時Glide、Cool、Picassoをサポートしていましたが、メンテナンスの問題ですべてのサポートが中断されました.その後、メイン料理のChris Banesに付き添ってLandscapistを代替製品として何度も推薦してくれてありがとうございました.
landscapsistが誕生して1年半後、現在はTwitter、Azar(アザール)など多くのグローバルAndroidアプリケーションの開発に使用されています.

Maven Nexus Repositoryの統計によると、毎月15万～20万回ダウンロードし、Landscapistが使用するグローバルアプリケーションのエンドユーザー数を加えると、少なくとも5億人を超えると推定されている.また、Googleのさまざまなサンプルアイテムまたはさまざまなオープンソースプロジェクトから使用例を見つけることもできます.

How to Use

では、landscapistの使い方を見てみましょう.landscapistでは、Glode、Coil、Frescoの3つのソリューションが用意されていますので、プロジェクトで使用するイメージロードソリューションと同じライブラリを選択することをお勧めします.
各ソリューションの依存性と基本的な使い方を見てみましょう.
最新バージョンはreleaseで入手できます.

Glide

Glideの場合は、build.gradleファイルに次の依存項目を追加します.

dependencies {
    implementation "com.github.skydoves:landscapist-glide:1.4.7"
}

依存性を追加すると、次のようにGlideImage Component関数を使用してネットワークイメージをロードできます.

GlideImage(
  imageModel = imageUrl,
  // Crop, Fit, Inside, FillHeight, FillWidth, None
  contentScale = ContentScale.Crop,
  // shows an image with a circular revealed animation.
  circularReveal = CircularReveal(duration = 250),
  // shows a placeholder ImageBitmap when loading.
  placeHolder = ImageBitmap.imageResource(R.drawable.placeholder),
  // shows an error ImageBitmap when the request failed.
  error = ImageBitmap.imageResource(R.drawable.error)
)

imageModelには、String、Uri、HttpUrl、File、DrawableResおよびDrawableのタイプがある.上記の例で示したすべてのパラメータは、画像をロードするために必要ではないので、状況に応じてカスタマイズすることをお勧めします.
その他の参考資料が必要な場合は、Landscapist-Glideを参照してください.

Coil

Coilを含めるには、次の依存項目をBitmapファイルに追加します.

dependencies {
    implementation "com.github.skydoves:landscapist-coil:1.4.7"
}

依存性を追加すると、次のようにbuild.gradle Component関数を使用してネットワークイメージをロードできます.

CoilImage(
  imageModel = imageUrl,
  // Crop, Fit, Inside, FillHeight, FillWidth, None
  contentScale = ContentScale.Crop,
  // shows an image with a circular revealed animation.
  circularReveal = CircularReveal(duration = 250),
  // shows a placeholder ImageBitmap when loading.
  placeHolder = ImageBitmap.imageResource(R.drawable.placeholder),
  // shows an error ImageBitmap when the request failed.
  error = ImageBitmap.imageResource(R.drawable.error)
)

CoilImageには、imageModel、String、Uri、HttpUrl、FileおよびDrawableResのタイプがある.上記の例で示したすべてのパラメータは、画像をロードするために必要ではないので、状況に応じてカスタマイズすることをお勧めします.
その他の参考資料が必要な場合は、Landscapist-Coilを参照してください.

Fresco

Frescoを含めるには、次の依存性をDrawableファイルに追加します.

dependencies {
    implementation "com.github.skydoves:landscapist-fresco:1.4.7"
}

Frescoの場合、依存性を追加するとパイプライン設定が必要になります.まず、以下に示すように、アプリケーションクライアント上でImagePipelineConfigを初期化する必要があります.

class App : Application() {

  override fun onCreate() {
    super.onCreate()

    val pipelineConfig =
      OkHttpImagePipelineConfigFactory
        .newBuilder(this, OkHttpClient.Builder().build())
        .setDiskCacheEnabled(true)
        .setDownsampleEnabled(true)
        .setResizeAndRotateEnabledForNetwork(true)
        .build()

    Fresco.initialize(this, pipelineConfig)
  }
}

次に、Bitmap Componentosable関数を使用して、次のようにネットワークイメージをロードできます.

FrescoImage(
  imageUrl = stringImageUrl,
  // Crop, Fit, Inside, FillHeight, FillWidth, None
  contentScale = ContentScale.Crop,
  // shows an image with a circular revealed animation.
  circularReveal = CircularReveal(duration = 250),
  // shows a placeholder ImageBitmap when loading.
  placeHolder = ImageBitmap.imageResource(R.drawable.placeholder),
  // shows an error ImageBitmap when the request failed.
  error = ImageBitmap.imageResource(R.drawable.error)
)

build.gradleの場合、FrescoImageではFrescoImageタイプしか使用できません.
その他の参考資料が必要な場合は、Landscapist-Frescoを参照してください.

Conclusion

この記事では、次世代UIキットJetpack Componentとオープンソースライブラリlandscapistについて説明します.
Jetpack Composeが登場して以来、Jetpack Composeに提供される新しいソリューションが次々と登場し、landscapistもその一つです.Jetpack Componentは有望なUIツールキットですが、まだ宿題がたくさんあります.そのため、今後、開発者に役立つソリューションを提供したいと考えています.
landscapsistの使用方法の詳細については、Loading images for Jetpack Compose using Glide, Coil, and Frescoを参照してください.
コードを楽しんでください.
— 作者の厳在雄(Skydoves)