Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

1. Ano ang Glide?
Ang Glide ay sikat na open-source na Android library sa pag load ng mga images, videos at animated GIFs. Gamit ang Glide maaari kang mag load at mag display ng media mula sa iba’t ibang napakaraming sources, katulad ng remote servers o mga local file system.
Dati pa, ang Glide ay gumagamit ng custom implementation ng HttpURLConnection para i-load ang images sa internet. Subalit ang Glide ay nagbibigay din ng plugins sa ibang sikat na networking libraries katulad ng Volley o OkHttp.
2. Bakit Kailangang Gumamit ng Glide?
Ang pag-gawa ng iyong sariling media loading at display functionality sa Java ay minsan masakit sa ulo: kailangan mong isaalang-alang ang caching, decoding, pag ayos ng network connections, threading, exception handling, at marami pang iba. Ang Glide ay madaling gamitin, planado, dokumentado, at nasuri ng maayos na uri ng library kung kaya hindi masasayang ang iyong oras at hindi pa sasakit ang iyong ulo.
Sa pagtuturong ito,matututunan natin ang tungkol sa Glide 3 sa pamamagitan ng pag-gawa ng simpleng image gallery app. Maglo-load ito ng images sa internet at ipapakita ito na thumbnailds sa RecyclerView at kapag ang gumagamit ay pumindot sa kahit na ilang images, magbubukas ito ng detalyadong actibidad kasama iyong malaking image.
3. Gumawa ng Android Studio Project
Gawing exciting ang iyong Android Studio
at gumawa ng bagong proyekto na may blankong aktibidad na tinatawag na
MainActivity.
2. Ideklara Ang Dependencies
Pagkatapos gumawa ng bagong proyekto, isa-isahin
ang mga sumusunod na dependencies sa iyong 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' }
O kaya Maven:
<dependency> <groupId>com.github.bumptech.glide</groupId> <artifactId>glide</artifactId> <version>3.7.0</version> </dependency> <dependency> <groupId>com.google.android</groupId> <artifactId>support-v4</artifactId> <version>r7</version> </dependency>
Siguraduhin na i-sync ang iyong proyekto
pagkatapos idagdag ang Glide dependency.
Integration Libraries
Kung gusto mong gumamit ng networking library katulad ng OkHttp o Volley sa iyong proyekto para sa network operations, inirerekomenda na isama ang natatanging Glide integration sa library na iyong ginagamit(sa halip na yung dati kung saan kasama ang 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 3 compile 'com.github.bumptech.glide:okhttp3-integration:1.4.0@aar' compile 'com.squareup.okhttp3:okhttp:3.2.0' // okhttp 2 compile 'com.github.bumptech.glide:okhttp-integration:1.4.0@aar' compile 'com.squareup.okhttp:okhttp:2.2.0' }
Maaari mong bisitahin ang opisyal na
Glide integration libraries para sa karagdagang impormasyon.
3. Magdagdag ng Internet Permission
Dahil ang Glide ay gumagana para
makagawa ng network request sa pag-load ng images sa pamamagitan ng internet, kailangan
nating isama ang permission INTERNE
T sa AndroidManifest.xml.
<uses-permission android:name="android.permission.INTERNET" />
4. Gumawa ng Layout
Magsimula tayo sa pamamagitan ng paggawa
ng RecyclerView.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/rv_images" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
Paggawa ng Custom Item Layout
Sunod, gumawa tayo ng XML layout na
magagamit sa bawat item (ImageView
) sa loob ng RecyclerView.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_photo" android:adjustViewBounds="true" android:layout_height="200dp" android:scaleType="centerCrop" android:layout_margin="2dp" android:layout_width="match_parent"/> </LinearLayout>
Ngayon at natapos na natin ang paggawa
ng layout, ang susunod na hakbang ay gumawa ng RecyclerView
adapter para sa
pagpadami ng data. Subalit bago natin gawin ito, gumawa muna tayo ng simpleng
data model.
5. Gumawa ng Data Model
Gagawin natin ang simpleng data model
para sa RecyclerView.
Ang modelong ito ay gagamitin ang Parcelable para sa high-performance na pagdala ng data mula sa
isang component patungo sa isa pa. Sa ating sitwasyon, ang data ay maipapadala
mula sa SpaceGalleryActivity
patungo sa 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<SpacePhoto> CREATOR = new Creator<SpacePhoto>() { @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("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"), new SpacePhoto("http://i.imgur.com/ovr0NAF.jpg", "Space Shuttle"), new SpacePhoto("http://i.imgur.com/n6RfJX2.jpg", "Galaxy Orion"), new SpacePhoto("http://i.imgur.com/qpr5LR2.jpg", "Earth"), new SpacePhoto("http://i.imgur.com/pSHXfu5.jpg", "Astronaut"), new SpacePhoto("http://i.imgur.com/3wQcZeY.jpg", "Satellite"), }; } @Override public int describeContents() { return 0; } @Override public void writeToParcel(Parcel parcel, int i) { parcel.writeString(mUrl); parcel.writeString(mTitle); } }
6. Gumawa ng Adapter
Gagawa tayo ng adaptor para mapadami ang
RecyclerView na may data.Gagawin din natin ang click listener para buksan ang detalyadong
aktibidad—SpacePhotoActivity
—na may extrang SpacePhoto
. Ang detalyadong aktibidad ay ipapakita
ang close-up ng image. Gagawin natin ito sa mga susunod na bahagi nitong pagtururo.
public class MainActivity extends AppCompatActivity { // ... private class ImageGalleryAdapter extends RecyclerView.Adapter<ImageGalleryAdapter.MyViewHolder> { @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; } } }
7. Ang Paglo-load ng Images Galing sa URL
Dito ay kung saan natin kailangan ang
Glide na gawin ang trabaho nito- na kunin ang mga images mula sa internet at
ipakita ito sa isa-isang ImageViews
, gamit ang RecyclerView onBindViewHolder()
na paraan habang ang gumagamit ay ginagalaw ang app.
// ... @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); } // ...
Narito ang mga hakbang kung papaano gagana ang glide:
-
with(Context context)
: Sisimulan natin ang proseso ng paglo-load sa pamamagitan ng una ay ang pagpasa ng contextwith()
na pamamaraan . -
load (String string)
: Ang image source ay nakasaad kung ito ay directory path, a URI o URL. -
placeholder(int resourceId
): ang local application resource id, sa malamang ay maaaring i-drawing, ito ay magiging placeholder hanggang sa ang image ay ma-load at maipakita.
-
into(ImageView imageView)
: ang target image view kung saan ang image ay ilalagay.
Tatandaan na ang Glide ay maaari ding
mag-load ng local images, ipagawa lamang argument ang alin man sa Android resource id, ang file path, o
kaya ang Uri sa load()
na pamamaraan.
Pagpapalaki or Pagpapaliit ng Image at Pagta-transform
Maaari mong palakihin o paliitin ang
size ng image bago ito ipakita sa ImageView
gamit ang Glide's .override (int
width, int height)
na pamamaraan. Makakatulong ito sa paggawa ng
thumbnails sa iyong app kapag maglo-load ng iba’t ibang sukat ng image galing
sa server. Tatandaan na ang sukat ay pixels hindi dp.
Mayroon din na mga sumusunod na image transformation:
-
fitCenter()
: Sukatin ang image ng pare-pareho (habang pinapanatili ang image’s aspect ratio) para mapunan ng image ang nasabing area. Ang buong image ay makikita, subalit maaaring may pataas o pahalang na padding. -
centerCrop()
: sukatin ang image ng pare-pareho(habang pinapanatili ang image’s aspect ratio) para mapunan ng image ang nasabing area, na hanggat maaari mas maraming image na nakalabas mas maganda.Kung kinakailangan, ang image ay puputulin ng pahalang o pataas para magkasya.
8. Pag-set ng Adapter
Dito gagawa tayo ng ating RecyclerView
na may GridLayoutManager
bilang layout manager, i-set ang adapter, at isama ito
sa RecyclerView.
// ... @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); } // ...
9. Paggawa ng Detalyadong Aktibidad
Gumawa ng bagong aktibidad at pangalanan
ito ng SpacePhotoActivity
. Kukunin natin ang SpacePhoto
extra at i-load ang
image gamit ang Glide katulad ng ginawa natin dati. Dito inaasahan natin na ang
file o URL ay Bitmap
, kung kaya gagamitin natin ang as Bitmap()
para ang
tatanggapin ng Glide ay Bitmap
. At kung hindi, hindi gagana ang load at lalabas
ang .error ()
callback-na magiging dahilan para ang drawable resource ay
babalik sa paglabas ng error callback. Maaari mo ring gamitin ang asGif()
kung
gusto mong siguraduhin na ang na-load mong image ay GIF.(Ipapaliwanag ko kung papaano
gumagana ang GIFs sa Glide maya-maya lamang.)
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); } }
Tatandaan na nag-set din tayo ng
kakaibang cache para sa na-load na images: DiskCacheStrategy.SOURCE.
Mas
ipapaliwanag ko ang tungkol sa caching sa susunod na bahagi nito.
Ang Detalyadong Layout
Narito ang layout para ipakita ang
detalyadong aktibidad. Ilalabas lamang nito ang pwedeng i-scroll na ImageView
na ipapakita ang full-resolution na bersyon ng na-load na image.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/activity_character" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:scaleType="fitCenter"/> </LinearLayout> </ScrollView> </LinearLayout>
10. Caching sa Glide
Kung titingnan mong maigi, makikita mo na pag binisita mo uli ang image na dating ni-load, naglo-load ito na mas mabilis kumpara dati.Ano ang nagpapabilis dito? Ito ay ang Glide caching system.
Pagkatapos ma-load ang image galing sa internet, ika-cache ito ng Glide sa memory at sa disk,hindi na paulit-ulit ang requests sa network at mas mabilis ang pagkuha ng image.Kung kaya, susuriin muna ng Glide kung ang image ay alinman sa dalawa nasa memory o kaya nasa disk bago ito i-load galing sa network.
Subalit depende sa iyong application, maaari mong iwasan ang caching—halimbawa kung ang images na ipinapakita ay maaaring magbago ng madalas at hindi maire-reload.
Paano Tanggalin ang Caching?
Maaari mong iwasan ang caching sa
pamamagitan ng pagtawag .skipMemoryCache(totoo)
.Subalit tatandaan na ang image
ay ika-cache pa din sa disk-para maiwasan din ito, gamitin ang .diskCacheStrategy(DiskCacheStrategy strategy)
na paraan, kung
saan kukunin ang isa sa mga sumusunod na enum values:
-
DiskCacheStrategy.NONE:
walang data na naka-save sa cache. -
DiskCacheStrategy.SOURCE:
orihinal na data ay naka-save sa cache. -
DiskCacheStrategy.RESULT:
sini-save ang resulta ng data pagkatapos ng transformations sa cache. -
DiskCacheStrategy.ALL:
naka-cache ang parehong orihinal na data at transformed data.
Para maiwasan pareho ang memory at disk caching ng sabay, gamitin lamang ang parehong pamamaraan ng paisa-isa:
Glide.with(this) .load(spacePhoto.getUrl()) .asBitmap() .skipMemoryCache(true) .diskCacheStrategy(DiskCacheStrategy.NONE) .into(imageView);
11. Request Listeners
Sa Glide, maaari mong gawin ang
RequestListener
para i-monitor ang status ng request na ginawa mo habang
naglo-load ang image.Isa lamang sa mga pamamaraan na ito ang maaaring gamitin.
-
onException():
ay lumalabas kapag may exception na nangyayari kung kaya magagawan mo ng paraan ang exceptions sa pamamaraan na ito. -
onResourceReady(
): paganahin kapag ang image ay na-load.
Balik tayo sa image gallery app,
baguhin natin ang nakalabas ng kaunti
gamit ang RequestListener
na magsi-set ng ImageView
at magbabago din ng kulay
ng background ng layout sa pamamagitan ng pag extract ng dark at vibrate na
kulay ng ating image gamit ang 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<String, Bitmap>() { @Override public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) { return false; } @Override public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> 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); } // ...
Dito maaari mo ring itago ang progress
dialog kung mayroon ka nito. Sa huling pagbabago na ito, siguraduhin na isama ang Palette
dependency sa iyong build.gradle:
dependencies { // ... compile 'com.android.support:palette-v7:25.1.1' }
12. Pagsusuri ng App
At ang panghuli, maaari mong paganahin ang app! Pindutin sa thumbnail para makakuha ng full-sized na bersyon ng image.

10. Animations
Kung pagaganahin moa ng app, mapapansin
moa ng crossfade animation na nangyayari habang ang image ay ipinapakita.
Sadyang mayroon ng ganito ang Glide, subalit maaari mo naman itong tanggalin sa
pamamagitan ng pag gamit ng dontAnimate()
,na magpapakita lamang ng image ng
walang kahit na anong animation. Maaari mo ring i-customize ang crossfade
animation sa pamamagitan ng paggamit ng crossFade(int duration)
, gawin ang
duration sa milliseconds alin man sa pabilisin ito o pabagalin-300 milliseconds
ang orihinal.
Animated na GiFs
Napakadali na ipakita ang animated na GIF sa iyong app gamit ang Glide. Kaparehas ito ng pagpakita ng ordinaryong image.
ImageView gifImageView = (ImageView) findViewById(R.id.iv_gif); Glide.with(this) .load("http://i.imgur.com/Vth6CBz.gif") .asGif() .placeholder(R.drawable.ic_cloud_off_red) .error(R.drawable.ic_cloud_off_red) .into(gifImageView);
Kung inaasahan mo ang image na GIF,
gawin ang asGif()
-sinisiguro nito na ang Glide ay makakatanggapng GIF, at kung
hindi, hindi gagana ang load at ipapakita ang Drawable
ipapasa sa .error()
na pamamaraan.
Playing Video
Sa kasamaang palad, hindi gumagana sa
glide ang support video loading at display sa URL. Sa halip, maaari lamang itong magload at magpakita ng videos na dati
ng nakalagay sa telepono.Ipakita ang video sa pamamagitan ng pagpasa ng URI
nito sa load()
na pamamaraan.
Glide.with(context) .load(Uri.fromFile(new File("your/video/file/path")) .into(imageView)
Pagtatapos
Magaling! Sa pagtuturong ito, nakagawa ka ng kumpletong image gallery app sa Glide, at natutunan paano ang library gumagana at paano mo ito magagamit sa iyong sariling proyekto. Natutunan mo din kung paano ipakita ang parehong local at remote images, paano ipakita ang animated GIFs at videos, paano gawin ang image transformations katulad ng pagbabago ng sukat. At hindi lang yan, nakita mo din kung gaano kadaling alisin ang caching, error handling at custom request listeners.
Para mas matutunan ang Glide, maaari mong tingnan ang opisyal na dokumentasyon dito. Para mas mapag-aralan ang tungkol sa coding sa Android, tingnan ang iba pang kurso at pagtuturo dito sa Envato Tuts+!
- Android SDKPaano Tumawag at Gumamit ng SMS sa Android AppsChike Mgbemena
- Android SDKAndroid na Bagay: Ang Una Mong ProyektoPaul Trebilcox-Ruiz
- Android SDKGumawa ng Android Cardboard 360 Video ViewerPaul Trebilcox-Ruiz
- Android SDKKumuha Ng Mga Larawan Gamit ang Android AppAshraff Hathibelagal
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post