Question

我正在寻找位于页面底部的标签。我尝试了xamarin forms TabbedPage，但对于 ios ，只有选项卡位于底部，而对于 android和Windows ，选项卡位于顶部。有什么方法可以实现此功能？

Answer 1

要实现这一点，您有3个选择：

1）要使用新的底部标签栏本机控件，您必须具有Xamarin Forms 3.1或更高版本。

在选项卡式页面上，您需要为底部放置位置添加android规范：

XAML

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    x:Class="YouProjectNameSpace.MyTabbedPage">
</TabbedPage>

或后面的c＃代码

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

namespace YouProjectNameSpace
{
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            On<Xamarin.Forms.PlatformConfiguration.Android>).SetToolbarPlacement(ToolbarPlacement.Bottom);
        }
    }
}

如果要进行更多自定义，可以添加：

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    BarBackgroundColor="#2196F3"
    BarTextColor="White"
    android:TabbedPage.BarItemColor="#66FFFFFF"
    android:TabbedPage.BarSelectedItemColor="White"
    x:Class="YouProjectNameSpace.MyTabbedPage">
</TabbedPage>

2）为选项卡式页面创建适用于Android的自定义渲染器，并将其移至底部

using System;
using Xamarin.Forms;

namespace YouProjectNameSpace
{
    public class CustomTabbedPage : TabbedPage
    {
    }
}

渲染器：

using System;
using Android.Content;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YouProjectNameSpace.Android
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context): base(context)
        {
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            this.InvertLayoutThroughScale();

            base.OnLayout(changed, l, t, r, b);
        }

        private void InvertLayoutThroughScale()
        {
            this.ViewGroup.ScaleY = -1;

            TabLayout tabLayout = null;
            ViewPager viewPager = null;

            for (int i = 0; i < ChildCount; ++i)
            {
                Android.Views.View view = GetChildAt(i);
                if (view is TabLayout tabs)
                    tabLayout = tabs;
                else if (view is ViewPager pager)
                    viewPager = pager;
            }

            tabLayout.ViewTreeObserver.AddOnGlobalLayoutListener(new GlobalLayoutListener(viewPager, tabLayout));

            tabLayout.ScaleY = viewPager.ScaleY = -1;
        }
    }

    private class GlobalLayoutListener : Java.Lang.Object, Android.Views.ViewTreeObserver.IOnGlobalLayoutListener
    {
        private readonly ViewPager viewPager;
        private readonly TabLayout tabLayout;

        public GlobalLayoutListener(ViewPager viewPager, TabLayout tabLayout)
        {
            this.viewPager = viewPager;
            this.tabLayout = tabLayout;
        }

        public void OnGlobalLayout()
        {
            this.viewPager.SetPadding(0, -this.tabLayout.MeasuredHeight, 0, 0);
            this.tabLayout.ViewTreeObserver.RemoveOnGlobalLayoutListener(this);
        }
    }
}

3）使用PXTabs之类的特定库，此库将创建完整的Xamarin Forms底部选项卡，而无需任何本机代码。

如果您想了解有关底部标签和渲染器的更多信息：

Setting TabbedPage Toolbar Placement and Color

Xamarin.Forms: Official Bottom Navigation/Bottom Tabs on Android

BottomNavigationBarXF

Answer 2

c＃代码成功了。

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

namespace YouProjectNameSpace
{
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        }
    }
}

Xamarin表单：如何在页面底部制作选项卡？

2 个答案: