رمز تطبيق الروبوت معرض الصور مع الانزلاق
() translation by (you can also view the original English article)



1-ما هو الانزلاق؟
الانزلاق مكتبة الروبوت المصدر المفتوح شعبية لتحميل الصور وملفات الفيديو وملفات Gif المتحركة. مع الانزلاق يمكنك تحميل وعرض وسائط الإعلام من عدة مصادر مختلفة، مثل الملقمات البعيدة أو نظام الملفات المحلي.
بشكل افتراضي، يستخدم الانزلاق تطبيق مخصص من هتبورلكونيكتيون لتحميل الصور عبر الإنترنت. ومع ذلك، يوفر الانزلاق أيضا الإضافات إلى مكتبات الربط الشبكي شعبية أخرى مثل الطائرة أو أوختب.
2. لذلك لماذا استخدام الانزلاق؟
تطوير وظيفة تحميل وعرض الوسائط الخاصة بك في جافا يمكن أن يكون ألم حقيقي: عليك أن تأخذ الرعاية للتخزين المؤقت، فك، إدارة اتصالات شبكة الاتصال، وخيوط، معالجة الاستثناء، وأكثر. الانزلاق هو مكتبة سهلة الاستخدام وجيدة التخطيط وموثقة توثيقاً جيدا واختبار دقة التي يمكن أن توفر لك الكثير من الوقت الثمين، ويوفر لك بعض الصداع.
في هذا البرنامج التعليمي، سوف نتعلم عن 3 نزل ببناء تطبيق معرض صور بسيطة. فإنه سيتم تحميل الصور عن طريق الإنترنت وعرضها كمصغرات في ريسيكليرفيو وعندما ينقر مستخدم على أي صورة، فإنه سيتم فتح نشاطا من تفصيل الذي يحتوي على الصورة الكبيرة.
3. إنشاء مشروع استوديو الروبوت
إطلاق النار حتى "الاستوديو الروبوت" الخاص بك وإنشاء مشروع جديد بنشاط فارغة تسمى ميناكتيفيتي.
2-تعريف التبعيات
بعد إنشاء مشروع جديد، تحديد التبعيات التالية في الخاص بك build.gradle
.
1 |
repositories { |
2 |
mavenCentral() // jcenter() works as well because it pulls from Maven Central |
3 |
}
|
4 |
|
5 |
dependencies { |
6 |
// Glide
|
7 |
compile 'com.github.bumptech.glide:glide:3.7.0' |
8 |
|
9 |
// Recyclerview
|
10 |
compile 'com.android.support:recyclerview-v7:25.1.1' |
11 |
}
|
12 |
أو مع مخضرم:
1 |
<dependency>
|
2 |
<groupId>com.github.bumptech.glide</groupId> |
3 |
<artifactId>glide</artifactId> |
4 |
<version>3.7.0</version> |
5 |
</dependency>
|
6 |
<dependency>
|
7 |
<groupId>com.google.android</groupId> |
8 |
<artifactId>support-v4</artifactId> |
9 |
<version>r7</version> |
10 |
</dependency>
|
تأكد من مزامنة المشروع الخاص بك بعد إضافة تبعية الانزلاق.
مكتبات التكامل
إذا كنت ترغب في استخدام مكتبة شبكة اتصال مثل أوختب أو الطائرة في المشروع الخاص بك لعمليات الشبكة، من المستحسن تضمين إدماج الانزلاق محددة للمكتبة الذي تستخدمه (بدلاً من الافتراضي أحد الذي حزم هتبورلكونيكتيون).
كرة الطائرة الشاطئية
1 |
dependencies { |
2 |
|
3 |
compile 'com.github.bumptech.glide:glide:3.7.0' |
4 |
compile 'com.github.bumptech.glide:volley-integration:1.4.0@aar' |
5 |
compile 'com.mcxiaoke.volley:library:1.0.8' |
6 |
}
|
أوختب
1 |
dependencies { |
2 |
|
3 |
// okhttp 3
|
4 |
compile 'com.github.bumptech.glide:okhttp3-integration:1.4.0@aar' |
5 |
compile 'com.squareup.okhttp3:okhttp:3.2.0' |
6 |
|
7 |
// okhttp 2
|
8 |
compile 'com.github.bumptech.glide:okhttp-integration:1.4.0@aar' |
9 |
compile 'com.squareup.okhttp:okhttp:2.2.0' |
10 |
}
|
يمكنك زيارة الانزلاق التكامل مكتبات الدليل الرسمي لمزيد من المعلومات.
3-إضافة أذونات إنترنت
ما هو الانزلاق إجراء طلب شبكة اتصال لتحميل الصور عن طريق الإنترنت، نحن بحاجة إلى تدرج إذن الإنترنت
في موقعنا AndroidManifest.xml.
1 |
<uses-permission android:name="android.permission.INTERNET" /> |
4-إنشاء تخطيط
سوف نبدأ بإنشاء لدينا ريسيكليرفيو.
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<RelativeLayout
|
3 |
xmlns:android="http://schemas.android.com/apk/res/android" |
4 |
xmlns:tools="http://schemas.android.com/tools" |
5 |
android:id="@+id/activity_main" |
6 |
android:layout_width="match_parent" |
7 |
android:layout_height="match_parent"> |
8 |
|
9 |
<android.support.v7.widget.RecyclerView
|
10 |
android:id="@+id/rv_images" |
11 |
android:layout_width="match_parent" |
12 |
android:layout_height="match_parent"/> |
13 |
</RelativeLayout>
|
إنشاء تخطيط مخصص العنصر
المقبل، لنقم بإنشاء مخطط XML الذي سيتم استخدامه لكل عنصر (ImageView
) داخل ريسيكليرفيو
.
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" |
3 |
android:orientation="vertical" |
4 |
android:layout_width="match_parent" |
5 |
android:layout_height="wrap_content"> |
6 |
<ImageView
|
7 |
android:id="@+id/iv_photo" |
8 |
android:adjustViewBounds="true" |
9 |
android:layout_height="200dp" |
10 |
android:scaleType="centerCrop" |
11 |
android:layout_margin="2dp" |
12 |
android:layout_width="match_parent"/> |
13 |
|
14 |
</LinearLayout>
|
والآن بعد أن قمنا بإنشاء التخطيط، الخطوة التالية لإنشاء محول ريسيكليرفيو
لملء البيانات. قبل أن نفعل ذلك، رغم ذلك، دعونا إنشاء نموذج بيانات بسيطة لدينا.
5-إنشاء نموذج البيانات
نحن ذاهبون لتعريف نموذج بيانات بسيطة لأننا ريسيكليرفيو
. يطبق هذا النموذج بارسيلابل للنقل عالية الأداء للبيانات من عنصر واحد إلى آخر. وفي حالتنا، سيتم نقل البيانات من سباسيجاليرياكتيفيتي
إلى سباسيفوتواكتيفيتي
.
1 |
import android.os.Parcel; |
2 |
import android.os.Parcelable; |
3 |
|
4 |
public class SpacePhoto implements Parcelable { |
5 |
|
6 |
private String mUrl; |
7 |
private String mTitle; |
8 |
|
9 |
public SpacePhoto(String url, String title) { |
10 |
mUrl = url; |
11 |
mTitle = title; |
12 |
}
|
13 |
|
14 |
protected SpacePhoto(Parcel in) { |
15 |
mUrl = in.readString(); |
16 |
mTitle = in.readString(); |
17 |
}
|
18 |
|
19 |
public static final Creator<SpacePhoto> CREATOR = new Creator<SpacePhoto>() { |
20 |
@Override
|
21 |
public SpacePhoto createFromParcel(Parcel in) { |
22 |
return new SpacePhoto(in); |
23 |
}
|
24 |
|
25 |
@Override
|
26 |
public SpacePhoto[] newArray(int size) { |
27 |
return new SpacePhoto[size]; |
28 |
}
|
29 |
};
|
30 |
|
31 |
public String getUrl() { |
32 |
return mUrl; |
33 |
}
|
34 |
|
35 |
public void setUrl(String url) { |
36 |
mUrl = url; |
37 |
}
|
38 |
|
39 |
public String getTitle() { |
40 |
return mTitle; |
41 |
}
|
42 |
|
43 |
public void setTitle(String title) { |
44 |
mTitle = title; |
45 |
}
|
46 |
|
47 |
public static SpacePhoto[] getSpacePhotos() { |
48 |
|
49 |
return new SpacePhoto[]{ |
50 |
new SpacePhoto("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"), |
51 |
new SpacePhoto("http://i.imgur.com/ovr0NAF.jpg", "Space Shuttle"), |
52 |
new SpacePhoto("http://i.imgur.com/n6RfJX2.jpg", "Galaxy Orion"), |
53 |
new SpacePhoto("http://i.imgur.com/qpr5LR2.jpg", "Earth"), |
54 |
new SpacePhoto("http://i.imgur.com/pSHXfu5.jpg", "Astronaut"), |
55 |
new SpacePhoto("http://i.imgur.com/3wQcZeY.jpg", "Satellite"), |
56 |
};
|
57 |
}
|
58 |
|
59 |
@Override
|
60 |
public int describeContents() { |
61 |
return 0; |
62 |
}
|
63 |
|
64 |
@Override
|
65 |
public void writeToParcel(Parcel parcel, int i) { |
66 |
parcel.writeString(mUrl); |
67 |
parcel.writeString(mTitle); |
68 |
}
|
69 |
}
|
6-إنشاء المحول
سوف نقوم بإنشاء محول لتجميع ريسيكليرفيو مع البيانات. سوف ننفذ أيضا وحدة إصغاء انقر لفتح نشاط التفصيل – سباسيفوتواكتيفيتي
– تمرير مثيل سباسيفوتو
إضافية. وسوف تظهر بالتفصيل النشاط عن قرب من الصورة. ونحن سوف إنشائه في قسم لاحق.
1 |
public class MainActivity extends AppCompatActivity { |
2 |
// ...
|
3 |
private class ImageGalleryAdapter extends RecyclerView.Adapter<ImageGalleryAdapter.MyViewHolder> { |
4 |
|
5 |
@Override
|
6 |
public ImageGalleryAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { |
7 |
|
8 |
Context context = parent.getContext(); |
9 |
LayoutInflater inflater = LayoutInflater.from(context); |
10 |
View photoView = inflater.inflate(R.layout.item_photo, parent, false); |
11 |
ImageGalleryAdapter.MyViewHolder viewHolder = new ImageGalleryAdapter.MyViewHolder(photoView); |
12 |
return viewHolder; |
13 |
}
|
14 |
|
15 |
@Override
|
16 |
public void onBindViewHolder(ImageGalleryAdapter.MyViewHolder holder, int position) { |
17 |
|
18 |
SpacePhoto spacePhoto = mSpacePhotos[position]; |
19 |
ImageView imageView = holder.mPhotoImageView; |
20 |
}
|
21 |
|
22 |
@Override
|
23 |
public int getItemCount() { |
24 |
return (mSpacePhotos.length); |
25 |
}
|
26 |
|
27 |
public class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { |
28 |
|
29 |
public ImageView mPhotoImageView; |
30 |
|
31 |
public MyViewHolder(View itemView) { |
32 |
|
33 |
super(itemView); |
34 |
mPhotoImageView = (ImageView) itemView.findViewById(R.id.iv_photo); |
35 |
itemView.setOnClickListener(this); |
36 |
}
|
37 |
|
38 |
@Override
|
39 |
public void onClick(View view) { |
40 |
|
41 |
int position = getAdapterPosition(); |
42 |
if(position != RecyclerView.NO_POSITION) { |
43 |
SpacePhoto spacePhoto = mSpacePhotos[position]; |
44 |
Intent intent = new Intent(mContext, SpacePhotoActivity.class); |
45 |
intent.putExtra(SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto); |
46 |
startActivity(intent); |
47 |
}
|
48 |
}
|
49 |
}
|
50 |
|
51 |
private SpacePhoto[] mSpacePhotos; |
52 |
private Context mContext; |
53 |
|
54 |
public ImageGalleryAdapter(Context context, SpacePhoto[] spacePhotos) { |
55 |
mContext = context; |
56 |
mSpacePhotos = spacePhotos; |
57 |
}
|
58 |
}
|
59 |
}
|
7-تحميل الصور من عنوان URL
هذا أين نحن بحاجة إلى الانزلاق القيام بعملها، لجلب الصور من الإنترنت وعرضها في إيماجيفيو
س الفردية، باستخدام أسلوب onBindViewHolder()
ريسيكليرفيو لدينا كما تمرير المستخدم للتطبيق.
1 |
// ...
|
2 |
@Override
|
3 |
public void onBindViewHolder(MyViewHolder holder, int position) { |
4 |
Photo photo = mPhotoList.get(position); |
5 |
ImageView imageView = holder.mPhotoImageView; |
6 |
|
7 |
Glide.with(mContext) |
8 |
.load(spacePhoto.getUrl()) |
9 |
.placeholder(R.drawable.ic_cloud_off_red) |
10 |
.into(imageView); |
11 |
}
|
12 |
// ...
|
خطوة بخطوة، وإليك ما تقوم به وتدعو إلى الانزلاق:
-
مع (السياق سياق)
: نبدأ عملية التحميل بأول تمرير سياقنا في الأسلوبwith().
-
تحميل (سلسلة سلسلة):
يتم تحديد مصدر الصورة كأي مسار دليل، URI أو عنوان URL. -
العنصر النائب (int resourceId)
: على معرف مورد تطبيق محلي، ويفضل أن يكون ذلك drawable، التي ستكون عنصرا نائبا حتى يتم تحميل الصورة وعرضها.
-
في (ImageView imageView):
عرض الصورة المستهدفة التي سيتم وضع الصورة.
كن على علم أن الانزلاق يمكن تحميل الصور المحلية أيضا، مجرد تمرير معرف المورد الروبوت أو مسار الملف، أو Uri كوسيطة إلى أسلوب load()
.
تغيير حجم الصور وتحويل
يمكنك تغيير حجم الصورة قبل أن يتم عرضه في ImageView
مع الأسلوب.override (int العرض، الطول int)
للانزلاق. يكون هذا مفيداً لإنشاء الصور المصغرة في التطبيق الخاص بك عند تحميل بحجم صورة مختلفة من الملقم. علما بأن الأبعاد البكسل ليس dp.
وتتوفر أيضا تحويل الصورة التالية:
-
fitCenter()
: تحجيم الصورة شكل موحد (المحافظة على نسبة العرض إلى الارتفاع الخاصة بالصورة) حيث يتم احتواء الصورة في منطقة معينة. ستتضح الصورة بأكملها، ولكن قد يكون هناك الحشو العمودي أو الأفقي. -
centerCrop()
: تحجيم الصورة شكل موحد (المحافظة على نسبة العرض إلى الارتفاع الخاصة بالصورة) حيث أن تملأ الصورة في مجال معين، مع قدر من عرض الصورة قدر الإمكان. إذا لزم الأمر، سيتم اقتصاص الصورة أفقياً أو رأسياً ملائمة.
8-تهيئة المحول
هنا نخلق لنا ريسيكليرفيو
مع جريدلايوتماناجير
كمدير للتخطيط، تهيئة المحول لدينا، وربطه ريسيكليرفيو.
1 |
// ...
|
2 |
@Override
|
3 |
protected void onCreate(Bundle savedInstanceState) { |
4 |
super.onCreate(savedInstanceState); |
5 |
setContentView(R.layout.activity_main); |
6 |
|
7 |
RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this, 2); |
8 |
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_images); |
9 |
recyclerView.setHasFixedSize(true); |
10 |
recyclerView.setLayoutManager(layoutManager); |
11 |
|
12 |
ImageGalleryAdapter adapter = new ImageGalleryAdapter(this, SpacePhoto.getSpacePhotos()); |
13 |
recyclerView.setAdapter(adapter); |
14 |
|
15 |
}
|
16 |
// ...
|
9-إنشاء تفاصيل النشاط
إنشاء نشاط جديد وتسميته سباسيفوتواكتيفيتي
. نحصل على سباسيفوتو
إضافية وتحميل الصورة بالانزلاق كما فعلنا من قبل. هنا نحن نتوقع الملف أو URL لتكون صورة نقطية
، حيث سنقوم باستخدام asBitmap()
ليجعل حصول الانزلاق صورة نقطية
. وإلا سوف يفشل التحميل وسيتم تشغيل رد الاتصال.error()-
تسبب المورد drawable عاد من رد خطأ سيظهر. يمكنك أيضا استخدام asGif()
إذا كنت تريد التأكد من أن الصورة تم تحميلها GIF. (سوف توضح كيفية عمل متحركة في الانزلاق قريبا).
1 |
import android.graphics.Bitmap; |
2 |
import android.graphics.Color; |
3 |
import android.os.Bundle; |
4 |
import android.support.v7.app.AppCompatActivity; |
5 |
import android.support.v7.graphics.Palette; |
6 |
import android.view.ViewGroup; |
7 |
import android.widget.ImageView; |
8 |
import com.bumptech.glide.Glide; |
9 |
import com.bumptech.glide.request.RequestListener; |
10 |
import com.bumptech.glide.request.target.Target; |
11 |
|
12 |
public class SpacePhotoActivity extends AppCompatActivity { |
13 |
|
14 |
public static final String EXTRA_SPACE_PHOTO = "SpacePhotoActivity.SPACE_PHOTO"; |
15 |
private ImageView mImageView; |
16 |
|
17 |
@Override
|
18 |
protected void onCreate(Bundle savedInstanceState) { |
19 |
super.onCreate(savedInstanceState); |
20 |
setContentView(R.layout.activity_photo_detail); |
21 |
|
22 |
mImageView = (ImageView) findViewById(R.id.image); |
23 |
SpacePhoto spacePhoto = getIntent().getParcelableExtra(EXTRA_SPACE_PHOTO); |
24 |
|
25 |
Glide.with(this) |
26 |
.load(spacePhoto.getUrl()) |
27 |
.asBitmap() |
28 |
.error(R.drawable.ic_cloud_off_red) |
29 |
.diskCacheStrategy(DiskCacheStrategy.SOURCE) |
30 |
.into(mImageView); |
31 |
}
|
32 |
}
|
علما أنه نحن أيضا تهيئة ذاكرة التخزين مؤقت فريدة من نوعها لتحميل الصور: DiskCacheStrategy.SOURCE. سأوضح أكثر حول ذاكرة التخزين المؤقت في مقطع لاحق.
مخطط تفصيلي
هنا مخطط لعرض النشاط من التفصيل. فإنه يعرض فقط ImageView
تمرير التي سيتم إظهار الإصدار الدقة الكاملة للصورة المحملة.
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<LinearLayout
|
3 |
xmlns:android="http://schemas.android.com/apk/res/android" |
4 |
android:layout_width="match_parent" |
5 |
android:layout_height="match_parent" |
6 |
android:orientation="vertical"> |
7 |
|
8 |
<ScrollView
|
9 |
android:layout_width="match_parent" |
10 |
android:layout_height="match_parent"> |
11 |
|
12 |
<LinearLayout
|
13 |
android:id="@+id/activity_character" |
14 |
android:layout_width="match_parent" |
15 |
android:layout_height="wrap_content" |
16 |
android:orientation="vertical" |
17 |
android:layout_gravity="center_vertical"> |
18 |
|
19 |
<ImageView
|
20 |
android:id="@+id/image" |
21 |
android:layout_width="match_parent" |
22 |
android:layout_height="wrap_content" |
23 |
android:adjustViewBounds="true" |
24 |
android:scaleType="fitCenter"/> |
25 |
|
26 |
</LinearLayout>
|
27 |
</ScrollView>
|
28 |
</LinearLayout>
|
10. التخزين المؤقت في الانزلاق
إذا كنت تراقب عن كثب، فسترى أن عندما يمكنك معاودة النظر في صورة التي تم تحميلها مسبقاً، فإنه يحمل حتى أسرع من ذي قبل. ما جعله أسرع؟ نظام للانزلاق التخزين المؤقت، وهذا ما.
بعد أن تم تحميل صورة مرة واحدة من الإنترنت، الانزلاق التخزين المؤقت هو في الذاكرة وعلى القرص، تكرار الحفظ طلبات شبكة الاتصال والسماح استرداد أسرع من الصورة. لذا، سوف تحقق الانزلاق أولاً إذا صورة متاح في أي الذاكرة أو في القرص قبل تحميله من الشبكة.
اعتماداً على التطبيق الخاص بك، رغم ذلك، قد تريد تجنب التخزين المؤقت — على سبيل المثال، إذا كان من المرجح الصور التي يتم عرضها إلى تغيير في كثير من الأحيان، ولا يكون حصرياً.
لذا كيف يمكنك تعطيل التخزين المؤقت؟
يمكنك تجنب ذاكرة التخزين المؤقت عن طريق استدعاء.skipMemoryCache(true)
. ولكن انتبه إلى أن الصورة لا تزال سوف يتم تخزينها مؤقتاً في القرص – منع ذلك أيضا، يمكنك استخدام الأسلوب.diskCacheStrategy (ديسككاتشيستراتيجي الاستراتيجية)
، التي تأخذ قيمة من قيم التعداد التالي:
-
DiskCacheStrategy.NONE
: يتم حفظ أية بيانات إلى ذاكرة التخزين المؤقت. -
DiskCacheStrategy.SOURCE
: البيانات الأصلية المحفوظة إلى ذاكرة التخزين المؤقت. -
DiskCacheStrategy.RESULT
: يحفظ نتيجة للبيانات بعد التحولات إلى ذاكرة التخزين المؤقت. -
DiskCacheStrategy.ALL
: تخزين البيانات الأصلية والبيانات المحولة.
لتجنب كل من الذاكرة وقرص التخزين المؤقت تماما، مجرد دعوة كلا الأسلوبين واحدة تلو الأخرى:
1 |
Glide.with(this) |
2 |
.load(spacePhoto.getUrl()) |
3 |
.asBitmap() |
4 |
.skipMemoryCache(true) |
5 |
.diskCacheStrategy(DiskCacheStrategy.NONE) |
6 |
.into(imageView); |
11-تطلب من المستمعين
في الانزلاق، يمكنك تنفيذ ريكويستليستينير
لرصد حالة الطلب قمت بإجرائها كما أن يتم تحميل الصورة. سيتم استدعاء واحد فقط من هذه الأساليب.
-
onException()
: تشغيل عند حدوث استثناء حتى يمكنك معالجة الاستثناءات في هذا الأسلوب. -
onResourceReady()
: إطلاق النار عندما يتم تحميل الصورة بنجاح.
العودة إلى التطبيق معرض الصور لدينا، دعونا تعديل العرض قليلاً باستخدام كائن ريكويستليستينير
الذي سيتم تعيين الصورة النقطية إلى ImageView
وأيضا تغيير لون الخلفية للتخطيط عن طريق استخراج الظلام ويهتز اللون لدينا صورة باستخدام الروبوت لوح API.
1 |
// ...
|
2 |
@Override
|
3 |
protected void onCreate(Bundle savedInstanceState) { |
4 |
// ...
|
5 |
Glide.with(this) |
6 |
.load(spacePhoto.getUrl()) |
7 |
.asBitmap() |
8 |
.error(R.drawable.ic_cloud_off_red) |
9 |
.listener(new RequestListener<String, Bitmap>() { |
10 |
|
11 |
@Override
|
12 |
public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) { |
13 |
return false; |
14 |
}
|
15 |
|
16 |
@Override
|
17 |
public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) { |
18 |
|
19 |
onPalette(Palette.from(resource).generate()); |
20 |
mImageView.setImageBitmap(resource); |
21 |
|
22 |
return false; |
23 |
}
|
24 |
|
25 |
public void onPalette(Palette palette) { |
26 |
if (null != palette) { |
27 |
ViewGroup parent = (ViewGroup) mImageView.getParent().getParent(); |
28 |
parent.setBackgroundColor(palette.getDarkVibrantColor(Color.GRAY)); |
29 |
}
|
30 |
}
|
31 |
})
|
32 |
.diskCacheStrategy(DiskCacheStrategy.SOURCE) |
33 |
.into(mImageView); |
34 |
}
|
35 |
// ...
|
هنا يمكن أيضا إخفاء مربع حوار تقدم إذا كان لديك واحدة. مع هذا التغيير الأخير، تأكد من تضمين التبعية لوح الألوان في build.gradle
الخاص بك:
1 |
dependencies { |
2 |
// ...
|
3 |
compile 'com.android.support:palette-v7:25.1.1' |
4 |
}
|
12-اختبار التطبيق
وأخيراً، يمكنك تشغيل التطبيق! انقر فوق صورة مصغرة للحصول على نسخة كاملة الحجم من الصورة.



10. الرسوم المتحركة
إذا قمت بتشغيل التطبيق، ستلاحظ على الإبهات المتداخل للرسوم متحركة التي يحدث بينما يتم عرض الصورة. الانزلاق هذا ممكناً بشكل افتراضي، ولكن يمكنك تعطيله باستدعاء dontAnimate()
، الذي سوف يتسبب فقط في الصورة ليتم عرضها دون أي حركة. يمكنك أيضا تخصيص الرسوم المتحركة الإبهات المتداخل باستدعاء الإبهات المتداخل (int المدة)
، تمرير المدة بالمللي ثانية تسريع ذلك أو تبطئ خطاها – 300 ميلي ثانية هو الافتراضي.
صور متحركة
أنها بسيطة جداً لعرض صورة GIF متحركة في التطبيق الخاص بك استخدام الانزلاق. أنها تعمل بنفس عرض صورة عادية.
1 |
ImageView gifImageView = (ImageView) findViewById(R.id.iv_gif); |
2 |
|
3 |
Glide.with(this) |
4 |
.load("http://i.imgur.com/Vth6CBz.gif") |
5 |
.asGif() |
6 |
.placeholder(R.drawable.ic_cloud_off_red) |
7 |
.error(R.drawable.ic_cloud_off_red) |
8 |
.into(gifImageView); |
إذا كنت تتوقع أن يكون GIF الصورة، استدعاء أسجيف ()
– وهذا يجعل التأكد من أن الانزلاق يتلقى GIF، وإلا سيفشل التحميل وسيظهر دراوابل
تم تمريرها إلى الأسلوب.error()
بدلاً من ذلك.
لعب الفيديو
ولسوء الحظ، الانزلاق لا يدعم تحميل الفيديو وعرض عبر عنوان URL. بدلاً من ذلك فإنه يمكنك فقط تحميل وعرض أشرطة الفيديو المخزنة بالفعل على الهاتف. إظهار شريط فيديو عن طريق تمرير به أوري إلى الأسلوب load().
1 |
Glide.with(context) |
2 |
.load(Uri.fromFile(new File("your/video/file/path")) |
3 |
.into(imageView) |
الاستنتاج
عمل عظيم! في هذا البرنامج التعليمي، ولقد بنيت صورة كاملة معرض تطبيق مع الانزلاق، وعلى طول الطريق تعلمت كيف تعمل المكتبة وكيف يمكن دمجه في المشروع الخاص بك. لقد تعلمت أيضا كيفية عرض الصور على حد سواء المحلية والبعيدة وكيفية إظهار GIFs المتحركة وأشرطة الفيديو، وكيفية تطبيق تحويلات الصورة مثل تغيير الحجم. ليس ذلك فحسب ولكن كنت قد رأيت كيف أنه من السهل لتمكين التخزين المؤقت، ومعالجة الأخطاء والمستمعين طلب مخصص.
لمعرفة المزيد عن الانزلاق، يمكنك الرجوع إلى الوثائق الرسمية الخاصة به. لمزيد من المعلومات حول ترميز للروبوت، تحقق بعض الدورات والدروس هنا في Envato Tuts + الأخرى!