ภาพเคลื่อนไหวในการโหลด picasso


105

ฉันมีรหัสต่อไปนี้เพื่อโหลดรูปภาพใน Picasso โดยใช้ตัวยึดเพื่อแสดงในขณะที่ดาวน์โหลดรูปภาพ สิ่งที่ฉันต้องการคือสปินเนอร์สไตล์แถบความคืบหน้าแบบเคลื่อนไหวที่เคลื่อนไหวไปรอบ ๆ และรอบ ๆ ในขณะที่โหลดรูปภาพเหมือนที่ฉันเห็นในแอพมืออาชีพส่วนใหญ่ ดูเหมือนว่า Picasso จะไม่รองรับสิ่งนี้มีเพียงภาพวาดแบบคงที่เท่านั้น มีวิธีทำให้มันทำงานร่วมกับ Picasso ได้ไหมหรือฉันต้องทำอะไรที่แตกต่างออกไป

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

คำตอบ:


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:

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

32
@DBragion ใช้งานได้ดี แต่สำหรับภาพขนาดใหญ่จะมีการไล่ระดับขึ้น เราสามารถกำหนดความกว้างและความสูงให้เป็นตัวเลขเช่น 32x32 พิกเซลได้หรือไม่?
m3hdi

9
ไม่ได้ผลไม่มีการแสดงภาพเคลื่อนไหว แค่ภาพธรรมดา
Joe Maher

4
มันใช้งานได้ แต่ฉันต้องการตัวโหลดขนาดเล็กไม่ใช่ตัวโหลดขนาดภาพของฉัน
Ganpat Kaliya

2
ใช้งานได้ดีภาพเคลื่อนไหวจะมีขนาดเล็กจนกระทั่งไม่กี่มิลลิวินาทีก่อนที่ภาพที่ดาวน์โหลดจะปรากฏขึ้นภาพจะขยายใหญ่สุดและยืดออกไปไม่กี่มิลลิวินาทีจากนั้นภาพจะปรากฏ มีวิธีแก้ไขหรือไม่?
tinyCoder

2
ใช้romannurik.github.io/AndroidAssetStudio/index.html (เลือก "Launcher icon generator") เพื่อสร้าง 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

                }
            });
        }

สนุก. :)


ขอบคุณ .. สิ่งนี้ช่วยฉันได้มาก :)
Zohair

2
เยี่ยมมาก! ทางออกที่ดีที่สุดสามารถใช้ในบริบทต่างๆได้ :)
VVZen

7
จริงๆแล้วคุณควรให้ความสนใจกับการอ้างอิงที่อ่อนแอและประกาศCallback objectด้วยวิธีนี้เพื่อหลีกเลี่ยงการรวบรวมขยะ (มิฉะนั้น 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

ใครก็ตามที่สับสนกับศัพท์แสง Progress Loader คือ Progress Bad
Joe Maher

2
คุณพลาดที่จะเพิ่มคลาส RoundedTransformation คลาสนี้อยู่ที่gist.github.com/aprock/6213395
Md. Sajedul Karim

3

ขออภัย Picasso ไม่สนับสนุนตัวยึดตำแหน่งแบบเคลื่อนไหว

วิธีหนึ่งที่คุณสามารถแก้ไขปัญหานี้ได้คือการวาง ImageView ของคุณใน FrameLayout โดยมีภาพเคลื่อนไหวที่วาดได้อยู่ด้านล่าง วิธีนี้เมื่อ Picasso โหลดภาพมันจะโหลดที่ด้านบนสุดของตัวยึดตำแหน่งแบบเคลื่อนไหวทำให้ผู้ใช้ได้รับเอฟเฟกต์ที่ต้องการ

หรือคุณสามารถโหลดภาพที่เป็นเป้าหมาย จากนั้นคุณจะมีแถบความคืบหน้าแสดงตามค่าเริ่มต้นและเมื่อเรียกเมธอด onBitmapLoaded คุณสามารถซ่อนและแสดงภาพได้ คุณสามารถดูการใช้งานเบื้องต้นได้ที่นี่


3
ปิกัสโซไม่สนับสนุนเคลื่อนไหวตัวยึด คุณเขียนไฟล์อนิเมชั่นที่วาดได้ (รวมถึงรายการแอนิเมชั่นที่มีหลายรายการแทนรูปภาพแต่ละภาพในแอนิเมชั่น) คุณฟีดไฟล์นั้นไปยังออบเจ็กต์ AnimationDrawable ใหม่แล้วส่งต่อไปยัง placeHolder () ในตัวสร้างตัวโหลด Picasso
Odaym

1

เพียงเพิ่มแอตทริบิวต์รูปร่างในคำตอบของ 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);

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. ตั้งค่า scaleType ของ image_view เป็น "CENTER_INSIDE"


0

ฉันทำให้มันทำงานในลักษณะต่อไปนี้:

  1. สร้าง drawable (พบที่ไหนสักแห่งบนอินเทอร์เน็ต) และวางไว้ใน 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 ด้วยพารามิเตอร์ต่อไปนี้โดยที่โปสเตอร์และสปินเนอร์อ้างอิงถึง ImageView และ ProgressBar:

    // กำหนดเป้าหมายเพื่อแสดง / ซ่อน ProgressBar บน 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. ผลลัพธ์จะเป็นเช่นนั้นเมื่อโหลด - วงกลมกำลังหมุน (ขออภัยสำหรับภาพหน้าจอนี้ แต่ภาพปรากฏเร็วเกินไป): ScreenShot


0

สำหรับใครก็ตามที่พยายามใช้เทคนิคของ DBragion: ตรวจสอบให้แน่ใจว่าคุณมี Picasso เวอร์ชันล่าสุดไม่เช่นนั้นจะไม่หมุน ของฉันใช้ไม่ได้จนกว่าฉันจะใช้เวอร์ชัน 2.5.2

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

6
นี่ควรเป็นความคิดเห็นใต้คำตอบดังกล่าว
Ojonugwa Jude Ochalifu

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)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.