web-dev-qa-db-ja.com

Xamarinフォーム：ページの下部にタブを作成する方法は？

ページ下部にあるタブを探しています。 xamarin forms TabbedPage を試しましたが、iosの場合はタブのみが下に表示され、Androidとwindowsタブが上部に表示されています。この機能を実現する方法はありますか？

xamarin.formstabbedpage
3
Sreejith Sree

これを実現するには、次の3つのオプションがあります。

1）新しい下部タブバーネイティブコントロールを使用するには、XamarinFormsバージョン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;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
using Xamarin.Forms;

namespace YouProjectNameSpace
{
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            On<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フォームの下部タブが作成されます。

下部のタブとレンダラーについて詳しく知りたい場合：

TabbedPageツールバーの配置と色の設定

Xamarin.Forms：Androidの公式下部ナビゲーション/下部タブ

BottomNavigationBarXF

11
FabriBertani

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);
        }
    }
}
0
Adil Saiyad