毕加索的动画加载图像


105

我有以下代码可在Picasso中加载图像,使用可绘制的占位符在图像下载时显示。我想要的是一个动画旋转进度条样式微调器,它在图像加载时前后旋转,就像我在大多数专业应用程序中看到的那样。毕加索似乎不支持此功能,仅支持静态图像可绘制对象。有没有办法让它与毕加索一起使用,还是我必须做一些不同的事情?

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

Answers:


252

如何使用Picasso占位符获取加载进度动画图像:

我使用动画旋转的xml对象轻松解决了此问题。

脚步:

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.with( context )
        .load( your_path )
        .error( R.drawable.ic_error )
        .placeholder( R.drawable.progress_animation )
        .into( image_view );

32
@DBragion效果很好,但是对于大图像,它被调用。我们可以将其宽度和高度固定为32x32像素吗?
m3hdi 2015年

9
这不起作用,没有显示动画。只是一个简单的图像
Joe Maher

4
它正在工作,但我不希望使用小型装载机作为我的imageview大小装载机
Ganpat Kaliya'5

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

                }
            });
        }

请享用。:)


谢谢..这对我
很有帮助

2
大!迄今为止最好的解决方案可以在许多不同的情况下使用。:)
VVZen

7
实际上,您应该注意弱引用,并以这种方式声明一个Callback对象以避免垃圾回收(否则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 2016年

任何人都被行话弄糊涂了,进度加载器是进度不良
乔·马希尔

2
您错过了添加RoundedTransformation类的操作。此类在这里gist.github.com/aprock/6213395
Sajedul Karim博士

3

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

解决此问题的一种方法是将ImageView放置在FrameLayout中,并在其下方绘制动画。这样,当Picasso加载图像时,它将加载到动画占位符的顶部,从而为用户提供预期的效果。

或者,您可以将图像加载到Target中。然后,默认情况下将显示进度条,并在调用onBitmapLoaded方法时可以将其隐藏并显示图像。您可以在此处看到此的基本实现


3
毕加索确实支持动画占位符。编写动画可绘制文件(包括动画列表,其中包含代表动画中每个图像的多个项目)。您将该文件提供给新的AnimationDrawable对象,然后将其传递给Picasso加载程序构造函数中的placeHolder()。
Odaym

1

只需在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);

1

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

参见: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)

我认为有两个关键点。

  1. 使用noFade()

  2. 将image_view的scaleType设置为“ CENTER_INSIDE”


0

我通过以下方式使其工作:

  1. 创建了一个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>

  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. 在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);
            }
        };
  4. 结果将类似于加载时-圆圈正在旋转(抱歉此屏幕截图,但是图像显示速度太快): ScreenShot



0

杰克·沃顿(Jake Wharton)在此链接中说:

不。我们使用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)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.