Question

我有以下代码在Picasso中加载图像，使用drawable在占用图像下载时显示占位符。我想要的是一个动画旋转进度条样式微调器，在图像加载时围绕和周围动画，就像我在大多数专业应用程序中看到的那样。毕加索似乎并不支持这一点，只有静态图像绘制。有没有办法让它与毕加索合作，还是我必须做一些不同的事情？

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

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

Answer 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

                }
            });
        }

享受。：）

Answer 3

不幸的是，毕加索不支持动画占位符。

解决这个问题的一种方法是将ImageView放在FrameLayout中，下面是动画drawable。这样当毕加索加载图像时，它将加载到动画占位符的顶部，为用户提供预期的效果。

或者，您可以将图片加载到Target。然后，您将默认显示进度条，并且当调用onBitmapLoaded方法时，您可以隐藏它并显示图像。您可以看到此here

的基本实现

Answer 4

我在堆栈溢出问题上尝试了很多方法，最后找到了一种方法，那就是使用“CircularProgressDrawable”。参考：this answer

Kotlin 代码示例

fun Context.loadImage(view: ImageView, url: String) {
  val circularProgressDrawable = CircularProgressDrawable(this)
  circularProgressDrawable.apply {
    strokeWidth = 5f
    centerRadius = 30f
    setColorSchemeColors(
      getColor(Color.WHITE)
    )
    start()
  }

  Picasso
    .get()
    .load(url)
    .fit()
    .centerInside()
    .placeholder(circularProgressDrawable)
    .into(view)
}

Answer 5

我找到了这个问题的答案！

请参阅：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”

Answer 6

我按照以下方式开展工作：

创建了一个drawable（在Internet上的某处找到）并将其放入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中添加了具有以下参数的Target Object，其中poster和spinner是对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);
        }
    };

结果将类似于加载 - 圈子正在旋转（抱歉这个屏幕截图，但图片看起来太快了）： ScreenShot

Answer 7

对于任何想要使用DBragion技术的人：确保你拥有最新版本的Picasso，否则它就不会旋转。在我使用2.5.2版之前，我没有工作。

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

Answer 8

在此link中，杰克·沃顿说：

不。我们使用Android BitmapFactory进行所有图像解码，但它（不可靠）不支持动画GIF。

那么你就不能

Answer 9

只需在DBragion的答案中添加shape属性，如下所示，它将像charm一样工作。编码愉快。

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

Answer 10

只需使用Picasso PlaceHolder

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

Answer 11

@DBragion的回答很好。它的问题（如评论中提到的许多问题）是它没有提供一种指定进度指示器高度/宽度的方法。以下是他的答案的修改版本，结合了@AkankshaRathod的答案。

loading_indicator.png

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
            android:drawable="@drawable/loading_indicator"
            android:pivotX="50%"
            android:pivotY="50%" />
    </item>
</layer-list>

包含您的ImageView的CardView（或任何容器布局）

<androidx.cardview.widget.CardView
    android:id="@+id/vCategoryItem"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/height_category_image"
    android:layout_marginLeft="@dimen/smaller"
    app:cardCornerRadius="@dimen/small">

    <ImageView
        android:id="@+id/imgCategoryImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/demo" />

    <ImageView
        android:id="@+id/loadingIndicator"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_gravity="center"
        android:layout_centerInParent="true"
        android:src="@drawable/progress_animation" />

    <TextView
        android:id="@+id/lblCategoryName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/big"
        android:ellipsize="marquee"
        android:gravity="center"
        android:paddingLeft="@dimen/big"
        android:paddingRight="@dimen/big"
        android:singleLine="true"
        android:text="Category Name"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:textStyle="bold" />

</androidx.cardview.widget.CardView>

毕加索加载：

Picasso.get().load(yourImageURL).into(imgCategoryImage, new Callback() {
    @Override
    public void onSuccess() {
        loadingIndicator.setVisibility(View.GONE);
    }

    @Override
    public void onError(Exception e) {

    }
});

在毕加索的动画加载图像

11 个答案: