728x90
반응형
이번에 공부할 내용은 안드로이드에 많은 이미지 로드 라이브러리가 있지만 그중 가장 유명하고 사용이 많이 되는 Glide 라이브러리를 공부해보겠다.
# 글라이드(Glide)란?
공식문서 원본
Glide is a fast and efficient image loading library for Android focused on smooth scrolling. Glide offers an easy to use API, a performant and extensible resource decoding pipeline and automatic resource pooling.
Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs. Glide includes a flexible api that allows developers to plug in to almost any network stack. By default Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug in to Google’s Volley project or Square’s OkHttp library instead.
Glide’s primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.
공식문서 번역본
Glide는 부드러운 스크롤에 중점을 둔 Android용 빠르고 효율적인 이미지 로딩 라이브러리입니다. Glide는 사용하기 쉬운 API, 성능이 뛰어나고 확장 가능한 리소스 디코딩 파이프라인 및 자동 리소스 풀링을 제공합니다.
Glide는 비디오 스틸, 이미지 및 애니메이션 GIF 가져오기, 디코딩 및 표시를 지원합니다. Glide에는 개발자가 거의 모든 네트워크 스택에 연결할 수 있는 유연한 API가 포함되어 있습니다. 기본적으로 Glide는 사용자 정의 HttpUrlConnection 기반 스택을 사용하지만 대신 Google의 Volley 프로젝트 또는 Square의 OkHttp 라이브러리에 플러그인하는 유틸리티 라이브러리도 포함합니다.
Glide의 주요 초점은 모든 종류의 이미지 목록을 가능한 한 부드럽고 빠르게 스크롤하는 것이지만 Glide는 원격 이미지를 가져오고, 크기를 조정하고, 표시해야 하는 거의 모든 경우에 효과적입니다.
공식문서에서 설명하는 Glide는 위와 같이 설명하고 있다.
간단하게 정리 하자면
- 부드러운 스크롤에 중점을 둔 안드로이드용 이미지 로딩 라이브러리이다.
- 사용하기 쉽고 빠르고 효율적이며 성능이 뛰어나다.
- 이미지, 애니메이션, GIF 등의 다양한 API를 사용할 수 있다.
# 사용법
## 의존성 추가
최신 버전은 Glide Git에서 보고 버전을 입력해주면 된다.
repositories {
google()
mavenCentral()
}
dependencies {
implementation 'com.github.bumptech.glide:glide:4.14.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.14.1'
}
## 외부 통신을 통해 이미지를 가져오고 싶다면 인터넷 권한 추가
매니페스트 파일에 권한을 추가해준다.
※ android.permission.ACCESS_NETWORK_STATE의 권한은 필수는 아니지만 네트워크가 불안정하거나 비행기 모드를 처리하는 데 Glide가 대처할 수 있도록 도움을 주기 때문에 선택 사항이다
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
## 본격적인 Glide 사용법
Glide.with(context) // View,Fragment,Activity로 부터 Context를 넣어준다
.load(URL) // 이미지 URL 혹은 Drawable경로
.into(imageView) // 이미지를 보여줄 View
### 기본 함수
- with : Context, View, Fragment, FragmentActivity를 넣을 수 있다.
- load : URL, File, Bitmap, String, resourceId, Drawable 등 여러 이미지를 가져올 수 있다.
- into : 이미지를 보여 줄 ImageView를 지정한다.
### 이외 대표적인 함수
1. override()
- 이미지 사이즈 조절 가능
- 사이즈를 조절하며 이미지 로딩 속도를 최적화할 수 있다.
- 메모리를 절약하고 싶을 때 유용하게 사용된다.
Glide.with(this)
.load("이미지 URL or Drawable")
.override(50, 50)
.into(imageView)
2. placeholder()
- 이미지가 로딩하는 동안 보일 이미지를 정해준다.
- resourceId나 drawable이 들어간다.
Glide.with(this)
.load("이미지 URL or Drawable")
.placeholder(R.drawable.loading)
.into(imageView)3. error()
- 이미지 로딩에 실패했을 경우 이미지를 지정해줄 수 있다.
Glide.with(this)
.load("이미지 URL or Drawable")
.error(R.drawable.error)
.into(imageView)
4. asGif()
- gif 이미지를 로딩할 수 있다.
Glide.with(this)
.asGif()
.load("gif 이미지 url")
.into(imageView)
5. circleCrop()
- 이미지를 동그랗게 자를 수 있다.
Glide.with(this)
.load("이미지 URL or Drawable")
.circleCrop()
.into(imageView)# 예제 결과
# 예제 코드
<MainActivity>
package com.example.glide
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import com.bumptech.glide.Glide
import com.example.glide.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
lateinit var binding :ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
with(binding){
// 기본
Glide.with(this@MainActivity)
.load(R.drawable.compose2)
.into(image1)
// 이미지 사이즈 조절
Glide.with(this@MainActivity)
.load(R.drawable.compose2)
.override(50, 50)
.into(image2)
// 이미지 로딩 사진
Glide.with(this@MainActivity)
.load("http://blog.jinbo.net/attach/615/200937431.jpg")
.placeholder(R.drawable.loading)
.into(image3)
// 이미지 에러 이미지
Glide.with(this@MainActivity)
.load("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.flaticon.com%2Fkr%2Ffree-icon%2Ferror_5741333&psig=AOvVaw2NTY-Amn6OiegIeOWP2mHj&ust=1665394659369000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPCVyuPs0voCFQAAAAAdAAAAABAD")
.error("https://cdn-icons-png.flaticon.com/512/5741/5741333.png")
.into(image4)
// GIF 로딩
Glide.with(this@MainActivity)
.asGif()
.load("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/300px-Rotating_earth_%28large%29.gif")
.into(image5)
// 이미지 동그랗게
Glide.with(this@MainActivity)
.asGif()
.load("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/300px-Rotating_earth_%28large%29.gif")
.circleCrop()
.into(image6)
}
}
}<activity_main_xml>
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayoutCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="기본"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayoutCompat2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/image2"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="override"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayoutCompat3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayoutCompat">
<ImageView
android:id="@+id/image3"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="placeholder"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayoutCompat4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/linearLayoutCompat3"
app:layout_constraintTop_toBottomOf="@+id/linearLayoutCompat2">
<ImageView
android:id="@+id/image4"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="error"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayoutCompat5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayoutCompat3">
<ImageView
android:id="@+id/image5"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="asGif"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayoutCompat4">
<ImageView
android:id="@+id/image6"
android:layout_width="200dp"
android:layout_height="200dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="circleCrop"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
깃허브
https://github.com/JiSeokYeom/GlideEx.git
GitHub - JiSeokYeom/GlideEx
Contribute to JiSeokYeom/GlideEx development by creating an account on GitHub.
github.com
참고자료
https://bumptech.github.io/glide/
https://hanyeop.tistory.com/135
반응형
