Gambar pemuatan animasi di picasso

Saya memiliki kode berikut untuk memuat gambar di Picasso, menggunakan drawable untuk menampilkan placeholder saat gambar sedang diunduh. Yang saya inginkan adalah animasi spinning progress bar style spinner yang menganimasikan sekitar dan saat gambar sedang dimuat, seperti yang saya lihat di sebagian besar aplikasi profesional. Picasso tampaknya tidak mendukung ini, hanya gambar statis yang dapat digambar. Adakah cara untuk membuatnya berfungsi dengan Picasso atau apakah saya harus melakukan sesuatu yang berbeda?

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

Cara memiliki gambar animasi progres pemuatan menggunakan placeholder Picasso:

Saya menyelesaikan ini dengan mudah menggunakan objek xml animasi-putar.

Langkah:

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 memuat:

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

Saya menerapkan dialog kemajuan hingga pengunduhan gambar dan itu sangat sederhana. Ambil ImageView Anda dalam tata letak relatif dan tempatkan pemuat kemajuan pada tampilan gambar yang sama. Terapkan kode di bawah ini dan tangani visibilitas dialog kemajuan saja.

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

                }
            });
        }

Nikmati. :)

Picasso tidak mendukung placeholder animasi, sayangnya.

Salah satu cara Anda bisa mengatasi ini adalah dengan menempatkan ImageView Anda di FrameLayout dengan drawable animasi di bawahnya. Dengan cara ini, ketika Picasso memuat gambar, gambar itu akan dimuat di atas placeholder animasi, memberikan efek yang diinginkan pengguna.

Atau, Anda dapat memuat gambar ke dalam Target . Kemudian Anda akan memiliki bilah kemajuan yang ditampilkan secara default, dan ketika metode onBitmapLoaded dipanggil Anda dapat menyembunyikannya dan menampilkan gambar. Anda dapat melihat implementasi dasar ini di sini

Cukup tambahkan atribut bentuk dalam jawaban DBragion seperti di bawah ini dan itu akan bekerja seperti pesona. Selamat membuat kode.

<?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>

Anda juga dapat menggunakan Glide:

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

Saya menemukan jawaban untuk pertanyaan ini!

Lihat: https://github.com/square/picasso/issues/427#issuecomment-266276253

Selain jawaban @DBragion, coba di bawah ini.

Sekarang kita bisa memperbaiki tinggi dan lebar!

image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE

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

Saya pikir ada dua poin penting.

1. gunakan noFade ()

2. setel image_view's scaleType ke "CENTER_INSIDE"

Saya membuatnya bekerja dengan cara berikut:

1. Membuat drawable (ditemukan di suatu tempat di Internet) dan meletakkannya di 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. Dalam item saya untuk GridView menambahkan elemen 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. Di Adapter menambahkan Objek Target dengan parameter berikut, di mana poster dan spinner adalah referensi ke ImageView dan ProgressBar:

   // Targetkan untuk menampilkan / menyembunyikan ProgressBar di ImageView

   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. Hasil akan seperti itu saat dimuat - lingkaran berputar (maaf untuk tangkapan layar ini, tetapi gambar muncul terlalu cepat): ScreenShot

Untuk siapa pun yang mencoba menggunakan teknik DBragion: Pastikan Anda memiliki Picasso versi terbaru atau Picasso tidak akan berputar. Milik saya tidak berfungsi sampai saya menggunakan versi 2.5.2.

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

Di tautan ini , Jake Wharton berkata:

Nggak. Kami menggunakan Android BitmapFactory untuk semua decoding gambar dan tidak memiliki dukungan GIF animasi (sayangnya).

Maka Anda tidak bisa

Cukup gunakan Picasso PlaceHolder

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