[Android] 이미지 라이브러리 Picasso 사용하기 ( Using the image loader library Picasso)

[Android] 이미지 로드 라이브러리 Picasso 사용하기 - ( # Transform )

image loader library Picasso tutorial

   이미지 로드 라이브러리란?

JAVA에서 네트워크에서 이미지를 가져오려면 네트워크 관련 소스를 이용하여 받아와야 한다. 그리고 이미지 캐싱, 로드 실패시 처리, 가져온 이미지 프로세싱 등등의 작업을 이미지 로드 라이브러리를 통하여 해결할 수 있다.

이외의 다양한 이미지 로드 라이브러리에 대한 정보는 아래에 자세히 정리가 되어있다.

▷ http://d2.naver.com/helloworld/429368

   Picasso 라이브러리 추가하기

1. Picasso 다운로드 페이지 - http://square.github.io/picasso/

▷ Picasso jar 직링크 - http://repo1.maven.org/maven2/com/squareup/picasso/picasso/2.5.2/picasso-2.5.2.jar

2. Android Studio에 Picasso 라이브러리 추가하기 이전 포스트 참고 

▷  http://dwfox.tistory.com/31

   Picasso Android 사용 방법

1. Internet Permission 

인터넷에 대한 권한을 Manifest파일에 추가하여 네트워크에 접근 가능하도록 한다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tistory.dwfoxpicassoexample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.. Picasso 기본 사용

layout의 ImageView를 추가 하거나 소스상에서 ImageView 를 생성하여 Picasso를 적용하도록 한다.

ImageView picassoImageView = (ImageView) findViewById(R.id.picassoImageView);
Picasso.with(this)
        .load("https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
        .into(picassoImageView);

기본적으로 구글의 로고 이미지 주소를 가져오도록 해본다.

위와 같이 이미지 별다는 네트워크 소스 없이  ImageView에서 네트워크상의 이미지를 가져온다.

   Picasso 기본이미지 설정

이미지 로드전 또는 로드에 실패하면 별도의 이미지를 지정하여 ImageView에 나오도록 지정할 수 있다.

placeholder를 추가하여 아래와 같이 지정된 이미지를 넣어 두도록 한다.

Picasso.with(this)
        .load("https://dwfox.tistory.com")
        .placeholder(R.drawable.dwfox)
        .into(picassoImageView);

   Picasso 기본이미지 크기 조절 (Resize)

이미지 로드전 또는 로드에 실패하면 별도의 이미지를 지정하여 ImageView에 나오도록 지정할 수 있다.

큰 이미지를 그대로 로드 하면 OutOfMemory를 발생시킬 수 있으므로 필요한 사이즈로 리사이즈하여 사용하도록 한다.

Picasso.with(this)
        .load("https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
        .placeholder(R.drawable.dwfox)
        .resize(50,50)
        .into(picassoImageView);

이미지 사이즈가 직사각형에서 50,50 의 정사각형으로 리사이즈 되어 이미지가 늘어났다.

또한, 272x92 사이즈를 50x50의 사이즈로 줄여 이미지의 계단현상이 눈으로 볼 수 있을 정도록 발생하였다.

이미지 크기를 ImageView 크기에 맞게 적절하게 수정하도록 한다.

   Picasso Transformation을 이용한 크기 조절 (Resize)

기본 Resize시 비율과 상광없이 resize를 하게 되므로 비율에 따른 이미지를 resize할 수 없는데

transformation을 이용하여 reszie를 직접 하도록 하면 비율에 다라 조절 할 수 있다.

1. 아래의 PicassoTransformations를 추가한다.

public class PicassoTransformations {

    public static int targetWidth = 200;

    public static Transformation resizeTransformation = new Transformation() {
        @Override
        public Bitmap transform(Bitmap source) {
            double aspectRatio = (double) source.getHeight() / (double) source.getWidth();
            int targetHeight = (int) (targetWidth * aspectRatio);
            Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
            if (result != source) {
                source.recycle();
            }
            return result;
        }

        @Override
        public String key() {
            return "resizeTransformation#" + System.currentTimeMillis();
        }
    };
}

2. 기본 resize 대신 아래와 같이 Transformation을 이용하여 Resize를 하도록 한다.

PicassoTransformations.targetWidth = 50;
Picasso.with(this)
        .load("https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
        .placeholder(R.drawable.dwfox)
        .transform(PicassoTransformations.resizeTransformation)
        .into(picassoImageView);

이미지의 계단현상이 발생할 정도로 이미지가 줄었지만 비율은 유지하는 것을 볼 수 있다.

   Picasso 이미지 캐싱과 저장 정책 설정

기본 이미지 라이브러리는 이미지 캐싱과 저장의 이점으로 사용하게 되는 

특별하게 이미지 캐싱과 저장을 하지 않아야 하는 경우 아래와 같은 옵션으로 저장과 캐싱을 방지 할 수 있다.

Picasso.with(this)
        .load("https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
        .placeholder(R.drawable.dwfox)
        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
        .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE)
        .resize(50, 50)
        .into(picassoImageView);