如何使用Xamarin表單中的滾動菜單製作多個內容頁面的選項卡式頁面？

Question

我想製作一個帶有7個內容頁面的標籤頁面（在xamarin表單中，不在本地項目中）。但紅色的菜單欄（我不知道這個東西是什麼，所以我稱之爲菜單欄）不是一個滾動菜單，所以每個內容頁面的標題都沒有很好地顯示出來。就像這樣：

，我其實有

有人知道做這樣的事情？

件事，我希望它是

沒有看到一些代碼

Answer 1

嘛不能多說！ - 但我的假設是，你的問題是你的主題...

打開你的 'Tabbar.axml'，改變這一行代碼：

app:tabMode="fixed" 

要：

app:tabMode="scrollable" 

UPDATE：

那麼簡單，因爲在默認情況下添加新行app:tabMode="scrollable"是「固定」

不管怎麼說，你要求的，這裏是我Tabbar.axml：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/sliding_tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="?attr/colorPrimaryDark" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:tabIndicatorColor="@android:color/white" 
    app:tabGravity="fill" 
    app:tabMode="scrollable" /> 

Answer 2

您也可以通過創建一個CustomRednerer改變這一點。如果您想要在應用程序中創建多個選項卡式頁面，並且希望使用可滾動選項卡製作其中的一個，然後使用不可滾動選項卡製作其中一個，則我的解決方案很好。

這裏是Droid的項目代碼：

using Android.Support.Design.Widget; 
using App1; 
using App1.Droid; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.Android.AppCompat; 

[assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))] 
namespace App1.Droid 
{ 
    public class ScrollableTabbedPageRenderer : TabbedPageRenderer 
    { 
     public override void OnViewAdded(Android.Views.View child) 
     { 
      base.OnViewAdded(child); 
      var tabLayout = child as TabLayout; 
      if (tabLayout != null) 
      { 
       tabLayout.TabMode = TabLayout.ModeScrollable; 
      } 
     } 

    } 
} 

對於便攜式項目：

using System; 
using Xamarin.Forms; 

namespace App1 
{ 
    public class ScrollableTabbedPage : TabbedPage 
    { 
    } 

    public class App : Application 
    { 
     public App() 
     { 
      var tabbedPage = new ScrollableTabbedPage(); 
      for (int i = 0; i < 7; i++) 
      { 
       tabbedPage.Children.Add(this.GetMyContentPage(i)); 
      } 

      MainPage = new NavigationPage(tabbedPage); 
     } 

     private ContentPage GetMyContentPage(int i) 
     { 
      return new ContentPage 
      { 
       Title = "Tab number " + i, 
       Content = new StackLayout 
       { 
        Children = { 
         this.GetMyButton() 
        } 
       } 
      }; 
     } 

     private Button GetMyButton() 
     { 
      var myButton = new Button() 
      { 
       Text = "Welcome to Xamarin Forms!", 
      }; 

      myButton.Command = new Command(() => 
      { 
       myButton.Text = "Start" + DateTime.Now.ToString(); 
      }); 
      return myButton; 
     } 
    } 
} 

而對於結果你將會得到：

Answer 3

@帕維爾Kanarek您的代碼爲Droid項目完美工作。只需要修改構建錯誤即可進行更改。

更改行：

[assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))] 

到：

[assembly: ExportRenderer(typeof(TabbedPage), typeof(App1.Droid.ScrollableTabbedPageRenderer))] 

感謝您的解決方案。它完美地幫助了我。