Hình ảnh tải động trong picasso

Tôi có mã sau để tải một hình ảnh trong Picasso, sử dụng một trình giữ chỗ có thể kéo được để hiển thị trong khi hình ảnh đang tải xuống. Mặc dù vậy, những gì tôi muốn là một spinner kiểu thanh tiến trình quay hoạt hình hoạt hình xung quanh trong khi tải hình ảnh, giống như tôi thấy trong hầu hết các ứng dụng chuyên nghiệp. Picasso dường như không hỗ trợ điều này, chỉ có thể vẽ hình ảnh tĩnh. Có cách nào để làm cho nó hoạt động với Picasso hay tôi phải làm điều gì đó khác biệt?

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

Cách có hình ảnh động tiến trình tải bằng trình giữ chỗ Picasso:

Tôi đã giải quyết điều này một cách dễ dàng bằng cách sử dụng một đối tượng xml xoay động.

Các bước:

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 đang tải:

Picasso.with( context )
        .load( your_path )
        .error( R.drawable.ic_error )
        .placeholder( R.drawable.progress_animation )
        .into( image_view );

Tôi đã triển khai hộp thoại tiến trình cho đến khi tải xuống hình ảnh và nó rất đơn giản. Đưa ImageView của bạn theo bố cục tương đối và đặt bộ tải tiến trình trên cùng một chế độ xem hình ảnh. Chỉ áp dụng mã bên dưới và xử lý chế độ hiển thị hộp thoại tiến trình.

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

                }
            });
        }

Thưởng thức. :)

Rất tiếc, Picasso không hỗ trợ trình giữ chỗ động.

Một cách bạn có thể giải quyết vấn đề này là đặt ImageView của bạn trong FrameLayout với hoạt ảnh có thể vẽ bên dưới. Bằng cách này, khi Picasso tải hình ảnh, Picasso sẽ tải lên trên cùng của trình giữ chỗ động, mang lại cho người dùng hiệu ứng như mong đợi.

Ngoài ra, bạn có thể tải hình ảnh vào Target . Sau đó, bạn sẽ có thanh tiến trình hiển thị theo mặc định và khi phương thức onBitmapLoaded được gọi, bạn có thể ẩn nó và hiển thị hình ảnh. Bạn có thể xem cách triển khai cơ bản của điều này tại đây

Chỉ cần thêm thuộc tính shape trong câu trả lời của DBragion như bên dưới và nó sẽ hoạt động giống như charm. Chúc bạn viết mã vui vẻ.

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

Bạn cũng có thể sử dụng Glide:

Glide.with(activity).load(url)
                    .apply(RequestOptions.centerInsideTransform())
                    .placeholder(R.drawable.progress_animation)
                    .into(imageview);

Tôi đã tìm thấy câu trả lời cho câu hỏi này!

Xem: https://github.com/square/picasso/issues/427#issuecomment-266276253

Ngoài câu trả lời của @DBragion, hãy thử bên dưới.

Bây giờ chúng ta có thể sửa chiều cao và chiều rộng!

image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE

picasso.load(your_path)
        .fit()
        .centerCrop()
        .noFade()
        .placeholder(R.drawable. progress_animation)
        .into(image_view)

Tôi nghĩ có hai điểm chính.

1. sử dụng noFade ()

2. đặt scaleType của image_view thành "CENTER_INSIDE"

Tôi đã làm cho nó hoạt động theo cách sau:

1. Đã tạo một drawable (tìm thấy ở đâu đó trên Internet) và đặt nó vào 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. Trong mục của tôi cho phần tử ProgressBar được thêm vào GridView:

   <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. Trong Bộ điều hợp đã thêm Target Object với các thông số sau, trong đó poster và spinner là các tham chiếu đến ImageView và ProgressBar:

   // Nhắm mục tiêu để hiển thị / ẩn ProgressBar trên 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. Kết quả sẽ như vậy khi tải - vòng tròn đang xoay (xin lỗi vì ảnh chụp màn hình này, nhưng hình ảnh xuất hiện quá nhanh): ScreenShot

Đối với bất kỳ ai đang cố gắng sử dụng kỹ thuật của DBragion: Hãy đảm bảo rằng bạn có phiên bản Picasso mới nhất, nếu không nó sẽ không quay. Của tôi không hoạt động cho đến khi tôi sử dụng phiên bản 2.5.2.

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

Trong liên kết này , Jake Wharton nói:

Không. Chúng tôi sử dụng Android BitmapFactory để giải mã tất cả hình ảnh và nó không có hỗ trợ GIF động (thật đáng buồn).

Vậy thì bạn không thể

Chỉ cần sử dụng Picasso PlaceHolder

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