MengKode Galeri Gambar Android App Dengan Glide

Februari 12, 2023Januari 17, 2023 falma.u99 android, dengan, galeri, gambar, glide, mengkode

1. Apa itu Glide?
Glideadalah sumber terbuka perpustakaan Android yang populer untuk memuat gambar, video, dan GIF animasi. Dengan Glide, anda dapat memuat dan menampilkan media dari berbagai sumber, seperti server jarak jauh atau sistem file lokal.

Secara default, Glide menggunakan penerapan khusus HttpURLConnection untuk memuat gambar melalui internet. Namun, Glide juga menyediakan plugin ke pustaka jaringan populer lainnya seperti Volleyatau OkHttp .

2. Jadi mengapa menggunakan glide?
Mengembangkan fungsi pemuatan dan tampilan media anda sendiri di Java bisa menjadi keribetan yang nyata: anda harus mengurus cache, decoding, mengelola koneksi jaringan, threading, exception, dan banyak lagi. Glide adalah perpustakaan yang mudah digunakan, terencana dengan baik, terdokumentasi dengan baik, dan benar-benar teruji yang dapat menghemat banyak waktu berharga anda-dan membuat anda sedikit sakit kepala.

Dalam tutorial ini, kita akan belajar tentang Glide 3 dengan membangun aplikasi galeri foto sederhana. Ini akan memuat gambar melalui internet dan menampilkannya sebagai thumbnail diRecyclerView, dan ketika pengguna mengklik gambar apapun, itu akan membuka kegiatan rinci yang berisi gambar yang lebih besar.

3. Membuat Proyek Studio Android
Jalankan Studio Android anda dan buatlah proyek baru dengan aktivitas kosong yang disebut MainActivity.

4. Mendeklarasi Ketergantungan
Setelah membuat proyek baru, tentukan dependensi berikut di build.gradle.

repositories {
mavenCentral() // jcenter() works as well because it pulls from Maven Central
}
dependencies {
// Glide
compile ‘com.github.bumptech.glide:glide:3.7.0’ // Recyclerview
compile ‘com.android.support:recyclerview-v7:25.1.1’
}
Atau dengan Maven:

com.github.bumptech.glide
glide
3.7.0
com.google.android
support-v4
r7

Pastikan anda menyelaraskan proyek anda setelah menambahkan ketergantungan Glide.

Perpustakaan Integrasi
Jika anda ingin menggunakan perpustakaan jaringan seperti OkHttp atau Volley di proyek anda untuk operasi jaringan, sebaiknya sertakan integrasi Glide khusus untuk perpustakaan yang anda gunakan (bukan yang default yang bundle HttpURLConnection).

Volley
dependencies { compile ‘com.github.bumptech.glide:glide:3.7.0’
compile ‘com.github.bumptech.glide:volley-integration:1.4.0@aar’
compile ‘com.mcxiaoke.volley:library:1.0.8’
}

OkHttp
dependencies { // okhttp compile ‘com.github.bumptech.glide:okhttp3-integration:1.4.0@aar’
compile ‘com.squareup.okhttp3:okhttp:3.2.0’ // okhttp compile ‘com.github.bumptech.glide:okhttp-integration:1.4.0@aar’
compile ‘com.squareup.okhttp:okhttp:2.2.0’
}

Anda bisa mengunjungi panduan perpustakaan integrasi resmi Glide untuk informasi lebih lanjut.

5. Tambahkan Izin Internet
Karena Glide akan melakukan permintaan jaringan untuk memuat gambar melalui internet, kita perlu memasukkan izin INTERNET di AndroidManifest.xml kami.

6. Membuat Layout
Kita akan mulai dengan menciptakanRecyclerView.

Membuat Custom Item Layout
Berikutnya, mari kita membuat layout XML yang akan digunakan untuk setiap item (ImageView) dalam RecyclerView.

Setelah kita membuat layout, langkah selanjutnya adalah membuat RecyclerView adaptor untuk mengisi data. Sebelum kita melakukan itu, mari kita buat model data sederhana kita.

7. Membuat Model Data
Kita akan mendefinisikan model data sederhana untuk RecyclerView kita. Model ini Bisa dipasangkan untuk pengangkutan data berkinerja tinggi dari satu komponen ke komponen lainnya. Dalam kasus kami, data akan diangkut dari SpaceGalleryActivityuntuk SpacePhotoActivity.

import android.os.Parcel;
import android.os.Parcelable;
public class SpacePhoto implements Parcelable { private String mUrl;
private String mTitle; public SpacePhoto(String url, String title) { mUrl = url; mTitle = title;
} protected SpacePhoto(Parcel in) { mUrl = in.readString(); mTitle = in.readString();
} public static final Creator CREATOR = new Creator() { @Override public SpacePhoto createFromParcel(Parcel in) { return new SpacePhoto(in); } @Override public SpacePhoto[] newArray(int size) { return new SpacePhoto[size]; }
}; public String getUrl() { return mUrl;
} public void setUrl(String url) { mUrl = url;
} public String getTitle() { return mTitle;
} public void setTitle(String title) { mTitle = title;
} public static SpacePhoto[] getSpacePhotos() { return new SpacePhoto[]{ new SpacePhoto(“/zuG2bGQ.jpg”, “Galaxy”), new SpacePhoto(“/ovr0NAF.jpg”, “Space Shuttle”), new SpacePhoto(“/n6RfJX2.jpg”, “Galaxy Orion”), new SpacePhoto(“/qpr5LR2.jpg”, “Earth”), new SpacePhoto(“/pSHXfu5.jpg”, “Astronaut”), new SpacePhoto(“/3wQcZeY.jpg”, “Satellite”), };
} @Override
public int describeContents() { return 0;
} @Override
public void writeToParcel(Parcel parcel, int i) { parcel.writeString(mUrl); parcel.writeString(mTitle);
}
}

8. Membuat Adaptor
Kami akan membuat adaptor untuk mengisi RecyclerView dengan data. Kami juga akan menerapkan pendengar klik untuk membuka aktivitas detail – SpacePhotoActivity –membebaskan sebuah contoh dariSpacePhotosebagai tambahan Aktivitas detail akan menunjukkan close-up gambar. Kita akan menciptakannya nanti.

public class MainActivity extends AppCompatActivity {
// … private class ImageGalleryAdapter extends RecyclerView.Adapter { @Override public ImageGalleryAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { Context context = parent.getContext(); LayoutInflater inflater = LayoutInflater.from(context); View photoView = inflater.inflate(R.layout.item_photo, parent, false); ImageGalleryAdapter.MyViewHolder viewHolder = new ImageGalleryAdapter.MyViewHolder(photoView); return viewHolder; } @Override public void onBindViewHolder(ImageGalleryAdapter.MyViewHolder holder, int position) { SpacePhoto spacePhoto = mSpacePhotos[position]; ImageView imageView = holder.mPhotoImageView; } @Override public int getItemCount() { return (mSpacePhotos.length); } public class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public ImageView mPhotoImageView; public MyViewHolder(View itemView) { super(itemView); mPhotoImageView = (ImageView) itemView.findViewById(R.id.iv_photo); itemView.setOnClickListener(this); } @Override public void onClick(View view) { int position = getAdapterPosition(); if(position != RecyclerView.NO_POSITION) { SpacePhoto spacePhoto = mSpacePhotos[position]; Intent intent = new Intent(mContext, SpacePhotoActivity.class); intent.putExtra(SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto); startActivity(intent); } } } private SpacePhoto[] mSpacePhotos; private Context mContext; public ImageGalleryAdapter(Context context, SpacePhoto[] spacePhotos) { mContext = context; mSpacePhotos = spacePhotos; }
}
}

9. Memuat Gambar Dari URL
Di sinilah kita membutuhkan Glide untuk melakukan tugasnya-untuk mengambil gambar dari internet dan menampilkannya secara individu di ImageViews, menggunakan metode onBindViewHolder() kami di RecyclerView saat pengguna menggulir aplikasi.

// …
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Photo photo = mPhotoList.get(position);
ImageView imageView = holder.mPhotoImageView; Glide.with(mContext) .load(spacePhoto.getUrl()) .placeholder(R.drawable.ic_cloud_off_red) .into(imageView);
}
// …

Langkah demi langkah, ini dia panggilan yang Glide lakukan:

* dengan (konteks Konteks): kita mulai proses memuat dengan terlebih dahulu melewati konteks kita ke dalam metode with().
* load (String string): sumber gambar ditentukan baik sebagai jalur direktori, URI, atau URL.
* placeholder (int resourceId): id sumber daya aplikasi lokal, sebaiknya ditarik, yang akan menjadi pengganti sampai gambar dimuat dan ditampilkan.

* into(ImageView imageView): pandangan sasaran gambar ke gambar mana yang akan ditempatkan.

Sadarilah bahwa Glide juga dapat memuat gambar lokal. Cukup lewati id sumber daya Android, jalur file, atau URI sebagai argumen ke metode load().

Mengubah ukuran gambar dan transformasi
Anda dapat mengubah ukuran gambar sebelum ditampilkan di layarImageViewdengan metode Glide.override (lebar int, tinggi int). Ini berguna untuk membuat gambar mini di aplikasi anda saat memuat ukuran gambar yang berbeda dari server Perhatikan bahwa dimensinya adalah dalam piksel tidak dp.

Pengikut transformasi gambar adalah juga tersedia:

* fitCenter(): skala gambar seragam (mempertahankan aspek rasio gambar itu) sehingga gambar akan cocok di daerah tertentu. Seluruh gambar akan terlihat, tapi mungkin ada padding vertikal atau horizontal.
* centerCrop(): skala gambar seragam (mempertahankan aspek rasio gambar itu) sehingga gambar mengisi area tertentu, dengan sebanyak gambar yang memungkinkan. Jika diperlukan, gambar akan dipotong secara horisontal atau vertikal agar sesuai.

10. Inisialisasi Adaptor
Disini kita menciptakan RecyclerView dengan GridLayoutManager sebagai pengelola tata letak, inisialisasi adaptor kami, dan mengikatnya keRecyclerView.

// …
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this, 2);
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_images);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(layoutManager); ImageGalleryAdapter adapter = new ImageGalleryAdapter(this, SpacePhoto.getSpacePhotos());
recyclerView.setAdapter(adapter);
}
// …

11. Membuat Aktivitas Detail
Membuat aktivitas baru dan memberi nama SpacePhotoActivity. Kita mendapatkanSpacePhoto ekstra dan memuat gambar dengan Glide seperti yang kita lakukan sebelumnya. Disini kita mengharapkan file atau URL menjadi sebuah Bitmap, jadi kita akan menggunakannya sebagai Bitmap() untuk membuat Glide menerima Bitmap. Jika tidak, beban akan gagal dan itu.error(callback akan dipicu-menyebabkan sumber daya yang dapat ditarik kembali dari error callback yang akan ditampilkan. Anda juga bisa menggunakan asGif() jika anda ingin memastikan bahwa gambar yang anda muat adalah GIF. (Saya akan menjelaskan bagaimana GIF bekerja di Glide segera.)

import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.Target;
public class SpacePhotoActivity extends AppCompatActivity { public static final String EXTRA_SPACE_PHOTO = “SpacePhotoActivity.SPACE_PHOTO”;
private ImageView mImageView; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_photo_detail); mImageView = (ImageView) findViewById(R.id.image); SpacePhoto spacePhoto = getIntent().getParcelableExtra(EXTRA_SPACE_PHOTO); Glide.with(this) .load(spacePhoto.getUrl()) .asBitmap() .error(R.drawable.ic_cloud_off_red) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .into(mImageView);
}
}

Perhatikan bahwa kami juga menginisialisasi cache unik untuk gambar yang dimuat:DiskCacheStrategy.SOURCE. Saya akan menjelaskan lebih lanjut tentang caching di bagian selanjutnya.

Tata Letak Detail
Berikut adalah layout untuk menampilkan detail aktivitas. Ini hanya menampilkanImageViewyang bisa di scroll yang akan menampilkan versi resolusi penuh dari gambar yang dimuat.

12. Melakukan Cache di Glide
Jika anda menonton dengan seksama, anda akan melihat bahwa ketika anda mengunjungi kembali gambar yang sebelumnya dimuat, itu akan memuat lebih cepat dari sebelumnya. Apa yang membuatnya lebih cepat? Sistem caching Glide, itulah yang terjadi.

Setelah gambar dimuat satu kali dari internet, Glide akan menyimpannya di memori dan disk, menyimpan permintaan jaringan berulang dan memungkinkan pengambilan gambar lebih cepat. Jadi, Glide akan terlebih dahulu memeriksa apakah ada gambar dalam memori atau disk sebelum memasukkannya dari jaringan.

Bergantung pada aplikasi anda, anda mungkin ingin menghindari caching-misalnya jika gambar yang dipajang cenderung sering berubah dan tidak dimuat ulang.

Jadi Bagaimana anda Nonaktifkan Caching?
Anda bisa menghindari caching memori dengan memanggil.skipMemoryCache(true). Namun perlu diketahui bahwa gambar tersebut tetap akan di-cache di disket – untuk mencegahnya juga, anda menggunakan metode.diskCacheStrategy(strategi DiskCacheStrategy), yang mengambil salah satu dari nilai enum berikut:

* DiskCacheStrategy.NONE: tidak ada data yang disimpan ke cache.
* DiskCacheStrategy.SOURCE: data asli disimpan ke cache.
* DiskCacheStrategy.RESULT: menyimpan hasil data setelah transformasi ke cache.
* DiskCacheStrategy.ALL: cache baik data asli dan data ditransformasikan.

Untuk menghindari kedua memori dan disk caching sama sekali, panggil kedua metode itu satu per satu:

Glide.with(this) .load(spacePhoto.getUrl()) .asBitmap() .skipMemoryCache(true) .diskCacheStrategy(DiskCacheStrategy.NONE) .into(imageView);

13. Meminta pendengar
Di Glide, anda bisa menerapkan sebuah RequestListener untuk memantau status permintaan yang anda buat saat gambar dimuat. Hanya satu dari metode ini yang akan dipanggil.

* onException(): dipicu setiap kali pengecualian terjadi sehingga anda dapat menangani pengecualian dalam metode ini.
* onResourceReady(): dipecat ketika foto tersebut dimuat berhasil.

Kembali ke aplikasi galeri foto kami, mari kita ubah sedikit tampilan dengan menggunakan sebuah objek RequestListener yang akan mengatur bitmap keImageView dan juga mengubah warna latar belakang tata letak dengan cara mengekstrak warna gelap dan getar dari gambar kita dengan menggunakan Android Palette API.

// …
@Override
protected void onCreate(Bundle savedInstanceState) {
// … Glide.with(this) .load(spacePhoto.getUrl()) .asBitmap() .error(R.drawable.ic_cloud_off_red) .listener(new RequestListener() { @Override public boolean onException(Exception e, String model, Target target, boolean isFirstResource) { return false; } @Override public boolean onResourceReady(Bitmap resource, String model, Target target, boolean isFromMemoryCache, boolean isFirstResource) { onPalette(Palette.from(resource).generate()); mImageView.setImageBitmap(resource); return false; } public void onPalette(Palette palette) { if (null != palette) { ViewGroup parent = (ViewGroup) mImageView.getParent().getParent(); parent.setBackgroundColor(palette.getDarkVibrantColor(Color.GRAY)); } } }) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .into(mImageView);
}
// …

Di sini anda juga bisa menyembunyikan kemajuan dialog jika anda memilikinya. Dengan perubahan terakhir ini, pastikan untuk memasukkan dependensi Palette di akun build.gradle anda:

dependencies {
// …
compile ‘com.android.support:palette-v7:25.1.1’
}

14. Menguji App
Akhirnya, anda bisa menjalankan aplikasi! Klik thumbnail untuk mendapatkan gambar berukuran penuh.

15. Animasi
Jika anda menjalankan aplikasi, anda akan melihat animasi crossfade yang terjadi saat gambar ditampilkan. Glide mengaktifkan ini secara default, namun anda dapat menonaktifkannya dengan menelepondontAnimate(), yang hanya akan menyebabkan gambar yang akan ditampilkan tanpa animasi apapun. Anda juga bisa menyesuaikan animasi crossfade dengan memanggilcrossFade(int duration), melewati durasi dalam milidetik baik kecepatan atas atau memperlambatnya-300 milidetik adalah default.

GIF animasi

Ini sangat mudah untuk menampilkan GIF animasi di aplikasi anda menggunakan Glide. Ini bekerja sama seperti menampilkan gambar biasa.

ImageView gifImageView = (ImageView) findViewById(R.id.iv_gif);
Glide.with(this) .load(“/Vth6CBz.gif”) .asGif() .placeholder(R.drawable.ic_cloud_off_red) .error(R.drawable.ic_cloud_off_red) .into(gifImageView);

Jika anda mengharapkan gambar menjadi GIF, panggil asGif() -ini memastikan bahwa Glide menerima GIF, jika tidak beban akan gagal daDrawableitu diteruskan ke .error() akan ditampilkan sebagai gantinya.

Bermain video
Sayangnya, Glide tidak mendukung pemuatan video via URL. Sebagai gantinya hanya bisa memuat dan menampilkan video yang sudah tersimpan di ponsel. Tampilkan video dengan melewatkan URInya ke load load().

Glide.with(context) .load(Uri.fromFile(new File(“your/video/file/path”)) .into(imageView)
Kesimpulan
Kerja bagus! Dalam tutorial ini, anda telah membuat aplikasi galeri gambar lengkap dengan Glide, dan di sepanjang jalan, pelajari bagaimana perpustakaan bekerja dan bagaimana anda dapat mengintegrasikannya ke dalam proyek anda sendiri. Anda juga telah belajar bagaimana menampilkan gambar lokal dan remote, bagaimana cara menampilkannya GIF animasi dan video, dan bagaimana menerapkan transformasi gambar seperti mengubah ukuran. Tidak hanya itu, tapi anda sudah melihat betapa mudahnya mengaktifkan caching, penanganan kesalahan, dan pendengar permintaan khusus.

Untuk mempelajari lebih lanjut tentang Glide, anda bisa merujuknya dokumentasi resmi. Untuk mempelajari lebih lanjut tentang pengkodean untuk Android, lihat beberapa kursus dan tutorial kami yang lain di sini di Envato Tuts +!