Xamarin.Android的底部选项卡(在Xamarin.forms应用中) [英] Bottom Tabs for Xamarin.Android (in Xamarin.forms app)

问题描述

我正在使用Xamarin.forms制作应用程序.

大家都知道Xamarin.forms的TabbedPage位于Android的常规标签位于顶部. 因为如果它是尊重Android UX的Native Android应用程序就应该存在.

但是现在情况发生了变化. 甚至Google都宣布了新的底部标签栏，称为底部导航". https://github.com/roughike/BottomBar 许多主要应用都在使用底部的标签栏.

但是我不能使用新的底部导航. 因为我的应用程序基于Xamarin.forms并使用表单中的TabbedPage. 如果我尝试使用底部导航，将会更加复杂.

(我也正在通过表单制作iOS应用)

所以最好的方法是将本机选项卡移到底部.

所以我找到了. (也许是旧的) http://envyandroid.com/align-tabhost-at-bottom/

但是不知道如何在Xamarin.Android中使用. 你能帮我吗?

解决方案

曾经遇到过同样的问题，试图从GitHub上的代码创建自定义的TabbedPageRenderer，但由于几个类和接口的作用域为内部，所以运气不佳.找到了一个解决方案，虽然很老套，但在我们的案例中似乎可以很好地工作.

只需创建一个继承自TabbedPage的新BottomTabbedPage，即可为Android链接一个新的Renderer，然后按如下所示创建一个新的Renderer:

[assembly: ExportRenderer(typeof(BottomTabbedPage), typeof(BottomTabbedPageRenderer))]
namespace My.XForms.Droid.Renderers
{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            InvertLayoutThroughScale();

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

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

            TabLayout tabLayout = null;
            ViewPager viewPager = null;

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

            tabLayout.ScaleY = viewPager.ScaleY = -1;
            viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
        }
    }
}

仅缩放页面布局，然后再次缩放子级并不会解决问题，因为原始的TabbedPageRenderer会将ViewPager填充为不与TabLayout重叠，因此您所包含的页面将以开始的间隙出现，因此插入负填充解决该问题.

这不是一个理想的解决方案，它可以工作，但是至少您没有经历完整的TabbedPage实现.

I'm making app with using Xamarin.forms.

You all know regular tabs for Android from Xamarin.forms' TabbedPage is at top. Because it should be there if it's Native Android app that respect Android UX.

But things are changed now. Even Google announced new bottom tab bar called "bottom Navigation". https://github.com/roughike/BottomBar Many major apps're using bottom tab bar.

But I can't use new Bottom Navigation. Because my app is base on Xamarin.forms and uses TabbedPage from forms. It's going to be more complicated if I try to use bottom Navigation.

(I'm making iOS app from forms too)

So Best approach would be moving native Tabs to bottom.

So I found this. (maybe old) http://envyandroid.com/align-tabhost-at-bottom/

But don't know how to use in Xamarin.Android. Could you help me?

解决方案

Had ran the same issue, tried to create a custom TabbedPageRenderer from the code present at GitHub but no luck due to several classes and interfaces scoped as internal. Found a solution, a hacky one though, but seems to work fine in our case.

Simply created a new BottomTabbedPage inheriting from TabbedPage so you can link a new Renderer for Android, then create a new Renderer as follows:

[assembly: ExportRenderer(typeof(BottomTabbedPage), typeof(BottomTabbedPageRenderer))]
namespace My.XForms.Droid.Renderers
{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            InvertLayoutThroughScale();

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

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

            TabLayout tabLayout = null;
            ViewPager viewPager = null;

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

            tabLayout.ScaleY = viewPager.ScaleY = -1;
            viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
        }
    }
}

Just scaling the page layout and then scaling the children again doesn't make the trick because the original TabbedPageRenderer pads the ViewPager to not to overlap with the TabLayout, so your contained pages would appear with a starting gap so inserting the negative padding fixes that.

Not an ideal solution, just works, but at least you don't run through a full TabbedPage implementation.

这篇关于Xamarin.Android的底部选项卡(在Xamarin.forms应用中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！