ピカソのアニメーション読み込み画像

次のコードを使用して、画像のダウンロード中にプレースホルダーのドローアブルを表示し、ピカソに画像をロードします。私が欲しいのは、ほとんどのプロのアプリで見られるように、画像の読み込み中に何度もアニメーションする、回転するプログレスバースタイルのスピナーです。Picassoはこれをサポートしていないようで、静的なイメージドローアブルのみです。ピカソで動作させる方法はありますか、それとも何か別のことをする必要がありますか？

Picasso.with(context).load(url)             
                    .placeholder(R.drawable.loading)
                    .error(R.drawable.image_download_error)
                    .into(view);

ピカソのプレースホルダーを使用して読み込みの進行状況のアニメーション画像を作成する方法：

これはanimated-rotate xmlオブジェクトを使用して簡単に解決できました。

手順：

progress_image.png

/res/drawable/progress_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:gravity="center">
    <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/progress_image"
        android:pivotX="50%"
        android:pivotY="50%" />
    </item>
</layer-list>

ピカソの読み込み：

Picasso.with( context )
        .load( your_path )
        .error( R.drawable.ic_error )
        .placeholder( R.drawable.progress_animation )
        .into( image_view );

画像のダウンロードとその非常に簡単なまで、進行状況ダイアログを実装しました。ImageViewを相対レイアウトで取得し、進行状況ローダーを同じ画像ビューに配置します。以下のコードを適用して、進行状況ダイアログの表示のみを処理します。

holder.loader.setVisibility(View.VISIBLE);
            holder.imageView.setVisibility(View.VISIBLE);
         final ProgressBar progressView = holder.loader;
            Picasso.with(context)
            .load(image_url)
            .transform(new RoundedTransformation(15, 0))
            .fit()
            .into(holder.imageView, new Callback() {
                @Override
                public void onSuccess() {
                    progressView.setVisibility(View.GONE);
                }

                @Override
                public void onError() {
                    // TODO Auto-generated method stub

                }
            });
        }

楽しい。:)

Picassoは残念ながらアニメーションのプレースホルダーをサポートしていません。

これを回避できる1つの方法は、ImageViewをアニメーション化されたドローアブルを下にしてFrameLayoutに配置することです。このようにして、ピカソが画像をロードすると、アニメーション化されたプレースホルダーの上にロードされ、ユーザーに意図した効果を与えます。

または、ターゲットにイメージをロードすることもできます。すると、デフォルトで進行状況バーが表示され、onBitmapLoadedメソッドが呼び出されると、それを非表示にして画像を表示できます。これの基本的な実装をここで見ることができます

以下のようにDBragionの回答に形状属性を追加するだけで、魅力のように機能します。ハッピーコーディング。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape
            android:shape="rectangle">

            <size
                android:width="200dp"
                android:height="200dp"/>

            <solid
                android:color="#00FFFFFF"/>
        </shape>
    </item>

    <item android:gravity="center">
        <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:drawable="@drawable/spinner"
            android:pivotX="50%"
            android:pivotY="50%" />
    </item>
</layer-list>

あなたもグライドを使うことができます：

Glide.with(activity).load(url)
                    .apply(RequestOptions.centerInsideTransform())
                    .placeholder(R.drawable.progress_animation)
                    .into(imageview);

この質問への回答が見つかりました。

参照：https : //github.com/square/picasso/issues/427#issuecomment-266276253

@DBragionの回答に加えて、以下をお試しください。

これで高さと幅を修正できます！

image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE

picasso.load(your_path)
        .fit()
        .centerCrop()
        .noFade()
        .placeholder(R.drawable. progress_animation)
        .into(image_view)

二つのポイントがあると思います。

1. noFade（）を使用

2. image_viewのscaleTypeを "CENTER_INSIDE"に設定します

私はそれを次のように機能させました：

1. ドローアブルを作成し（インターネットのどこかにあります）、それをres / drawableに配置します。

   <?xml version="1.0" encoding="utf-8"?>
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromDegrees="90"
   android:pivotX="50%"
   android:pivotY="50%"
   android:toDegrees="360">
   
   <shape
       android:innerRadiusRatio="3"
       android:shape="ring"
       android:thicknessRatio="7.0">
   
       <gradient
           android:angle="0"
           android:centerColor="#007DD6"
           android:endColor="#007DD6"
           android:startColor="#007DD6"
           android:type="sweep"
           android:useLevel="false" />
   </shape>

2. GridViewの私のアイテムにProgressBar要素を追加しました：

   <ProgressBar
       android:id="@+id/movie_item_spinner"
       android:layout_width="@dimen/poster_width"
       android:layout_height="@dimen/poster_height"
       android:progressDrawable="@drawable/circular_progress_bar"/>

3. アダプターでは、次のパラメーターでターゲットオブジェクトを追加しました。ここで、ポスターとスピナーはImageViewとProgressBarへの参照です。

   // ImageViewでProgressBarを表示/非表示にするターゲット

   final Target target = new Target() {
   
           @Override
           public void onPrepareLoad(Drawable drawable) {
               poster.setBackgroundResource(R.color.white);
               spinner.setVisibility(View.VISIBLE);
           }
   
           @Override
           public void onBitmapLoaded(Bitmap photo, Picasso.LoadedFrom from) {
               poster.setBackgroundDrawable(new BitmapDrawable(photo));
               spinner.setVisibility(View.GONE);
           }
   
           @Override
           public void onBitmapFailed(Drawable drawable) {
               poster.setBackgroundResource(R.color.white);
           }
       };

4. ロード時の結果は次のようになります-円が回転しています（このスクリーンショットでは申し訳ありませんが、画像の表示が速すぎます）： ScreenShot

DBragionのテクニックを使用しようとしている人のために：最新バージョンのPicassoを使用しているか、回転しないことを確認してください。私はバージョン2.5.2を使用するまで機能しませんでした。

compile 'com.squareup.picasso:picasso:2.5.2'

このリンクの中で、ジェイクウォートンは次のように述べています。

いいえ。すべての画像のデコードにはAndroid BitmapFactoryを使用しており、アニメーションGIFはサポートされていません（残念ながら）。

その後、できません

ピカソプレイスホルダーを使うだけ

  Picasso.get()
        .load(datas[position].artist?.image)
        .placeholder(R.drawable.music_image)
        .error(R.drawable.music_image)
        .into(holder.cardViewImage)