안드로이드 스튜디오에 Picasso(피카소) 라이브러리 추가하는 방법 완벽 가이드

Picasso 라이브러리란?

Picasso 예제를 살펴보기 전에 먼저 Picasso에 대해 간단히 알아보겠습니다. Picasso는 Square Inc.가 개발한 안드로이드용 이미지 처리 라이브러리입니다. 과거에는 서버에서 이미지를 가져오거나 이미지를 처리하기 위해 길고 복잡한 코드를 직접 작성해야 했지만, 이러한 과정을 최적화하기 위해 Picasso가 등장했습니다.

이 글에서는 안드로이드 스튜디오 프로젝트에 Picasso 라이브러리를 통합하는 방법을 단계별로 알아봅니다.

1단계: 새 프로젝트 생성

안드로이드 스튜디오에서 File → New Project를 선택하고, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 새 프로젝트를 만듭니다.

2단계: build.gradle에 의존성 추가

앱 수준의 build.gradle 파일에 다음 코드를 추가합니다.

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    implementation 'com.squareup.picasso:picasso:2.71828'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

dependencies 블록에 implementation 'com.squareup.picasso:picasso:2.71828' 한 줄만 추가하면 Picasso 라이브러리를 사용할 준비가 끝납니다. 코드를 추가한 후 반드시 Sync Now를 클릭해 프로젝트를 동기화하세요.

3단계: 레이아웃 XML 작성

res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent"
    android:layout_height = "match_parent">
<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:gravity = "center"
    android:orientation = "vertical">
    <ImageView
        android:id = "@+id/imageView"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

이 레이아웃은 화면 중앙에 ImageView 하나를 배치하는 단순한 구조입니다.

4단계: MainActivity.java 코드 작성

src/MainActivity.java 파일에 다음 코드를 추가합니다.

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.Toast;
import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imageView=findViewById(R.id.imageView);
        Picasso.with(this)
        .load("https://www.tutorialspoint.com/images/tp-logo-diamond.png")
        .placeholder(R.mipmap.ic_launcher)
        .resize(400, 400)
        .centerCrop()
        .rotate(0)
        .into(imageView, new Callback() {
            @Override
            public void onSuccess() {
                Toast.makeText(getApplicationContext(), "Fetched image from internet", Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onError() {
                Toast.makeText(getApplicationContext(), "An error occurred", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Picasso 주요 메서드 살펴보기

위 코드에서 사용된 Picasso의 다양한 메서드는 아래와 같은 역할을 합니다.

• with() — Picasso 라이브러리에 컨텍스트(Context)를 전달합니다.

• load() — 불러올 이미지의 경로를 지정합니다. 로컬 디렉터리든 인터넷상의 URL이든 모두 가능합니다.

• placeholder() — 이미지가 로딩되는 동안 표시할 임시 이미지를 설정합니다.

• resize() — 원하는 너비와 높이 값으로 이미지 크기를 조절할 수 있습니다.

• centerCrop() — ImageView에 맞춰 이미지를 중앙 기준으로 잘라냅니다(crop).

• rotate() — 이미지를 0도부터 360도까지 회전시킬 수 있습니다.

• into() — 이미지를 보여줄 대상 뷰(ImageView)를 지정하며, 아래 두 가지 콜백을 함께 사용할 수 있습니다.

• onSuccess() — 이미지가 성공적으로 다운로드되었을 때 실행할 동작을 정의합니다.

• onError() — 이미지 다운로드에 실패했을 때 실행할 동작을 정의합니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. 안드로이드 스튜디오에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 Run 아이콘을 클릭하세요. 실행 옵션 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 기본 화면이 표시됩니다.

위 결과 이미지를 보면, resize()에서 지정한 크기에 맞춰 이미지가 잘려서(centerCrop) 표시된 것을 확인할 수 있습니다. 이제 centerCrop()과 resize() 메서드를 제거하고 실행하면, 아래와 같이 이미지가 기본 크기 그대로 표시됩니다.

이처럼 Picasso를 활용하면 단 몇 줄의 코드만으로 인터넷 이미지를 불러오고, 리사이징·크롭·회전 같은 다양한 이미지 처리를 손쉽게 구현할 수 있습니다.