آموزش Glide در کاتلین

سلام دوستان همیشگی در این سری از آموزش های برنامه نویسی اندروید به آموزش Glide در کاتلین (kotlin) می پردازیم همانطور که می دانید Glide یکی از بهترین کتابخانه های لودینگ عکس در اندروید هست و کمتر برنامه نویسی هست که با کتاب خانه Glide آشنایی نداشته باشد در ادامه نحوه استفاده از کتابخانه Glide را در اندروید استودیو و با استفاده از زبان کاتلین به شما آموزش خواهیم داد.

از نسخه 4 به بعد کتاب خانه Glide این کتاب خانه با compiler مجزا منشتر شد و همین این کتاب خانه را بین برنامه نویسان محبوب کرد و بخشی از این کتاب خانه به زبان c++ نوشته شده است و دیگر ویژگی این کتاب خانه annotation بیس بودن این کتاب خانه است.
اول از همه باید این کتاب خانه را به پروژه اضافه کنید برای اینکار کدهای زیر را در فایل گریدل قرار دهید.

implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

1 2	implementation 'com.github.bumptech.glide:glide:4.11.0' annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

بعد از اینکار باید دسترسی اینترنت را در Androidmanifest.xml همانند زیر قرار دهید.

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

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

در یک لایه یک Imageview یا AppCompatImageView قرار دهید ما همانند زیر این کار را در activiaty_main.xml انجام دادیم.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".MainActivity">
   <androidx.appcompat.widget.AppCompatImageView
      android:id="@+id/imageview"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_launcher_background"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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"

tools:context=".MainActivity">

<androidx.appcompat.widget.AppCompatImageView

android:id="@+id/imageview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher_background"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

در نهایت وارد Mainactivity.kt شده و همانند زیر عکس را از طریق url لود کنید.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      val media = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
      if (media !== null) {
         Glide.with(this)
         .load(media)
         .into(imageview)
         } else {
      imageview.setImageResource(R.drawable.ic_launcher_background)
      }
   }
}

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import com.bumptech.glide.Glide

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val media = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"

if (media !== null) {

Glide.with(this)

.load(media)

.into(imageview)

} else {

imageview.setImageResource(R.drawable.ic_launcher_background)

}

دقت کنید عکس بالا فیلتر است پس بهتر است از یک url عکس دیگر استفاده کنید و در بالا یک چکینگ ساده هم به منظور خالی نبودن url انجام شده است و در صورتی که url خالی باشد یک عکس پیشفرض برای آن تنظیم می شود.
خروجی کد بالا همانند زیر خواهد بود.

خب شاید بگید این کدهای که قرار دادیم چقدر ساده است برای دوستانی که به کدهای پیشرفته نیاز دارند کد زیر را نیز بررسی کنند.

val url = "put url here !" //1
Glide.with(this)  //2
    .load(url) //3
    .centerCrop() //4
    .placeholder(R.drawable.ic_image_place_holder) //5
    .error(R.drawable.ic_broken_image) //6
    .fallback(R.drawable.ic_no_image) //7
    .into(ivPhoto) //8

val url = "put url here !" //1

Glide.with(this) //2

.load(url) //3

.centerCrop() //4

.placeholder(R.drawable.ic_image_place_holder) //5

.error(R.drawable.ic_broken_image) //6

.fallback(R.drawable.ic_no_image) //7

.into(ivPhoto) //8

placeholder : قبل از اینکه عکس لود شود یک عکس در Imageview نمایش داده خواهد شد.
error : اگر عکس ناقص دریافت شود یک عکس پیشفرض نمایش داده می شود.
fallback : اگر ulr به هر دلیلی خالی باشد این عکس لود می شود.
یکم پیشرفته تر کتاب خانه Glide می توانید حالت کشینگ را فعال کنید تا عکس از حافظه داخلی از دفعات بعد لود شود.

Glide.with(this) //1
    .load(profilePicUrl)
    .placeholder(R.drawable.ic_profile_placeholder)
    .error(R.drawable.ic_profile_placeholder)
    .skipMemoryCache(true) //2
    .diskCacheStrategy(DiskCacheStrategy.NONE) //3
    .transform(CircleCrop()) //4
    .into(ivProfile)

Glide.with(this) //1

.load(profilePicUrl)

.placeholder(R.drawable.ic_profile_placeholder)

.error(R.drawable.ic_profile_placeholder)

.skipMemoryCache(true) //2

.diskCacheStrategy(DiskCacheStrategy.NONE) //3

.transform(CircleCrop()) //4

.into(ivProfile)

در بالا کشینگ غیر فعال شده است در واقع به صورت default این ویژگی روشن هست در بالا ما آن را حذف کردیم.
می توان کتابخانه Glide را با okhttp به پروژه اضافه کرد برای اینکار باید باید بخش گریدل را همانند زیر تغییر دهید.

kapt 'com.github.bumptech.glide:compiler:4.9.0'
implementation('com.github.bumptech.glide:okhttp3-integration:4.9.0') {
  exclude group: 'glide-parent'
}

kapt 'com.github.bumptech.glide:compiler:4.9.0'

implementation('com.github.bumptech.glide:okhttp3-integration:4.9.0') {

exclude group: 'glide-parent'

}

کد بالا را در گریدل خود بخش dependencies قرار دهید.
یک فایل گریدل دیگر نیز دارد آن را باز کرده و در بالای بالا خط زیر را قرار دهید.

apply plugin: 'kotlin-kapt'

1	apply plugin: 'kotlin-kapt'

و تمام فرق این بخش در این است که بخش request های network مربوط به گرفتن عکس از اینترنت glide با استفاده از کتابخانه okhttp انجام می شود.

موفق و پیروز باشید.

مطالعه بیشتر