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

Question

我想制作一個包含 7 個內容頁面的標簽頁（以 xamarin 形式，而不是在本機項目中）。 但是紅色的菜單欄（我不知道這個東西叫什么所以我叫它菜單欄）不是滾動菜單，所以每個內容頁的標題都沒有很好地顯示出來。 像這樣：

我真正擁有的東西

有人知道做這樣的東西嗎？

我希望它成為的東西

Answer 1

沒有看到一些代碼就不能說太多！ - 但我的假設是你的問題出在你的主題上......

打開你的“Tabbar.axml”並更改這行代碼：

app:tabMode="fixed" 

至：

app:tabMode="scrollable"

更新：

然后只需添加新行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

@Paweł Kanarek 您的 Droid 項目代碼運行良好。 只需進行更改即可解決構建錯誤。

更改行：

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

到：

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

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