Анімоване завантажувальне зображення у пікассо


105

У мене є наступний код для завантаження зображення в Picasso, використовуючи малюнок для заповнювача, який відображається під час завантаження зображення. Мені все хочеться - це анімоване спінінг в стилі бар, який анімує навколо та навколо, коли зображення завантажується, як я бачу в більшості професійних додатків. Пікассо, схоже, не підтримує це, лише статичні зображення малюнків. Чи є спосіб змусити його працювати з Пікассо чи мені потрібно зробити щось інше?

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

Відповіді:


252

Як створити анімаційне зображення прогресу завантаження за допомогою заповнювача Picasso:

Я вирішив це легко, використовуючи анімований-обертовий xml-об’єкт.

Кроки:

progress_image.png

progress_image.png

/res/dravable/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 );

32
@DBragion чудово працює, але для великих зображень він збільшується. чи можемо ми зафіксувати його ширину та висоту до числа, наприклад 32x32 пікселів?
м3хді

9
Це не працює, анімація не показана. Просто звичайне зображення
Джо Махер

4
Він працює, але я хочу невеликий навантажувач не як мій завантажувач розмірів зображень
Ganpat Kaliya

2
Працюючи чудово, анімація залишається маленькою до декількох мілісекунд, перш ніж завантажене зображення з’явиться, воно стає максимальним і розтягується на кілька мілісекунд, потім з'являється зображення. Чи є рішення?
tinyCoder

2
Використовуйте romannurik.github.io/AndroidAssetStudio/index.html (виберіть "Генератор значків запуску") для створення mdpi, hdpi, xhdpi тощо.
CoolMind

73

Я реалізував діалог прогресу до завантаження зображення та його дуже простий. Візьміть свій 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

                }
            });
        }

Насолоджуйтесь. :)


Дякую .. це мені дуже допомогло :)
Zohair

2
Чудово! Найкраще рішення поки що може бути використане у багатьох різних контекстах. :)
VVZen

7
На насправді ви повинні звернути увагу на слабкі посилання і оголосити об'єкт зворотного виклику таким способом , щоб в процесі зборки сміття , уникайте (інакше OnSuccess ніколи не додзвонилися):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

Кожен, хто бентежить мовою, навантажувач прогресу - це прогрес погано
Джо Махер

2
Ви пропустили додавання класу RoundedTransformation. Цей клас тут gist.github.com/aprock/6213395
пані Саєдул Карим

3

Picasso, на жаль, не підтримує анімовані заповнювачі.

Один із способів вирішити це - розмістити ImageView у FrameLayout з анімованим малюнком під ним. Таким чином, коли Picasso завантажує зображення, воно завантажиться на верхню частину анімованого заповнювача, надаючи користувачеві намічений ефект.

Крім того, ви можете завантажити зображення в ціль . Тоді ви будете відображати за замовчуванням панель прогресу, і коли буде викликаний метод onBitmapLoaded, ви можете приховати його та відобразити зображення. Ви можете ознайомитися з базовою реалізацією цього тут


3
Пікассо робить підтримку анімованих наповнювачів. Ви записуєте файл, що малюється анімацією (включає список анімації з кількома елементами, що представляють кожне зображення анімації). Ви подаєте цей файл новому об’єкту AnimationDrawable, а потім передаєте його до placeHolder () у конструкторі завантажувача Picasso.
Одайм

1

Просто додайте атрибут форми у відповідь 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:

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

1

Я знайшов відповідь на це питання!

Дивіться: https://github.com/square/picasso/isissue/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. встановіть масштаб типу_вигляд зображення на "CENTER_INSIDE"


0

Я змусив це працювати наступним чином:

  1. Створено графічний файл (знайдений десь в Інтернеті) і введено його у res / dravable:

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

    // Націлювання на показ / приховування ProgressBar у 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. Результати будуть такими як при завантаженні - коло обертається (вибачте за цей знімок екрана, але зображення з’являються занадто швидко): ScreenShot


0

Для тих, хто намагається використовувати техніку DBragion: Переконайтеся, що у вас є остання версія Пікассо, інакше вона звичає. Моя не працювала, поки я не використав версію 2.5.2.

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

6
Це має бути коментар до зазначеної відповіді
Ojonugwa Jude Ochalifu

0

У цьому посиланні Джейк Уортон сказав:

Ні. Ми використовуємо Android BitmapFactory для всього декодування зображень, і він не має анімованої підтримки GIF (на жаль).

Тоді ви не можете


0

Просто використовуйте Picasso PlaceHolder

  Picasso.get()
        .load(datas[position].artist?.image)
        .placeholder(R.drawable.music_image)
        .error(R.drawable.music_image)
        .into(holder.cardViewImage)
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.