شرح Snackbar في الاندرويد

برنامج تعليمي Snackbar مع مثال في Android Studio

يعد Snackbar أداة تبدو وكأنها لافتة صغيرة تنبثق في الجزء السفلي من شاشة هاتف المستخدم. قد يكون من المفيد جدًا الإشارة إلى أي نوع من أخطاء النموذج للمستخدم ، أو التأكيد للمستخدمين أنه تم اتخاذ إجراء ما ، أو تنبيههم لاتخاذ بعض الإجراءات. بالإضافة إلى ذلك ، يمكن أن يقدم Snackbar أيضًا زرًا لإجراء مخصص مثل "الرفض" أو "إعادة المحاولة" أو "التراجع" أو "التجاوز" وما إلى ذلك.

يشبه Android Snackbar تمامًا Toast في Android باستثناء أنه يمكن أن يوفر للمستخدم زر الإجراء action button للتفاعل معه . يمكنك استدعاء Snackbar على أنه عنصر واجهة مستخدم Toast باستخدام زر إجراء اختياري. أسمي زر الإجراء action button اختياريًا لأنك قد تختار إدراجه أو يمكنك فقط تجاهله ليبدو مشابهًا toast  (الذي لا يحتوي على زر إجراء).

بشكل عام ، يتم استخدام Snackbar عند طلب ملاحظات فورية من المستخدم بعد تنفيذ الإجراء.

يوجد بالفعل العديد من المكتبات على الإنترنت لصنع Snackbar في Android ؛ ولكن في هذا البرنامج التعليمي ، سنستخدم مكتبة     Material Design Support Library Android .

مزايا استخدام Snackbar  على ال Toast

فيما يلي بعض مزايا استخدام Snackbar على Toast :

1. يمكن برمجتها للتراجع عن أو عكس إجراء قام به مستخدم لم يمض وقت طويل. على سبيل المثال ، استعادة ملف محذوف مؤخرًا ، أو حتى إعادة فتح علامة تبويب المتصفح التي تم إغلاقها للتو.
2. يمكن للمستخدم تمرير شريط Snackbar يدويًا إلى اليمين أو اليسار لرفضه بسرعة ؛ على عكس toast  الذي يجب أن يبقى حتى نهاية الوقت المقرر له.
3. يتم عرض شريط Snackbar الخفيفة فقط في الجزء السفلي من الشاشة ، على عكس toast  الذي قد يعوق جزءًا مهمًا من الشاشة.

---

استخدام Snackbar في Android Studio

للاستفادة من Snackbar في مشروعك ، يجب عليك أولاً تضمين مكتبة Design Support Library  . وللقيام بذلك ، يمكنك إضافة الكود أدناه إلى ملف build.gradle (Module app) الخاص بك :

dependencies {
  implementation 'com.android.support:design:27.1.1'
  }

---

إنشاء Snackbar بدون ActionButton في Android Studio

هذا النوع من Snackbar يشبه إلى حد بعيد toast  باستثناء أنه يحتوي على جميع صفات Snackbar المحفوظة لزر action button .

Snackbar.make(coordinatorLayout, "Button is clicked", Snackbar.LENGTH_LONG);
  snackbar.show();

في الكود أعلاه:

تقبل طريقة make () - make () ثلاث (3) وسيطات : الأولى هي تخطيط الجذر للنشاط حيث سيتم عرض Snackbar ، والوسيطة الثانية هي الرسالة التي سيتم عرضها في Snackbar ، والثالثة هي مدة شريط الوجبات الخفيفة المراد عرضه.

طريقة العرض show () - show () تعرض شريط Snackbar

ملاحظة مهمة: إذا نسيت استدعاء طريقة show () لشريط Snackbar ، فلن يتم عرضها أبدًا .

---

إنشاء شريط Snackbar باستخدام زر Action Button في Android Studio

سيعرض الكود أدناه شريط Snackbar مع الرسالة "تم حذف الرسالة" مع زر action button 

 "UNDO" ؛ عند النقر فوق الزر "تراجع" ، سيتم عرض رسالة "تم استعادة الرسالة" في  آخر شريط Snackbar .

Snackbar snackbar = Snackbar
  .make(coordinatorLayout, "Message is deleted", snackbar.LENGTH_LONG)
  .setAction("UNDO", new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
  snackbar1.show();
  }
  });

  snackbar.show();

---

إنشاء شريط   Custom Snackbar  باستخدام زر Action Button

سيقوم الكود أدناه بإنشاء Snackbar بلون أصفر ولون زر إجراء أحمر.

Snackbar snackbar = Snackbar
  .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
  .setAction("RETRY", new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  }
  });
  snackbar.setActionTextColor(Color.RED);
  View sbView = snackbar.getView();
  TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
  textView.setTextColor(Color.YELLOW);
  snackbar.show();

---

تنسيق اللون والخلفية والحجم والمزيد في Snackbar

يمكنك استخدام ما يلي لتصميم Snackbar أو حتى زر الإجراء الخاص به.

// styling for action text
  snackbar.setActionTextColor(Color.WHITE);

  // styling for rest of text
  View snackbarView = snackbar.getView();
  TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
  textView.setTextColor(Color.RED);
  textView.setAllCaps(true);
  textView.setTextSize(20);

  // styling for background of snackbar
  View sbView = snackbarView;
  sbView.setBackgroundColor(Color.BLUE);

---

مثال على شريط  Snackbar في Android Studio

يوضح المثال أدناه نموذج التعليمات البرمجية لمشروع يقوم بتنفيذ عناصر واجهة مستخدم Snackbar. عندما ينقر المستخدم على الزر ، سيتم عرض Snackbar على الشاشة برسالة.

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة لمثال Snackbar في Android Studio.

تحميل المشروع  

الخطوة 1: قم بإنشاء مشروع جديد بالاسم  SnackbarExample

الخطوة 2: افتح build.gradle ( Module: app) وأضف مكتبة 

 design support  أدناه لمشروعك. سيسمح هذا بدعم Snackbar.

dependencies {
  implementation 'com.android.support:design:27.1.1'
  }

الخطوة 3: افتح الآن activity_main.xml وأدخل الكود أدناه :

نحن هنا نصمم مخطط مثال SnackBar باستخدام Linear Layout و TextView و Button. عند النقر على الزر ، سنعرض رسالة SnackBar.

<?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:paddingTop="100dp"
  android:paddingLeft="20dp"
  android:paddingRight="20dp">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:gravity="center_horizontal"
  android:text="Click button below to bring up snackbar" />

  <Button
  android:id="@+id/callbackButton"
  android:layout_width="300dp"
  android:layout_height="50dp"
  android:layout_gravity="center_horizontal"
  android:layout_margin="50dp"
  android:backgroundTint="@android:color/holo_blue_light"
  android:textColor="@android:color/white"
  android:text="Tap To Display Snackbar Message"/>

  </LinearLayout>

  </android.support.constraint.ConstraintLayout>

الخطوة 4: افتح MainActivity.java وأضف الكود أدناه:

هنا نقوم بتمكين رسالة SnackBar بضغطة زر. تُستخدم وظيفة showSnacbar لعرض رسالة SnackBar على الشاشة.

package snackbarexample.abhiandroid.com.snackbarexample;

  import android.support.design.widget.Snackbar;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;

  public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  Button button = (Button) findViewById(R.id.callbackButton);

  button.setOnClickListener(new View.OnClickListener() {
  public void onClick(View v) {
  // Button was clicked/tapped
  View view = findViewById(R.id.callbackButton);
  String message = "Snackbar message example displayed";
  int duration = Snackbar.LENGTH_SHORT;

  showSnackbar(view, message, duration);
  }
  });
  }

  public void showSnackbar(View view, String message, int duration)
  {
  Snackbar.make(view, message, duration).show();
  }

  }

المخرجات :

الآن قم بتشغيل التطبيق وسترى زرًا على الشاشة. الآن اضغط على الزر لعرض رسالة Snackbar.

---

ملخص سريع عن Snackbar

1. لاستخدام Snackbar ، تأكد من تضمين Android Design Support Library في مشروعك.
2. يجب عليك استدعاء طريقة show () قبل عرض Snackbar.
3. يجب استخدام زر action button   Snackbar للتفاعل  الخفيف مع المستخدم. أي إجراءات فورية.

في الختام ، يعد Snackbar مفيدًا جدًا ومفيدًا لتنبيه المستخدم بشأن إجراء تم تنفيذه مؤخرًا ، ويوفر خيارًا لعكس الإجراء الذي تم تنفيذه مؤخرًا.

تعديل المقال