如何在 Android 中制作底部选项卡？（Xamarin.Forms）答案

【问题标题】：How to make bottom Tab in Android?(Xamarin.Forms)如何在 Android 中制作底部选项卡？（Xamarin.Forms）
【发布时间】：2018-09-06 01:55:51
【问题描述】：

我正在使用 Xamarin.Forms 开发一个项目。

在 TabbedPage 中，我想在 Android 的屏幕底部显示标签栏。

所以我们创建了一个 CustomRenderer，如下页的示例代码所示。

Bottom Tabs for Xamarin.Android (in Xamarin.forms app)

另外，View的创建方式如下。

<BottonTabbedPage xmlns= ...>
    <BottonTabbedPage.Children>
        <NavigationPage Title="tab1">
            <x:Arguments>
                <local:Tab1Page />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="tab2">
            <x:Arguments>
                <local:Tab2Page />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="tab3">
            <x:Arguments>
                <local:Tab3Page />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="tab4">
            <x:Arguments>
                <local:Tab4Page />
            </x:Arguments>
        </NavigationPage>
    </BottonTabbedPage.Children>
</BottonTabbedPage>

我在 TabbedPage 上设置了隐藏工具栏。并且将TabPage1到TabPage4的工具栏设置为显示。

结果如下图所示。

image1

工具栏脱离屏幕，标签栏浮动。我认为示例代码中编写的填充指定不正确并修复它。

Bottom Tabs for Xamarin.Android (in Xamarin.forms app)

// viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
viewPager.SetPadding(0, 0, 0, 0);

结果，工具栏显示出来了，但标签栏在浮动时没有更正。

image2

如何将标签栏移动到屏幕底部？

我不想使用库来向下移动标签栏。只想通过修改CustomRenderer将标签栏向下移动。

【问题讨论】：

github.com/thrive-now/BottomNavigationBarXF
不，我不想使用这样的库。所以我的老板不允许。
有什么好主意...？
你能分享一个基本的演示来重现这个问题吗？
好的，既然我从现在开始工作，我会尽快发布。

标签： c# android visual-studio xamarin xamarin.forms

【解决方案1】：

在您的 xaml.CS（代码隐藏）文件中，您可以调用以下行将选项卡放在页面底部。

On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);

下面是我的实现

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

namespace Social.Mobile.Views
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();          
            On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);
        }
    }
}

【讨论】：

【解决方案2】：

XAML
<TabbedPage android:TabbedPage.ToolbarPlacement="Bottom" ...

C#
On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);
在构造函数中。

【讨论】：