dewango / BottomNavigationBarXF

Bottom Navigation Bar for Xamarin Forms
MIT License
187 stars 97 forks source link

Tab color not working in IOS #105

Open tahirmehraj opened 6 years ago

tahirmehraj commented 6 years ago

Hi,

this is not working on iOS. I can't see the tab color and the icon badges. although they are working fine in Android. Attaching the screenshot below. Please help me Out

shivanimangla13 commented 6 years ago

Tab color is working but their corresponding tab icon and tab text color will set automatically according to the background color and bar theme of the tabbar you set.

and icon badges are also working in iOS Please see below:

Add custom renderer for iOS. It worked fine for me. "using System; using BottomBar.XamarinForms; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS; using SchoolApp.iOS; using System.ComponentModel;

[assembly: ExportRenderer(typeof(BottomBarPage), typeof(BottomBarPageRenderer))] namespace SchoolApp.iOS { class BottomBarPageRenderer : TabbedRenderer {

protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e);

if (e.NewElement != null)
{
    BottomBarPage bottomBarPage = e.NewElement as BottomBarPage;
    AddPropertyChangedHandlersForPages();
}

}

void AddPropertyChangedHandlersForPages() { BottomBarPage bottomBarPage = Element as BottomBarPage; foreach (var page in bottomBarPage.Children) { page.PropertyChanged += OnPagePropertyChanged; UpdateTabBadge(page); } } public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated);

BottomBarPage bottomBarPage = Element as BottomBarPage;
foreach (var page in bottomBarPage.Children)
{
    UpdateTabBadge(page);
}

}

void OnPagePropertyChanged(object sender, PropertyChangedEventArgs e) { if (e.PropertyName == BottomBarPageExtensions.BadgeCountProperty.PropertyName) { UpdateTabBadge((Page)sender); } } private void UpdateTabBadge(Page page) { if (TabBar != null && TabBar.Items != null) { var badgeCount = BottomBarPageExtensions.GetBadgeCount(page); var tabIndex = Tabbed.Children.IndexOf(page); TabBar.Items[tabIndex].BadgeValue = (badgeCount == 0 ? null : badgeCount.ToString()); } } } }"

image

Phenek commented 5 years ago

natively Xamarin.forms can custom the Background of Tabs:

    public class BottomMenu : BottomBarPage
    {
        public BottomMenu()
        {
            Children.Add(new NavigationPage(new Page())
            {
                Title = "MyMissions",
                Icon = "Book",
                BackgroundColor = Color.Aqua,  // <-- Here for iOS
            });

            foreach (var child in Children)
            {
                BottomBarPageExtensions.SetTabColor(child, Color.Aqua); // <-- Here for Android
            }
       }
}

You can Close.

Phenek commented 5 years ago

Hey @tahirmehraj, Maybe you already known? But with Xamarin.Forms 3.x you can put the Android Tabbed page at the Bottom and it's official!

I found this https://montemagno.com/xamarin-forms-official-bottom-navigation-bottom-tabs-on-android/

And the Xabre's Tab Badge Library , they did a Pre-release 2.1.0-pre.3 to support badges on it