毕加索的动画加载图像

我有下面的代码加载毕加索的图像，使用一个占位符显示，而图像下载。我想要的是一个动画旋转进度条样式的旋转器，周围和周围的动画，而图像加载，就像我看到在大多数专业的应用程序。毕加索似乎不支持这一点，只有静态图像绘制。有没有办法让它和毕加索一起工作，或者我必须做一些不同的东西？

Picasso.with(context).load(url)
.placeholder(R.drawable.loading)
.error(R.drawable.image_download_error)
.into(view);
83761 次浏览
小开

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

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

或者，您可以将图像加载到 Target中。然后，默认情况下会显示进度条，当调用 onBitmapLoadedmethod 时，可以隐藏它并显示图像。您可以看到这个 给你的基本实现

小开

How to have a loading progress animation image using Picasso placeholder:

我使用动画旋转的 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 );
小开

我实现的进度对话框，直到图像下载和它非常简单。在相对布局中使用 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. :)

小开

I made it working in following way:

  1. 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>

  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. 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);
}
};

  4. Results will be like that on loading - circle is rotating (sorry for this screenshot, but images are appearing too fast): ScreenShot

小开

对于任何试图使用 DBragion 技术的人: 确保你有毕加索的最新版本，否则它不会旋转。我的版本直到使用2.5.2版才能正常工作。

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

在 链接节目中，杰克 · 沃顿说:

没有。我们使用 Android BitmapFactory 进行所有的图像解码，而且它不支持动画 GIF (遗憾的是)。

那你就不能

小开

只要在 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);
小开

用毕加索的占位器就行了

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

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

见: 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. set image_view's scaleType to "CENTER_INSIDE"

小开

@ DBragion 的回答很棒。它的问题(就像评论中提到的那样)在于它没有提供一种方法来指定进度指示器的高度/宽度。以下是他的答案的修改版本和@AkankshaRathod 的答案的组合。

Load _ Indicator.png

Loading Indicator Image

Progress _ anime.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) {


}
});
小开

我已经尝试了很多方法来解决堆栈溢出问题，最终找到了一种方法，那就是使用“ 可绘制的循环进程”。档号: https://developer.android.com/reference/androidx/swiperefreshlayout/widget/CircularProgressDrawable

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)
}
小开 
   // create a ProgressDrawable object which we will show as placeholder
CircularProgressDrawable progress = new CircularProgressDrawable(context);
progress.setColorSchemeColors(R.color.colorPrimary, R.color.colorPrimaryDark, R.color.colorAccent);
progress.setCenterRadius(30f);
progress.setStrokeWidth(5f);
progress.start();


Picasso.with(context).load((String) chatMessage.getPath()).error(R.drawable.error)
.placeholder(progress)
.noFade()
.into(viewHolder.imageBody);

提交答案