피카소의 애니메이션 로딩 이미지


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

32
@DBragion은 훌륭하게 작동하지만 큰 이미지의 경우 호출됩니다. 너비와 높이를 32x32 픽셀과 같은 숫자로 고정 할 수 있습니까?
m3hdi 2015-06-15

9
작동하지 않고 애니메이션이 표시되지 않습니다. 그냥 일반 이미지
조 마 헤르

4
그것은 작동하지만 난 나의 이미지 뷰의 크기 로더 작은 로더 원하는
Ganpat Kaliya

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

                }
            });
        }

즐겨. :)


덕분에 ..이 :) 많이 도와주었습니다
Zohair

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

전문 용어 혼란 누군가는 진행 로더가 진행 나쁜입니다
조 마 헤르

2
RoundedTransformation 클래스를 추가하지 못했습니다. 이 클래스는 여기 gist.github.com/aprock/6213395
. 메릴랜드 Sajedul 카림

3

안타깝게도 Picasso는 애니메이션 자리 표시자를 지원하지 않습니다.

이 문제를 해결할 수있는 한 가지 방법은 애니메이션 드로어 블이 아래에있는 FrameLayout에 ImageView를 배치하는 것입니다. 이렇게하면 Picasso가 이미지를로드 할 때 애니메이션 된 자리 표시 자 위에로드되어 사용자에게 의도 한 효과를 제공합니다.

또는 이미지를 Target에 로드 할 수 있습니다. 그러면 기본적으로 진행률 표시 줄이 표시되고 onBitmapLoaded 메서드가 호출되면이를 숨기고 이미지를 표시 할 수 있습니다. 여기 에서 기본적인 구현을 볼 수 있습니다.


3
Picasso 애니메이션 자리 표시자를 지원합니다. 애니메이션 드로어 블 파일을 작성합니다 (애니메이션의 각 이미지를 나타내는 여러 항목이있는 애니메이션 목록 포함). 해당 파일을 새 AnimationDrawable 개체에 공급 한 다음 Picasso 로더 생성자의 placeHolder ()에 전달합니다.
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. image_view의 scaleType을 "CENTER_INSIDE"로 설정합니다.


0

다음과 같은 방식으로 작동했습니다.

  1. 드로어 블 (인터넷 어딘가에 있음)을 만들고 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

DBragion의 기술을 사용하려는 사람 : 최신 버전의 Picasso가 있는지 확인하십시오. 그렇지 않으면 작동하지 않습니다. 버전 2.5.2를 사용할 때까지 내 것이 작동하지 않았습니다.

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

6
이 말했다 대답에서 코멘트이어야한다
Ojonugwa 유 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.