Dynamically Increase වෙන Icon Badge එකක් හදාගන්න හැටි

අද මම කියලා දෙන්න යන්නේ තවත් මම කරපු පොඩි වැඩක්. මේක සරලවම කිවුවොත් ටිකක් විතර අමාරු වැඩක්. ඇත්තටම මොකක්ද මේක? ඔයාලා දැකල ඇති Facebook, Instagram app එකේ තියන Notification බාර් එකේ තියන Dynamic Notification icons. මම මේ කියන්නේ ඔයාගේ Friends Requests, Notifications, Messages කීයක් යනවාද කියලා පෙන්වන Dynamic Icons එක ගැන. ඉතින් මේවගේ එකක් හදාගන්න පුළුවන් ලේසිම ක්‍රමයක් තමයි මම දැන් මේ පෙන්වන්න හදන්නේ.

මේක කරන්න පුලුවන් ක්‍රම ගොඩක් තියනවා, ඒවගේ වෙනස් ක්‍රමයක් මේ blog post එකෙන් බලාගන්න පුළුවන් : https://alexdunn.org/2017/03/15/xamarin-controls-badgeview/

නමුත් මම කියලා දෙන්න හදන්නේ ටිකක් වෙනස් ම ක්‍රමයක් ගැනයි.හොදයි එහෙනම් අපි බලමු මගේ ක්‍රමය මොකක්ද කියලා.

මෙම ක්‍රමයේදී මම Dependency Services භාවිතාකිරීමට තමා සූදානම් වෙන්නේ. ඒ සඳහා ඔයාගේ App එකට අලුතින් Interface එකක් එකතු කරලා Method එකක්කුත් එකතු කරගන්න අවශ්‍යයි. මෙහිදී මගේ interface එක නම IToolbarItemBadgeService කියලා ලබාදෙනවා ඊට පස්සේ SetBadge කියලා අලුතින්එ method කක් ලියාගන්නවා. මතක තියාගන්න මේ Interface එක හදන්න ඔනි ඔයාගේ Shared Project එකේ බව

මේ පහලින් තියෙන්නේ ඒ Method එකයි interface එකයි,

public interface IToolbarItemBadgeService
    {
        void SetBadge(Page page,ToolbarItem item, string value,Color   backgroundColor,Color textColor);
    } 

දැන් ඔයාගේ Project එකේ Android හා iOS  වලට වෙන වෙනම Classes Create කරලා ඒ එක් එක් classes වල අපි කලින් හදපු interfaces එක implement කරගන්න.

[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace ToolbarItemBadgeSample.Droid.Services
{
    public class ToolbarItemBadgeService : IToolbarItemBadgeService
    {
        public void SetBadge(Page page,ToolbarItem item, string value,Color backgroundColor,Color textColor)
        {
            //Implementation here
        }
    }
}

දැන් මෙන්න මේ Github URL එකට ගිහින් මේ C# Class එක Download කරගන්න,

https://github.com/CrossGeeks/ToolbarItemBadgeSample/blob/master/ToolbarItemBadgeSample/ToolbarItemBadgeSample.Android/BadgeDrawable.cs

මෙ add කරගත්තු C# Class එක ඔයගේ Project එකට Add කරගන්න.

දැන් මේ badge ඒක tool bar එකක්ට එකතු කරගන්න ඔයා මුලින්ම Plugin.CurrentActivity  කියන Plugin එක Add කරන්න ඔනි.

දැන් අපි උඩ ලියපු SetBadge method එකට පහල code එක දාගන්න ඔනි.

using Plugin.CurrentActivity;
using ToolbarItemBadgeSample.Droid.Services;
using ToolbarItemBadgeSample.Services;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace ToolbarItemBadgeSample.Droid.Services
{
    public class ToolbarItemBadgeService : IToolbarItemBadgeService
    {
        public void SetBadge(Page page,ToolbarItem item, string value,Color backgroundColor,Color textColor)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                var toolbar = CrossCurrentActivity.Current.Activity.FindViewById(Resource.Id.toolbar) as Android.Support.V7.Widget.Toolbar;
                if (toolbar != null)
                {
                    if (!string.IsNullOrEmpty(value))
                    {
                        var idx = page.ToolbarItems.IndexOf(item);
                        if (toolbar.Menu.Size() > idx)
                        {
                            var menuItem = toolbar.Menu.GetItem(idx);
                            BadgeDrawable.SetBadgeText(CrossCurrentActivity.Current.Activity, menuItem, value, backgroundColor.ToAndroid(), textColor.ToAndroid());
                        }
                    }
                }
            });
        }
    }
}

මෙහිදී iOS සඳහා වෙනම පොඩි Objective C කොටසක් එකතු කරගන්න වෙනවා. ඒ Code එක පහල තියන විදියට iOS වලට add කරගන්න.

public static class BarButtonItemExtensions
    {
         … 
        public static void UpdateBadge(this UIBarButtonItem barButtonItem, string text, UIColor backgroundColor, UIColor textColor)
        {
            var bLayer = GetBadgeLayer(barButtonItem);

            if (string.IsNullOrEmpty(text) || text == "0")
            {
                bLayer?.RemoveFromSuperLayer();

                objc_setAssociatedObject(barButtonItem.Handle, BadgeKey.Handle, new CAShapeLayer().Handle, AssociationPolicy.ASSIGN);
                return;
            }

            var textLayer = bLayer?.Sublayers?.First(p => p is CATextLayer) as CATextLayer;
            if (textLayer != null)
            {
                    textLayer.String = text;
            }
            else
            {
                barButtonItem.AddBadge(text, backgroundColor, textColor);
            }
        }

    }

හොදයි දැන් ඔයා මේ සියලුම දේවල් හරියටම කරානම්, පහල තියන output එක දැකගන්න පුළුවන්.