Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

안드로이드에서 Picasso로 URL 이미지를 ImageView에 불러오는 방법 완벽 가이드

이 튜토리얼에서는 Picasso 라이브러리를 사용하여 인터넷상의 이미지 URL을 안드로이드 앱의 ImageView에 간편하게 로드하는 방법을 단계별로 알아봅니다.

Picasso는 Square에서 개발한 강력한 이미지 다운로드 및 캐싱 라이브러리입니다. 복잡한 네트워크 처리 코드 없이 한 줄의 코드로 URL 이미지를 화면에 표시할 수 있어 안드로이드 개발자들에게 널리 사용됩니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File ⇒ New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력하여 프로젝트를 만듭니다.

2단계: Picasso 라이브러리 의존성 추가

프로젝트 패널에서 Gradle Scripts → build.gradle (Module: app) 파일을 열고 dependencies 블록에 아래 의존성을 추가한 후, 상단에 나타나는 "Sync now" 버튼을 클릭해 동기화합니다.

implementation 'com.squareup.picasso:picasso:2.5.2'

참고: 최신 버전의 Picasso(2.71828 이상)를 사용하는 경우 코드 호출 방식이 Picasso.with(this) 대신 Picasso.get()으로 변경되었으니 사용 중인 버전에 맞게 적용하세요.

3단계: 레이아웃 XML 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. TextView와 ImageView를 포함한 기본적인 세로(Vertical) LinearLayout 구조입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load ImageView by URL"
        android:textStyle="bold"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="fill_parent"
        android:layout_height="300dp"
        android:layout_marginTop="16dp" />

</LinearLayout>

4단계: MainActivity 자바 코드 작성

src/MainActivity.java 파일에 아래 코드를 추가합니다. 핵심은 마지막 줄의 Picasso.with(this).load(url).into(imageView) 부분으로, 이 한 줄만으로 URL 이미지를 비동기적으로 다운로드하여 ImageView에 표시할 수 있습니다.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_view);

        String url = "https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";

        Picasso.with(this).load(url).into(imageView);
    }
}

5단계: 인터넷 권한 설정

androidManifest.xml 파일에 아래 코드를 추가합니다. 외부 URL에서 이미지를 다운로드하려면 반드시 INTERNET 권한을 선언해야 하며, 이 권한이 누락되면 앱이 정상적으로 작동하지 않습니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher"
        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>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run(실행) 아이콘을 클릭하세요. 옵션 목록에서 모바일 기기를 선택하면 해당 기기에 앱이 설치·실행됩니다.

앱이 실행되면 지정한 URL의 이미지가 ImageView에 자동으로 로드되어 화면에 표시되는 것을 확인할 수 있습니다.

안드로이드에서 Picasso로 URL 이미지를 ImageView에 불러오는 방법 완벽 가이드

이처럼 Picasso를 활용하면 네트워크 통신, 스레드 처리, 캐싱 등 복잡한 과정을 신경 쓰지 않고도 몇 줄의 코드로 원격 이미지를 손쉽게 표시할 수 있습니다. 추가로 .placeholder(), .error() 등의 체인 메서드를 활용하면 이미지 로딩 중 표시할 임시 이미지나 오류 발생 시의 대체 이미지도 간편하게 지정할 수 있습니다.