2016-04-11 45 views
2

我一直在研究两个Xamarin表单项目,并且都需要跨iOS和Android的底部工具栏。我一直在努力使用Xamarin表单将Android的底部工具栏放在一起。我试图为Android编写一个自定义TabbedRenderer,但似乎无法找到正确的方法来重写以将标签推到底部。我还尝试在每个页面的底部使用StackLayout,但结果看起来不太好 - 切换标签页时,标签页会在页面加载时闪烁。如何使用Xamarin表单为Android创建底部工具栏

是否有任何更好的解决方案来编写带有Xamarin表单的底部工具栏,或者在不久的将来,Xamarin表单会附带一个“本机”底部工具栏,因为Google现在正式采用底部导航并更新了Material Design规范。?

谢谢!

using System; 
using Xamarin.Forms.Platform.Android; 
using Android.App; 
using Xamarin.Forms; 

[assembly: ExportRenderer(typeof(TabbedPage), typeof(ylbCross.Droid.CustomTabRenderer))] 

namespace MyApp.Droid 
{ 
    public class CustomTabRenderer : TabbedRenderer 
    { 
     private Activity _activity; 

     protected override void OnElementChanged (ElementChangedEventArgs<TabbedPage> e) 
     { 

      base.OnElementChanged (e); 

      _activity = this.Context as Activity; 


     } 

     public override void OnWindowFocusChanged(bool hasWindowFocus) 
     { 
      ActionBar actionBar = _activity.ActionBar; 

      if (actionBar.TabCount > 0) 
      { 
       ActionBar.Tab tabOne = actionBar.GetTabAt(0); 
       tabOne.SetIcon (Resource.Drawable.home_Blue48); 

       tabOne.TabSelected += (sender, e) => { 
        tabOne.SetIcon (Resource.Drawable.home_Blue); 
       }; 
       tabOne.TabUnselected += (sender, e) => { 
        tabOne.SetIcon (Resource.Drawable.home_Grey); 
       }; 

       ActionBar.Tab tabTwo = actionBar.GetTabAt(1); 
       tabTwo.SetIcon (Resource.Drawable.QA_Grey); 
       tabTwo.TabSelected += (sender, e) => { 
        tabTwo.SetIcon (Resource.Drawable.QA_Blue); 
       }; 
       tabTwo.TabUnselected += (sender, e) => { 
        tabTwo.SetIcon (Resource.Drawable.QA_Grey); 
       }; 

       ActionBar.Tab tabThree = actionBar.GetTabAt(2); 
       tabThree.SetIcon(Resource.Drawable.consulting_Grey); 
       tabThree.TabSelected += (sender, e) => { 
        tabThree.SetIcon (Resource.Drawable.consulting_Blue); 
       }; 
       tabThree.TabUnselected += (sender, e) => { 
        tabThree.SetIcon (Resource.Drawable.consulting_Grey); 
       } 

       ActionBar.Tab tabFour = actionBar.GetTabAt(3); 
       tabFour.SetIcon(Resource.Drawable.aboutMe_Grey); 
       tabFour.TabSelected += (sender, e) => { 
        tabFour.SetIcon (Resource.Drawable.aboutMe_Blue); 
       }; 
       tabFour.TabUnselected += (sender, e) => { 
        tabFour.SetIcon (Resource.Drawable.aboutMe_Grey); 
       } 

      } 

      base.OnWindowFocusChanged(hasWindowFocus); 
     } 
    } 
} 
+1

您是否设法解决这个问题? – CodeKiwi

回答

0

我觉得这个问题是重复的。 你可以在这里找到解决方案:

Duplicated question answer (XF Bottom navigation bar)

总之,你应该使用第三方控制或者如果你是一个优秀的设计师,你可以轻松地创建自己的底栏。

在这个答案中的提议的组件,使用Material Design的Android平台。 如果此答案对您正确,请不要忘记标记为已回答。

相关问题