グライド-デフォルトおよびトランジションアニメーション(プレースホルダーとフェードアニメーション)
Glide Default Transition Animation
前に書かれた:この記事の著者は ノーマンペイテック すべての著作権は原作者に帰属します。グライドを学んでいたときに、本の著者に会ったばかりです。 weiyf 私はバイリンガルの翻訳を書き、とても気分が良かったのですが、著者は数件の記事しか書いておらず、忙しいと思われます。それで、元のブログを見に行ったところ、元の英語を理解するのは難しくないことがわかりました。これは翻訳を行うのに便利な勉強です(ちなみに、英語を学ぶ(エスケープ)、英語をベースにした学生もできることを示唆していますオリジナルを直接読む: https://futurestud.io/tutorials/glide-placeholders-fade-animations
エラーがありましたら訂正してください、ありがとうございます!
最初のいくつかのポータル:
- [バイリンガル]グライド-はじめに(グライド-はじめに)
- [バイリンガル]グライド-高度な読み込み(グライド-高度な読み込み)
- [バイリンガル] Glide-ListView、GridView(Glide-ListAdapter(ListView、GridView))
元のポータル:
- 画像のサイズ変更とスケーリング
- GIFとビデオの表示
- キャッシングの基本
- 優先度のリクエスト
- サムネイル
- コールバック:カスタムビュークラスのSimpleTargetおよびViewTarget
- 通知とAppWidgetsへの画像の読み込み
- 例外:デバッグとエラー処理
- カスタム変換
- animate()を使用したカスタムアニメーション
- ネットワークスタックの統合
- モジュールでグライドをカスタマイズする
- グライドモジュールの例:自己署名HTTPS証明書の受け入れ
- グライドモジュールの例:キャッシングのカスタマイズ
- グライドモジュールの例:カスタムサイズの画像を読み込んで最適化
- モデルローダーを動的に使用する
- 画像を回転させる方法
- シリーズ総まとめ
- *画像付きの高度なリストビュー
- *アプリのリリース準備
- 最適なキャッシュ設定を選択する方法
- キャッシュルックアップでURLクエリパラメータを無視する方法(まもなく)
- ネットワーク依存の画像読み込み(まもなく)
テキスト:
さまざまなソースから画像を読み込む方法を学習した後、今週はプレースホルダーについて説明します。プレースホルダーは、画像が読み込まれる前にデフォルトで表示されるものです。
空白のImageViewは、どのUIにとっても見た目に美しいものではないことは間違いありません。 Glideを使用している場合は、おそらくネットワーク経由で画像を読み込んでいます。その場合、ユーザーのネットワーク環境によっては、時間がかかる場合があります。アプリの場合、画像が読み込まれる前にデフォルトの画像を表示することをお勧めします。
グライドは、簡単に実装できるスムーズなインターフェースを提供します! .placeHolder()
を呼び出して画像リソースIDを渡すだけで、画像が読み込まれる前にGlideがこのデフォルトの画像を表示します。
Glide .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .placeholder(R.mipmap.ic_launcher) // can also be a drawable .into(imageViewPlaceholder)
もちろん、ネットワークの読み込みも必要なため、このプレースホルダーとしてネットワークリンクを設定することはできません。対照的に、リソースファイルとドローアブルは利用可能であることが保証されています。ただし、load()
メソッドのパラメーターは任意のタイプにすることができます。ただし、ロードされない(ネットワークがない、サーバーがハングするなど)、削除される、またはアクセスできない状況がいくつかあります。次のセクションでは、「例外プレースホルダー」について説明します。
エラープレースホルダー:.error()
アプリがサイトから画像を読み込もうとしたが、サイトがハングしたとします。グライドは「ロードエラー」コールバックを提供し、適切なアクションを実行できます。この状況については後で紹介しますが、今のところ複雑すぎます。ほとんどの場合、エラープレースホルダーが使用されます。これは、画像の読み込みが異常であることをユーザーに通知するのに十分です。
呼び出されるメソッドが.error()
であることを除いて、プラクティスは上記のデフォルトの画像と同様です。
Glide .with(context) .load('http://futurestud.io/non_existing_image.png') .placeholder(R.mipmap.ic_launcher) // can also be a drawable .error(R.mipmap.future_studio_launcher) // Once the image fails to load, the image specified by this resource id will be displayed. .into(imageViewError)
これで、load()で指定された画像が正常に読み込まれなかった場合、GlideはR.mipmap.future_studio_launcher
置換するように表示します。同じ、.error()
許容可能なパラメーターは、ドローアブルで初期化するか、リソースID(R.drawable.
)を指すことしかできません。
crossFade()の使用(フェードインおよびフェードアウト)
画像が読み込まれる前にプレースホルダーを表示する場合は、変更ImageView
画像はインターフェースにとって非常に重要です。スムーズでシンプルに見えるようにするにはどうすればよいですか?簡単なアプローチは、フェードアニメーションを使用することです。グライドには標準のフェードインアニメーションが付属しており、その後デフォルトで有効になります(グライド3.6.1)。グライドにフェードアニメーションの使用を強制する場合は、ビルダーで呼び出すことができます。
Glide .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .placeholder(R.mipmap.ic_launcher) .error(R.mipmap.future_studio_launcher) .crossFade()//ps: this .into(imageViewFade)
このcorssFade()メソッドには別の形式があります。.crossFade(int duration)
アニメーションを遅くする(または速くする)場合は、アニメーションの継続時間をミリ秒単位で渡します。デフォルトのアニメーション時間は300msです。
dontAnimate()の使用(アニメーション化しないでください)
画像を直接表示したい場合は、アニメーションは必要ありません。ビルダーで呼び出します。.dontAnimate()
次のことができます。
Glide .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .placeholder(R.mipmap.ic_launcher) .error(R.mipmap.future_studio_launcher) .dontAnimate()//ps: this .into(imageViewFade)
これにより、遷移アニメーションなしで画像がImageViewに直接表示されます。これを行う正当な理由があることを確認してください! (ps:それはうまくいかないので)
これらのパラメータは互いに独立して設定され、互いに依存する必要はないことに注意してください。たとえば、.placeholder()
を呼び出すことはできません。.error()
を設定するだけです。プレースホルダーを設定せずにcrossFade()アニメーションを設定することもできます。これらのパラメータは、任意の組み合わせで組み合わせることができます。
見通し
このブログ投稿をご理解いただき、多くのことを学んでいただければ幸いです。ユーザーエクスペリエンスを向上させるためには、画像が突然ポップアップしないことが非常に重要です。したがって、負荷の例外がある場合は、わかりやすい方法でユーザーに通知する必要があります。 Glideは、より良いアプリケーションを形作るのに役立ついくつかの使いやすい方法を提供します。
しかし、まだいくつかの最適化は行っていません。来週は、画像の調整とスケーリングについて見ていきます。