سبد خرید

آموزش استفاده و شخصی سازی Snackbar در اندروید

آموزش استفاده و شخصی سازی Snackbar در اندروید

Snackbar ازنظر عملکرد بسیار شبیه به Toast در اندروید هستش ولی دسترسی پذیری بیشتری داره.

اگر بخوام عملکرد اِسنَک‌بار رو توضیح بدم، مثل حالتی میمونه که فرضا میخوای یک پیامی رو به کاربر نشون بدی و یک مدت زمانی نشون داده بشه و بعدش از بین بره.

همونطور که بالاتر اشاره کردم گفتم تقریبا مثل Toast هستش، ولی از نظر رابط کاربری متفاوته.

مثلا:

  • توی اسنک‌بار میشه از دکمه استفاده کرد.
  • نسبت به Toast حالت مدرن‌تر و بروزتری داره.
  • دسترسی پذیری بیشتری داره.
  • راحتتر میشه شخصی سازیش کرد.

استفاده کردن از Snackbar

اول از همه میخوام خیلی ساده بگم که چطور میشه از اسنک‌بار استفاده کرد.

بعدش میریم سراغ شخصی سازی کردنش.

در استفاده کردن از Snackbar ما به 3 تا ورودی نیاز داریم.

  1. ورودی اول لایه ای که میخوای اسنک‌بار نشون داده بشه رو باید بهش بدی.
  2. ورودی دوم مربوط به متنی هستش که میخوای به کاربر نشون بدی.
  3. ورودی سوم هم زمانی هستش که میخوای اسنک‌بار نشون داده بشه.

به نمونه زیر توجه کن:

Snackbar.make(findViewById(android.R.id.content), "Details Updated Successfully", Snackbar.LENGTH_SHORT).show()

اگر به کد بالا با توضیحاتی که برای ورودی ها دادم توجه کنی، متوجه میشی که هرکدوم از اون ورودی ها شامل چه مواردی میشه.

توسط کد بالا ما یک اسنک‌بار ساده ساختیم و متن Details Updated Successfully رو به کاربر نمایش دادیم. (میتونی از هر پیام دیگه ای برای نمایش استفاده کنی)

شخصی سازی کردن Snackbar در اندروید

برای اینکه به اسنک‌بار دسترسی راحتتری داشته باشیم و تغییرات رو روش اعمال کنیم میتونیم اسنک‌بار رو داخل یک متغییر ذخیره کنیم.

مثل حالت زیر:

val mySnack = Snackbar.make(findViewById(android.R.id.content), "Details Updated Successfully",Snackbar.LENGTH_SHORT)

snackbar.show()

برای اعمال کردن تغییرات دیگه از متغییر mySnack استفاده میکنم و شخصی سازی هایی که نیاز دارم رو مستقیم روی این متغییر اعمال میکنم.

اعمال رنگ پسزمینه

برای اینکه بتونی برای اسنک‌بار یک رنگ پسزمینه دلخواهی رو اعمال کنی باید از کد زیر استفاده کنی:

mySnack.setBackgroundTint(ContextCompat.getColor(context, android.R.color.holo_red_dark))

من از رنگ های پیشفرض اندروید استفاده کردم.

خروجی کد بالا:

1_snackbar_customize_android_nouri_academy

تغییر رنگ متن

در اسنک‌بار ما میتونیم رنگ متن نوشته شده رو هم تغییر بدیم.

اگر به نتیجه قبلی توجه کنی، میبینی که رنگ متن نوشته شده به رنگ سفید هستش.

توسط کد زیر میتونی کنترل بیشتری روی رنگ متن هم داشته باشی.

mySnack.setTextColor(ContextCompat.getColor(context, android.R.color.black))

من از رنگ مشکلی برای اینکار استفاده کردم.

نتیجه کد بالا:

2_snackbar_customize_android_nouri_academy

اعمال فاصله از طرفین

توی حالت های قبلی اسنک‌بار کاملا به عرض و پایین صفحه چسبیده. خیلی راحت میتونی برای اسنک‌بار Margin اعمال کنی تا از طرفین فاصله داشته باشه.

برای اینکار من از کد زیر استفاده کردم.

val params = mySnack.view.layoutParams as (FrameLayout.LayoutParams)
params.setMargins(16, 0, 16, 32)
mySnack.view.layoutParams = params

توی کد بالا ما 4 تا عدد رو به عنوان ورودی setMargin اعمال کردیم.

این ورودی ها به ترتیب برای جهت های پایینراستبالاچپ هستند.

پس فاصله های به ترتیب طبق موارد زیر اعمال شدن:

  • چپ = 16
  • بالا = 0
  • راست = 16
  • پایین = 32

نتیجه کد بالا:

3_snackbar_customize_android_nouri_academy

اعمال یک Shape به عنوان پسزیمنه

علاوه بر رنگ، ما میتونیم از Shapeهایی که در پوشه drawable ساختیم هم استفاده کنیم.

برای اینکار من اول یک Shape رو با نام shape_round_double.xml داخل پوشه drawable میسازم.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android.R.color.holo_red_dark"/>
    <corners  android:radius="32dp"/>
</shape>

سپس توسط کد زیر میتونیم Shape ساخته شده رو به Snackbar اعمال کنیم.

mySnack.view.background = ContextCompat.getDrawable(this, R.drawable.shape_round_double)

نتیجه کد بالا:

4_snackbar_customize_android_nouri_academy

تغییر عرض Snackbar

اگر به تصاویر بالا توجه کنی متوجه میشی که اسنک‌بار ما کل عرض گوشی رو پر میکنه.

توسط کد زیر میتونیم بگیم هرچقدر که نیاز هست از عرض گوشی رو اشغال کنه.

درواقع میتونیم از خاصیت wrap_content استفاده کنیم.

val params = mySnack.view.layoutParams as (FrameLayout.LayoutParams)
params.width = FrameLayout.LayoutParams.WRAP_CONTENT
mySnack.view.layoutParams = params

نتیجه کد بالا:

5_snackbar_customize_android_nouri_academy

تغییر محل قرار گیری

علاوه بر موارد بالا، میتونی بگی که اسنک‌بار در کدوم قسمت از صفحه نمایش داده بشه.

درواقع میتونی محل قرارگیری اون رو تغییر بدی.

val params = mySnack.view.layoutParams as (FrameLayout.LayoutParams)
params.width = FrameLayout.LayoutParams.WRAP_CONTENT
params.gravity = Gravity.CENTER
mySnack.view.layoutParams = params

به کمک Gravity میتونی هر محلی که مدنظرت هست رو براش اعمال کنی.

نتیجه کد بالا:

6_snackbar_customize_android_nouri_academy_both

اعمال آیکن

در اسنک‌بار میتونی حتی آیکن هم برای اون در نظر بگیری.

مثلا برای کارهای مختلف آیکن های متفاوتی رو براش میتونی اعمال کنی.

آیکنی برای انجام موفقیت آمیز عملیات، اخطار، حذف کردن و…

برای اینکار من از کد زیر استفاده کردم.

val textView = mySnack.view.findViewById(com.google.android.material.R.id.snackbar_text) as TextView
textView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_outline_info, 0, 0, 0)
textView.compoundDrawablePadding = resources.getDimensionPixelOffset(R.dimen.default_padding)

نتیجه کد بالا:

8_snackbar_customize_android_nouri_academy

سعی کردم تمامی مواردی که برای شخصی سازی در Snackbar نیاز هست رو توضیح بدم.

اسنک‌بار در اپلیکیشن های بروز و مدرن اندروید بجای Toast مورد استفاده قرار میگیره و واقعا هم جِلوه خیلی خوبی داره.

دیدگاه‌ها ۰