Gambar pemuatan animasi di picasso


105

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);

Jawaban:


252

Cara memiliki gambar animasi progres pemuatan menggunakan placeholder Picasso:

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

Langkah:

progress_image.png

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 );

32
@DBragion berfungsi dengan baik, tetapi untuk gambar besar, gagal. dapatkah kita memperbaiki lebar dan tingginya menjadi 32x32 piksel?
m3hdi

9
Ini tidak berhasil, tidak ada animasi yang ditampilkan. Hanya gambar biasa
Joe Maher

4
Ini berfungsi tetapi saya ingin loader kecil bukan sebagai pemuat ukuran imageview saya
Ganpat Kaliya

2
Bekerja dengan baik, animasi tetap kecil hingga beberapa milidetik sebelum gambar yang diunduh muncul, dimaksimalkan dan direntangkan selama beberapa milidetik kemudian gambar muncul. Apakah ada solusinya?
tinyCoder

2
Gunakan romannurik.github.io/AndroidAssetStudio/index.html (pilih "Launcher icon generator") untuk membuat mdpi, hdpi, xhdpi, dll.
CoolMind

73

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. :)


Terima kasih .. ini sangat membantu saya :)
Zohair

2
Bagus! Solusi terbaik sejauh ini, dapat digunakan dalam banyak konteks berbeda. :)
VVZen

7
Sebenarnya Anda harus memperhatikan referensi yang lemah dan mendeklarasikan objek Callback dengan cara ini untuk menghindari pengumpulan sampah (jika tidak, onSuccess tidak akan pernah bisa dipanggil):final Callback loadedCallback = new Callback() { @Override public void onSuccess() { // your code } @Override public void onError() { // your code } }; imageView.setTag(loadedCallback); Picasso.with(context).load(url).into(imageView, loadedCallback);
VVZen

Siapa pun yang bingung dengan bahasanya, Progress Loader adalah Progress Bad
Joe Maher

2
Anda melewatkan untuk menambahkan kelas RoundedTransformation. Kelas ini ada di sini gist.github.com/aprock/6213395
Md. Sajedul Karim

3

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


3
Picasso melakukan dukungan animasi penampung. Anda menulis file animasi drawable (termasuk daftar animasi dengan beberapa item yang mewakili setiap gambar dalam animasi). Anda memasukkan file itu ke objek AnimationDrawable baru dan kemudian meneruskannya ke placeHolder () di konstruktor pemuat Picasso.
Odaym

1

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);

1

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"


0

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


0

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'

6
Ini harus menjadi komentar di bawah jawaban tersebut
Ojonugwa Jude Ochalifu

0

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


0

Cukup gunakan Picasso PlaceHolder

  Picasso.get()
        .load(datas[position].artist?.image)
        .placeholder(R.drawable.music_image)
        .error(R.drawable.music_image)
        .into(holder.cardViewImage)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.