2016-04-11 42 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平臺。 如果此答案對您正確,請不要忘記標記爲已回答。

相關問題