تعرف على مكتبة Glide لتحميل الصور في الاندرويد؟

كثير ماتواجه المطورين مشاكل في اختيار الصور والايقونات لتطبيقهم  وذلك بسبب أختلاف مقاسات ودقة الاجهزة التي تعمل بنظام الأندرويد وسوف نتعلم بهذا المثال عن كيفية وضع صورة في Image View  من خلال مكتبة Glideوبسهولة تامة .

ماهي مكتبة Glide ؟

هي عبارة مكتبة مفتوحة المصدر كتبها  bumptech لإدارة الوسائط وتحميل الصورة للاندرويد وتقوم بعدد من الوضائف ومن مميزات هذه المكتبة سنذكر مايلي:

1- إدارة الوسائط.

2-disk cashing لتفادي تحميل الصور في كل مرة تقوم بفتح التطبيق.

3-resource pooling  لإدارة المصادر في المشروع.

4-تستخدم اتصال معدل من نوع HttpUrlConnection لتحميل الصور.

5-تستخدم لعرض الفيديو والصور المتحركة من نوع GIf.

6-التحكم وتعديل الصور كـ تغيير الحجم والقص الخ..

كيفية إستخدام مكتبة Glide

1- نقوم بإنشاء مشروع جديد نسميه GlideExample.
2-نقوم بإضافة مكتبة glide  إلى المشروع وذلك عبر الخطوات التالية:
-نقوم بفتح ملف build.gradle .
-نقوم باضافة الـ gradle  الخاص بهذه المكتبة كما في الشكل ادناه:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

 ثم نقوم بالضغط على الزر sync now  في شريط الادوات ثم الانتظار إلى ان يتم تنزيل المكتبة واضافتها للمشروع.

3-نذهب إلى المجلد layout  ونقوم بفتح الملف activity_main.xml  ثم نضغط على التبيويب text  ونقوم بإضافة ImageView  كمايلي:

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.blogspot.muteealjabri.glideexample.MainActivity"> <ImageView android:id="@+id/glide_image" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>

4- نقوم بإضافة الصورة ادناه  إلى مجلد drawable :

 وذلك نقوم بنسخ الصورة من جهاز الكمبيوتر ثم نضغط بالزر الأيمن على مجلد drawable ونضغط paste  ليظهر مربع الحوار ادناه:

نقوم بالضغط على ok  ليقوم بلصق الصورة إلى المجلد يمكنك أختيار أي صورة تريد.

5-نقوم بالذهاب إلى ملف MainActivity.java  ثم نقوم بفتحه ثم نقوم بالذهاب إلى دالة onCreate  ونقوم بمايلي:

1.5-تعريف imageview  التي نريد اضافة الصورة لها:

ImageView myImage =(ImageView)findViewById(R.id.glide_image);
    
    

2.5-نقوم بإضافة الصورة برمجيا إلى myimage  وذلك في نفس دالة onCreate ونكتب الكود التالي:

1 2 3 4

Glide.with(this) .load(R.drawable.my_img) .centerCrop() .into(myImage);

شرح الكود:
السطر1:الكلاس Glide  يحتوي دالة with ويقصد بها أين تريد عرض هذا الصورة  أو في أي activityتريد عرض هذا الصورة؟ نريد عرضها في  MainAvtivity  لذلك نقوم بتمرير المؤشر this  الذي يقصد بها MainAvtivity  كما يمكنك إضافة الصورة إلى Fragment  بتمرير أوبجكت من نوع Fragment الى هذه الدالة.

السطر2: الدالة load ويتم تمرير لها مصدر الصورة أي المكان الذي سيتم الحصول على الصورة منه وفي حالتنا سوف نحصل على الصورة من مجلد drawable  عبر خاصية id  لهذه الصورة..كما يمكنك تمرير رابط URL بصيغة Stringg  لهذه لتحميل صورة من الانترنت.

السطر3: استدعاء الدالة ()centerCrop لملائمة الصورة على ملء الشاشة.

السطر4: الدالة ()into وتتطلب هذه الدالة أوبجكت من نوع ImageView  أي تحديد الـ ImageView   الذي سيتم عرض الصورة فيه وهنا مررنا myImage  الذي قمنا بتعريفه في الخطوة رقم 1.5.

وهكذا نكون انتهينا من كتابة الكود والآن نقوم بتشغيل البرنامج ونقوم بالضغط على الزر run   في شريط الادوات ثم الاتنظار قليلا إلى أن يشتغل البرنامج ثم تظهر هذه الشاشة:

وهكذا نكون انتهينا من شرح مكتبة glide ..رأيكم يهمني بالتعليقات .. لمزيد من المعلومات يرجي زيارة رابط المكتبة على github .


الكود الكامل:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

package com.blogspot.muteealjabri.glideexample; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ImageView; import com.bumptech.glide.Glide; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView myImage =(ImageView)findViewById(R.id.glide_image); Glide.with(this) .load(R.drawable.my_imag) .centerCrop() .into(myImage); } }