طريقة عمل ايقونة إشعارات مع عداد في القائمة العليا

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

سنشرح طريقة عمل هذه الإقونة على ActionBar وكيفية التحكم بالعداد من داخل ال MainActivity.cs.

أولاً : قم بإنشاء مجلد بإسم menu في داخل مجلد Resources ، إذا قمت بإنشاء هذا المجلد سابقاً تخطى هذه الخطوة .

ثانيا : قم بإنشاء ملف menu_actionbar.xml داخل مجلد menu، ويحتوي على الأتي:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/menu_hotlist"
        android:actionLayout="@layout/action_bar_notifitcation_icon"
        android:showAsAction="always"
        android:icon="@drawable/ic_bell"
        android:title="Show new Notifications" />

</menu>

إن كنت قد سبق و أنشات ملف menu وربطه بال Activity الخاصة بك فلا داعي أن تنشأه مجددا، قم فقط بإضافة الوسم <item> ضمن ملفك السابق.

لقد إستخدمنا ايقونة ic_bell يفترض أن تضع ايقونة في مسار drawable كايقونة جرس او كرة أرضية كما تحب، بمقاس 60*60 ويحبز ان تكون .png  .

وأستخدمنا أيضا ملف action_bar_notifitcation_icon سننشأه في الخطوة التالية.

ثالثاً : قم بإنشاء ملف action_bar_notifitcation_icon.axml في مسار layout يحتوي على:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_gravity="center"
    android:clickable="true"
    style="@android:style/Widget.ActionButton">

    <ImageView
        android:id="@+id/hotlist_bell"
        android:src="@drawable/ic_bell"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:layout_margin="0dp"
        android:contentDescription="bell"
        />

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/hotlist_text"
        android:layout_width="wrap_content"
        android:minWidth="17sp"
        android:textSize="12sp"
        android:textColor="#ffffffff"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@null"
        android:layout_alignTop="@id/hotlist_bell"
        android:layout_alignRight="@id/hotlist_bell"
        android:layout_marginRight="0dp"
        android:layout_marginTop="3dp"
        android:paddingBottom="1dp"
        android:paddingRight="4dp"
        android:paddingLeft="4dp"
        android:background="@drawable/rounded_square"/>
</RelativeLayout>

لقد إستخدمنا مجددا ايقونة ic_bell ، وملف rounded_square دعونا ننشأه في الخطوة التالية.

رابعاً : قم بإنشاء ملف بإسم rounded_square.xml في مسار drawable وهذا سيكون بمثابة خلفية العداد يمكن تعديل الألوان كما يناسب تطبيقك ولكن أفضل الأحمر، المحتوى :

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="#ffff0000" />
    <stroke android:color="#ff222222" android:width="2dp"/>
</shape>

وهكذا نكون خلصنا من تصميم الايقونة، ننتقل ربطها وطريقها التعامل مع العداد من داخل الكود -C#- .

خامساً :

اعمل override لدالة OnCreateOptionsMenu وانشئ ال View الخاص بالايقونة واعمل instance لحقل TextView لتعرض عليه عدد الإشعارات، كما موضح

TextView txtCount;
public override bool OnCreateOptionsMenu(IMenu menu)
 { MenuInflater.Inflate(Resource.Menu.menu_actionbar, menu); View notifyView = menu.FindItem(Resource.Id.menu_hotlist).ActionView;
txtCount = notifyView.FindViewById<TextView>(Resource.Id.hotlist_text);
return  base.OnCreateOptionsMenu(menu);
}

خامساً : نقوم بعمل دالة updateBell تقوم بتغيير قيمة العداد حسب القيمة التي ترسل لها:


private void updateBell(int notification) {
RunOnUiThread(() =>
{
if (notification == 0)
{
txtCount.Visibility = ViewStates.Invisible;
}else {
txtCount.Visibility = ViewStates.Visible;
txtCount.Text = notification.ToString();
}
});
}

إذا كنت تجلب الإشعارات من على السيرفر فيمكنك فقط إستدعاء دالة updateBell  مع عدد الإشعرات ك parameter.

النتيجة :

notificationbell

 

يمكن تحميل ملفات هذا المثال من قسم Samples ، فجميع التطبيقات المستخدمة في الشرح داخل موقع زامرن العرب متوفرة مفتوحة المصدر يمكنك تحميلها والإستفادة منها.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *