سلام. توی این نوشته قراره یاد بگیریم چجوری یه انیمیشن گیف (GIF) آنلاین یا آفلاین رو توی یه برنامهٔ اندرویدی نمایش بدیم.
من واسه لود تصاویر آنلاین از کتابخونهٔ Glide استفاده می‌کنم و خوشبختانه این کتابخونه از انیمیشن‌های گیف هم پشتیبانی می‌کنه و واسه این نوشته من از همین کتابخونه استفاده می‌کنم.
ابتدا اندروید استودیو رو باز کنید و یه پروژه جدید بسازید. حالا کتابخونهٔ Glide رو با توجه به راهنمای خودش به پروژه اضافه کنید (اینجا). حالا واسه این‌که یکم نوشته طولانی‌تر بشه خودم اینجا می‌گم 🙂
افزودن کتابخانهٔ Glide به پروژه
اول فایل build.gradle پروژه رو باز کنید و مطمئن بشید که مخزن Maven Central تعریف شده، اگه نشده بود اضافش کنید:
...
allprojects {
repositories {
google()
mavenCentra
}
}
...
حالا فایل build.gradle ماژول app رو باز کنید و کتابخونه رو بهش اضافه کنید:
...
dependencies {
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}
...
برای این‌که آخرین نسخه رو استفاده کنید، حتما به صفحهٔ گیت‌هاب کتابخونه سر بزنید.
افزودن دو ImageView لایه اکتیویتی
خب حالا لایهٔ اکتیویتی که می‌خواهید گیف رو داخلش نشون بدید رو باز کنید (activity_main.xml) و دو تا ImageView بهش اضافه کنید:
<?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="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/offline_gif"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="Example GIF Image" />
<ImageView
android:id="@+id/online_gif"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="Example GIF Image" />
</FrameLayout>
اینجا ما دو تا ImageView داریم که اولی واسه نمایش گیف به‌صورت آفلاین از داخل خود برنامه و دومی هم واسه نمایش GIF به‌صورت آنلاینه.
حالا کلاس اکتیویتی مورد نظرتون رو باز کنید. ابتدا دو تا ImageView رو تعریف و مقدار دهی می‌کنیم:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
...
val offlineGif: ImageView = findViewById(R.id.offline_gif)
val onlineGif: ImageView = findViewById(R.id.online_gif)
...
}
}
نمایش GIF آفلاین
حالا فایل گیف رو داخل یکی‌از پوشه‌های drawable یا mipmap کپی می‌کنیم. بعد اون رو با استفاده از Glide نمایش می‌دیم:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
...
val offlineGif: ImageView = findViewById(R.id.offline_gif)
val onlineGif: ImageView = findViewById(R.id.online_gif)
Glide.with(this).load(R.drawable.giphy).into(offline_gif)
...
}
}
برای این‌که ببینید کد کار می‌کنه یا نه می‌تونید برنامه رو اجرا کنید.
نمایش GIF آنلاین
اما هنوز کارمون تموم نشده، قرار بود یه گیف آنلاین هم نمایش بدیم دیگه 🙂 روند کار این‌طوریه لینک مستقیم فایل گیف رو به Glide پاس می‌دیم و اونم اول فایل GIF رو دانلود می‌کنه و بعد هم به کاربر نمایش می‌ده. خیلی ساده کافیه به‌جای R.drawable.giphy توی کد بالا، لینک فایل GIF رو قرار بدین:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
...
val offlineGif: ImageView = findViewById(R.id.offline_gif)
val onlineGif: ImageView = findViewById(R.id.online_gif)
Glide.with(this).load(R.drawable.giphy).into(offline_gif)
Glide.with(this).load("https://example.ir/giphy.gif").into(online_gif)
...
}
}
اگه دوباره برنامه رو اجرا کنید، خواهید دید که به‌طرز معجزه‌آسایی فایل گیف دانلود و نمایش داده می‌شه 🙂
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبهٔ تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه دیدگاهی بی‌ارتباط با موضوع نوشته مطرح شود تایید نخواهد شد.
نظرات