问题
I have the following code to load an image in Picasso, using a drawable for the placeholder to display while the image is downloading. What I want though is an animated spinning progress bar style spinner that animates around and around while the image is loading, like I see in most professional apps. Picasso doesn\'t seem to support this, only static image drawables. Is there a way to get it working with Picasso or do I have to do something different?
Picasso.with(context).load(url)
.placeholder(R.drawable.loading)
.error(R.drawable.image_download_error)
.into(view);
回答1:
How to have a loading progress animation image using Picasso placeholder:
I solved this easily using a animated-rotate xml object.
Steps:
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 loading:
Picasso.with( context )
.load( your_path )
.error( R.drawable.ic_error )
.placeholder( R.drawable.progress_animation )
.into( image_view );
回答2:
I implemented the progress dialog till the image download and its very simple. Take your ImageView in relative layout and place progress loader on same image view. Apply the below code and handle progress dialog visibility only.
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:
Picasso doesn't support animated placeholders unfortunately.
One way you could work around this is to place your ImageView in a FrameLayout with the animated drawable underneath. This way when Picasso loads the image it will load over the top of the animated placeholder, giving the user the intended effect.
Alternatively, you could load the image into a Target. Then you'd have the progress bar showing by default, and when the onBitmapLoaded method is called you can hide it and display the image. You can see a basic implementation of this here
回答4:
I found answer to this question!
See: https://github.com/square/picasso/issues/427#issuecomment-266276253
In addition to answer of @DBragion, try below.
Now we can fix height and width!
image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE
picasso.load(your_path)
.fit()
.centerCrop()
.noFade()
.placeholder(R.drawable. progress_animation)
.into(image_view)
I think there are two key points.
use noFade()
set image_view's scaleType to "CENTER_INSIDE"
回答5:
I made it working in following way:
Created a drawable (found somewhere on the Internet) and put it in the 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>In my item for the GridView added ProgressBar element:
<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"/>In Adapter added Target Object with following parameters, where poster and spinner are references to ImageView and ProgressBar:
// Target to show/hide ProgressBar on 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); } };Results will be like that on loading - circle is rotating (sorry for this screenshot, but images are appearing too fast): ScreenShot
回答6:
For anyone trying to use DBragion's technique: Make sure you have the latest version of Picasso or else it wont spin. Mine didn't work until I used version 2.5.2.
compile 'com.squareup.picasso:picasso:2.5.2'
回答7:
In this link, Jake Wharton said :
Nope. We use the Android BitmapFactory for all image decoding and it has no animated GIF support (sadly).
Then you can't
回答8:
Just add shape attribute in DBragion's answer as like below and it will work like charm. Happy coding.
<?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>
You can use Glide too:
Glide.with(activity).load(url)
.apply(RequestOptions.centerInsideTransform())
.placeholder(R.drawable.progress_animation)
.into(imageview);
回答9:
Just use Picasso PlaceHolder
Picasso.get()
.load(datas[position].artist?.image)
.placeholder(R.drawable.music_image)
.error(R.drawable.music_image)
.into(holder.cardViewImage)
来源：https://stackoverflow.com/questions/24826459/animated-loading-image-in-picasso