Анимированное загрузочное изображение в пикассо

У меня есть следующий код для загрузки изображения в Picasso, с помощью drawable для замещающего, отображаемого во время загрузки изображения. Тем не менее, я хочу, чтобы анимированный вращающийся стилист, который оживляет вокруг и вокруг, пока изображение загружается, как я вижу в большинстве профессиональных приложений. Пикассо, похоже, не поддерживает это, а только статические изображения. Есть ли способ заставить его работать с Пикассо или мне нужно сделать что-то другое?

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

Ответ 1

Как получить анимационное изображение процесса загрузки с использованием заполнителя Picasso:

Я решил это легко с помощью анимированного поворота объекта 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 );

Ответ 2

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

                }
            });
        }

Enjoy.:)

Ответ 3

Пикассо, к сожалению, не поддерживает анимированные заполнители.

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

В качестве альтернативы вы можете загрузить изображение в Target. Затем вы увидите индикатор выполнения по умолчанию, и когда вызывается метод onBitmapLoaded, вы можете скрыть его и отобразить изображение. Вы можете увидеть базовую реализацию этого здесь

Ответ 4

Я сделал это следующим образом:

Создал drawable (нашел где-то в Интернете) и поместил его в 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>

В моем элементе для элемента 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"/>

В Adapter добавлен целевой объект со следующими параметрами, где плакат и прядильщик являются ссылками на 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);
        }
    };

Результаты будут такими, как при загрузке - кружок вращается (извините за этот снимок экрана, но изображения появляются слишком быстро): ScreenShot

Ответ 5

Для тех, кто пытается использовать технику DBragion: убедитесь, что у вас есть последняя версия Picasso, иначе она не будет вращаться. Моя работа не работала, пока я не использовал версию 2.5.2.

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

Ответ 6

В этой ссылке Джейк Уортон сказал:

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

Тогда ты не можешь

Ответ 7

Просто добавьте атрибут shape в ответ 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);

Ответ 8

Просто используйте Picasso PlaceHolder

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

Ответ 9

Я нашел ответ на этот вопрос!

Смотрите: 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)

Я думаю, что есть два ключевых момента.

используйте noFade()
установите для image_view scaleType значение "CENTER_INSIDE"