How to ExportRenderer Multiple TabbedPage in Xamarin - xamarin

Question

I'm wondering about the Custom TabbedPageRenderer issue. I have created a file MyTabbedPageRenderer.cs in Xamarin iOS. Everything I set up in this is fine. Until I used Plugin.Badge. I have installed and configured in Project Xamarin iOS: AssemblyInfo.cs add: [assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))].
Yes, It does accept the Badge. However everything I set in: MyTabbedPageRenderer.cs becomes useless.
I try to move what is in BadgedTabbedPageRenderer.cs here into MyTabbedPageRenderer.cs. And I change [assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))] to [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]. However it still doesn't work.
MyTabbedPageRenderer.cs
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]
namespace xxxx.iOS
{
internal class MyTabbedPageRenderer : TabbedRenderer
{
private bool _initialized;
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
//TabBar.ClipsToBounds = true;
TabBar.TintColor = UIColor.Gray;
TabBar.BarTintColor = UIColor.White;
TabBar.BackgroundColor = UIColor.White;
MessagingCenter.Subscribe<object, int>(this, "Add", (obj, index) => {
TabBar.addItemBadge(index);
});
MessagingCenter.Subscribe<object, int>(this, "Remove", (obj, index) => {
TabBar.removeItemBadge(index);
});
}
public override void ViewWillAppear(bool animated)
{
if (!_initialized)
{
if (TabBar?.Items == null)
return;
foreach (var item in TabBar.Items)
{
item.Image = ScalingImageToSize(item.Image, new CGSize(20, 20)); // set the size here as you want
}
var tabs = Element as TabbedPage;
if (tabs != null)
{
for (int i = 0; i < TabBar.Items.Length; i++)
{
UpdateItem(TabBar.Items[i], tabs.Children[i].Icon, tabs.Children[i].StyleId);
}
}
_initialized = true;
}
base.ViewWillAppear(animated);
}
private void UpdateItem(UITabBarItem item, string icon, string badgeValue)
{
if (item == null) return;
if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
//change icon select
if (icon.EndsWith(".png"))
icon = icon.Replace(".png", "_selected.png");
else
icon += "_selected";
item.SelectedImage = UIImage.FromBundle(icon);
item.SelectedImage.AccessibilityIdentifier = icon;
item.SelectedImage = ScalingImageToSize(item.SelectedImage, new CGSize(20, 20)); // set the size here as you want
//change icon select
UITabBarAppearance app = new UITabBarAppearance();
app.ConfigureWithOpaqueBackground();
app.BackgroundColor = UIColor.Clear;
app.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes() { Font = UIFont.FromName("Roboto Medium", 12), ForegroundColor = Color.FromHex("#808080").ToUIColor() };
app.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes() { Font = UIFont.FromName("Roboto Medium", 13), ForegroundColor = Color.FromHex("#00AA13").ToUIColor() };
item.StandardAppearance = app;
if (UIDevice.CurrentDevice.CheckSystemVersion(15, 0))
{
item.ScrollEdgeAppearance = item.StandardAppearance;
}
}
}
public UIImage ScalingImageToSize(UIImage sourceImage, CGSize newSize)
{
if (UIScreen.MainScreen.Scale == 2.0) //#2x iPhone 6 7 8
{
UIGraphics.BeginImageContextWithOptions(newSize, false, 2.0f);
}
else if (UIScreen.MainScreen.Scale == 3.0) //#3x iPhone 6p 7p 8p...
{
UIGraphics.BeginImageContextWithOptions(newSize, false, 3.0f);
}
else
{
UIGraphics.BeginImageContext(newSize);
}
sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));
UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return newImage;
}
}
public static class TabbarExtensions
{
readonly static int tabBarItemTag = 9999;
public static void addItemBadge(this UITabBar tabbar, int index)
{
if (tabbar.Items != null && tabbar.Items.Length == 0) return;
if (index >= tabbar.Items.Length) return;
removeItemBadge(tabbar, index);
var badgeView = new UIView();
badgeView.Tag = tabBarItemTag + index;
badgeView.Layer.CornerRadius = 3;
badgeView.BackgroundColor = UIColor.Red;
var tabFrame = tabbar.Frame;
var percentX = (index + 0.56) / tabbar.Items.Length;
var x = percentX * tabFrame.Width;
var y = tabFrame.Height * 0.1;
badgeView.Frame = new CoreGraphics.CGRect(x, y, 7, 7);
tabbar.AddSubview(badgeView);
}
public static bool removeItemBadge(this UITabBar tabbar, int index)
{
foreach (var subView in tabbar.Subviews)
{
if (subView.Tag == tabBarItemTag + index)
{
subView.RemoveFromSuperview();
return true;
}
}
return false;
}
}
}
Update
MainView.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="#fff"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
xmlns:views="clr-namespace:xxx.Views"
x:Class="xxx.Views.MainView">
<!--Pages can be added as references or inline-->
<views:Page1 Title="Page 1" IconImageSource="homeicon" BackgroundColor="#fff"/>
<views:Page2 Title="Page 2" IconImageSource="feeds" BackgroundColor="#fff"/>
<views:Page3 Title="Page 3" IconImageSource="moneys" BackgroundColor="#fbfbfb" />
<views:Page4 Title="Page 4" IconImageSource="chats" BackgroundColor="#fff" plugin:TabBadge.BadgeColor="Red"
plugin:TabBadge.BadgeText="1"/>
<views:Page5 Title="Page 5" IconImageSource="usericon" BackgroundColor="#fff"/>
</TabbedPage>
Enable Plugin.Badge I added this line in AssemblyInfo.cs: [assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))] ----> Plugin.Badge it works, however everything I set in MyTabbedPageRenderer.cs not working
Everything works fine if I don't use: [assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))]
---> And this is what I want:
Ask for help from everyone. Thanks

Answer 1

I have tested it on my side.The badge effect works well,below is the step that might give you some insights.
As you mentioned, it could be achieved by creating a custom renderer for TabbedPage:
Step1: Move what is in BadgedTabbedPageRenderer.cs here into MyTabbedPageRenderer.cs
Step2: Add [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))] in AssemblyInfo.cs and MyTabbedPageRenderer.cs.
Step3: Add two lines in the page you want to achieve the badge effect in the child page.
plugin:TabBadge.BadgeColor="Red"
plugin:TabBadge.BadgeText="1"