() translation by (you can also view the original English article)
짧막한 사용법으로, 우리는 인기있는 안드로이드 이미지 라이브러리인, Picasso(피카소)에 대해 알아볼 것입니다. 이 라이브러리는 무척 단순하고, 실용적인 라이브러리이고 Square에 의해 개발되었습니다. 당신의 안드로이드 프로젝트 안에서 이미지를 사용하는 데에 무척 유용할 것입니다.
1. 소개
Picasso(피카소)는 안드로이드를 위한 이미지 라이브러리입니다. 이것은 Square에 의해 만들어졌고, 이미지를 불러오거나 처리할 수 있도록 해줍니다. 피카소는 이미지를 디스플레이하는 과정을 외부 장소를 통해 단순화 시킵니다. 대부분 이 유용한 라이브러리를 이용하면 고작 몇 줄로 이미지를 로딩할 수 있게 합니다.
피카소는 외부 링크로 저장된 이미지를 디스플레이하는 데 아주 효과적입니다. 이 라이브러리는 이미지 로딩 처리 과정의 각 단계를 다루는 데, 초기 HTTP 요청부터 이미지를 캐싱하는 데 까지의 범위를 아우릅니다. 이러한 것을 스스로 직접 구현하는 것은 꽤 장황한 코드가 될 수 있습니다. 우리는 이번 짧막한 사용법을 통해, 몇 가지의 활용사례를 알아보겠습니다.
2. 설치
우선 Picasso(피카소) 사이트에서 JAR 파일을 다운로드 받으세요. 일반적인 방법대로 JAR파일의 설치를 완료하세요. 만약 JAR 파일 설치법을 모르시면, Shane Condor와 Lauren Darcey가 제작한 이 튜토리얼을 참고하세요.
만약 현재 안드로이드 스투디오를 쓰고 있다면, build.gradle 파일 안에 dependency 코드 안에 compile 'com.squareup.picasso:picasso:2.3.3' 을 추가하면 자동적으로 설치할 수 있습니다.
3. 실습하기
1 단계 : 새 프로젝트 생성하기
당신의 IDE에서 원하는 새 프로젝트를 생성하세요. 만약 안드로이드 스투디오를 사용한다면 Blank Activity (빈 프로젝트)를 선택하세요.
2 단계 : 이미지 위젯
레이아웃 파일 중 메인 액티비티를 엽니다. 레이아웃 안에 ImageView 를 추가합니다. 많은 줄의 거창한 코딩을 할 필요는 없습니다. 밑에 정도로 코딩해도 괜찮습니다.
1 |
<ImageView
|
2 |
android:layout_width="wrap_content" |
3 |
android:layout_height="wrap_content" |
4 |
android:id="@+id/imageView" |
5 |
android:layout_alignParentTop="true" |
6 |
android:layout_centerHorizontal="true" /> |
3 단계 : Picasso(피카소) 추가하기
메인 액티비티 파일을 찾으세요. onCreate 메소드 안에 아래 코드를 추가하세요.
1 |
ImageView imageView = (ImageView) findViewById(R.id.imageView); |
2 |
|
3 |
Picasso.with(this) |
4 |
.load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg") |
5 |
.into(imageView); |
우선 1 번째 줄, 레이아웃 파일 안에 ImageView 인스턴스에 참조를 받습니다. 그러면 우리는 Picasso(피카소) 라이브러리를 사용하여 ImageView 안으로 이미지를 로드하게 됩니다. 우선 with 메소드를 호출하여 문맥을 구체화합니다. 그런 후 load 메소드를 호출하고, 불러올 이미지의 경로를 넣어줍니다. 이번 경우에는 URL을 넣었습니다. 마지막으로, 가져온 이미지를 어느 곳에 보여주는 경로를 into 메소드 안에 적습니다. 여기서는 imageView 로 보내도록 했습니다.
사용하는 IDE는 아마 Picasso(피카소) 라이브러리를 임포트 했는지 물어볼 것입니다. 직접 임포트 시키길 원하는 분은 밑에 코드를 액티비티 클래스 가장 위에 부분에 추가하세요.
1 |
import com.squareup.picasso.Picasso; |
4 단계 : 승인
Picasso(피카소)를 제대로 작동하기 위해서, 자신의 프로젝트의 manifest 파일에 <uses-permission android:name="android.permission.INTERNET" />을 꼭 넣어줍시다.
5 단계 : 빌드 그리고 실행하기
꽤 많이 왔네요. 만약 어플리케이션을 빌드해서 실행하는 중이라면, 화면에서 이미지가 로드되는 것을 보고싶을 것입니다.
4. 예제
Picasso(피카소)는 좀 더 많은 유용한 기능을 가지고 있습니다. 밑의 예를 들면, 이미지 뷰 안에서 이미지가 출력되기 전에 이미지 크기를 조절하여 외부 이미지를 불러올 수 있습니다.
1 |
Picasso.with(this) |
2 |
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg) |
3 |
.resize(100, 100) |
4 |
.into(imageView) |
또한 사진회전같은 사진 수정기능도 지원하고 있습니다. 다음에 나오는 코드는, 외부 이미지를 불러오고, 이미지 뷰 안에서 180 도 회전되어 출력하는 코드입니다.
1 |
Picasso.with(this) |
2 |
.load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg") |
3 |
.rotate(180) |
4 |
.into(imageView); |
만약 당신의 어플리케이션이 외부 이미지에 의존하고 있다면, 플레이스홀더 폼 안에 대비책에 관한 코드를 추가하는 것이 중요합니다. 플레이스홀더 이미지는 Picasso(피카소)가 외부 이미지 불러오기를 완료할 때까지 자신의 이미지를 교체하여 보여줍니다.
1 |
Picasso.with(this) |
2 |
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg) |
3 |
.placeholder(R.drawable.image_name) |
4 |
.into(imageView); |
Picasso(피카소)는 두 가지 플레이스홀더 이미지 타입을 지원합니다. 우리는 이미 placeholder 메소드가 어떻게 작동하는 지 봤지만, error 메소드를 통해 플레이스홀더 이미지를 나타낼 수도 있습니다. Picasso(피카소)는 외부 이미지를 세 번 다운로드 시도할 것이고, 만약 불러오기에 실패한다면 에러 플레이스홀더를 게시할 것 입니다.
1 |
Picasso.with(this) |
2 |
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg) |
3 |
.error(R.drawable.image_name) |
4 |
.into(imageView); |
아래의 코드는 placeholder 메소드와 error 메소드가 결합된 형태를 보여주고 있습니다
1 |
Picasso.with(this) |
2 |
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg) |
3 |
.placeholder(R.drawable.image_name_default) |
4 |
.error(R.drawable.image_name_error) |
5 |
.into(imageView); |
결론
Picasso(피카소)는 사용하기 아주 심플해서, 이 사용법을 읽은 당신의 귀중한 30분의 가치를 할 것입니다. 만약 어플리케이션을 만들고 있어서 자주 이미지를 불러올 일이 생긴다면, Picasso(피카소)는 당신의 삶을 좀 더 편리하게 만들어 줄 것입니다.
