Android - 인터넷에서 이미지를 로드하여 표시하기

이전에서는 웹 서비스에서 데이터를 가져와, 응답을 Kotlin 객체로 파싱하는 방법을 배웠다. 

이 지식을 기반으로, 웹 URL 에서 사진을 로드하고 표시한다. 

또한 RecyclerView를 빌드하고, 이 뷰를 사용해 개요 페이지에 이미지 Grid 를 표시하는 방법을 다시 확인한다.

기본 요건

• 프래그먼트를 만들고 사용하는 방법
• Retrofit 라이브러리와 Moshi 라이브러리를 사용하여 REST 웹 서비스에서 JSON을 검색하고 이 데이터를 Kotlin 객체로 파싱하는 방법
• RecyclerView로 그리드 레이아웃을 구성하는 방법
• Adapter, ViewHolder, DiffUtil의 작동 방식

학습할 내용

• Coil 라이브러리를 사용하여 웹 URL에서 이미지를 로드하고 표시하는 방법
• RecyclerView 및 그리드 어댑터를 사용하여 이미지 그리드를 표시하는 방법
• 이미지를 다운로드하고 표시할 때 발생할 수 있는 오류를 처리하는 방법

빌드할 항목

• 화성 데이터에서 이미지 URL을 가져오도록 MarsPhotos 앱을 수정하고 Coil을 사용해 이 이미지를 로드하고 표시합니다.
• 앱에 로드 애니메이션과 오류 아이콘을 추가합니다.
• RecyclerView를 사용하여 화성 이미지의 그리드를 표시합니다.
• RecyclerView에 상태 및 오류 처리를 추가합니다.

인터넷 이미지를 표시하는 것은 간단해 보이지만, 제대로 작동하려면 엔지니어링이 상당히 필요합니다.

이미지를 다운로드 하고, 내부적으로 저장 -> 압축 형식에서 Android가 사용할 수 있는 이미지로 디코딩 해야합니다.

또한 UI가 응답성을 유지하기 위해 이 모든 작업은 우선순위가 낮은 백그라운드 스레드에서 이루어져야 한다.

그리고 최상의 네트워크 및 CPU 성능을 위해, 둘 이상의 이미지를 한번에 가져오고, 디코딩 하는 것이 좋습니다.

Coil 이라는 라이브러리를 사용하여, 이미지 다운로드, 버퍼링 및 디코딩 하고 캐시 까지 할 수 있다. 

Coil 에는 2가지가 필요하다. * 로드하고 표시할 이미지의 URL, * 이미지를 실제로 표시하는 ImageView 객체.

이 코드랩의 App은, 이미지를 그리드로 보여주는 페이지를 만든다. 

이번 App은, Coil 라이브러리를 사용하여 이미지를 로드해 표시하고, RecyclerView 를 사용하여 이미지의 그리드 레이아웃을 만든다. 또한, App은 네트워크 오류를 적절히 처리한다. 

 

Coil 항목 추가 방법 

1. build.gradle (Module:app) 의 dependencies 에,  아래와 같이 추가한다. 그리고 'Sync'

 // Coil
    implementation "io.coil-kt:coil:1.1.1"

2. Coli 라이브러리는 mavenCentral() 저장소에서 호스팅 되어 제공된다.

build.gradle(Project: MarsPhotos) 의 맨 위 repositories 블록에 mavenCentral() 을 추가한다. 그리고 'Sync' , Rebuild.

repositories {
   google()
   jcenter()
   mavenCentral()
}

 

Binding Adapter 사용하기.

BindingAdapter는, View의 맞춤 속성을 위한 맞춤 setter를 만드는데 사용되는 메서드이다.

** 예를들어, 일반적으로 XML에서 ... android:text="Sample Text" 를 사용하여 속성을 설정하는 경우, Android 시스템은 setText(String: text) 라는 메서드를 통해 설정되는 text 속성과 같은 이름의 setter를 자동으로 찾는다. .setText(String:text) 는, Android 프레임 워크에서 제공하는 일부 뷰의 setter 메서드이다. BindingAdapter를 사용하여 유사한 동작을 맞춤 설정 할 수 있다. 

EX ) 

1. 먼저 XML 의 ImageView에 이미지를 할당한다. 이번 예시에서는 imageUrl 이다. 

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:imageUrl="@{product.imageUrl}"/>

코드를 추가하지 않으면, 시스템이 ImageView에서 setImageUrl(String) 메서드를 찾으며, 찾지 못해 오류가 발생한다.

프레임 워크에서 제공되지 않는 맞춤 속성이기 때문이다. 

app:imageUrl 속성을 구현하여, ImageView로 설정하는 방법을 만들어야한다.

이렇게 하려면, BindingAdapter를 사용한다.

@BindingAdapter("imageUrl")  // 해당 주석은 속성 이름을 매개변수로 한다. 
fun bindImage(imgView: ImageView, imgUrl: String?) { // 첫번째 매개변수: target view 유형, imgUrl은 속성에 설정되는 값이다.
    imgUrl?.let {
        // Load the image in the background using Coil. 
        // 함수내부에서 Coli 라이브러리는, UI 스레드에서 이미지를 로드하여 ImageView로 설정한다.
        }
    }
}