[英]In Xamarin Forms 3.1, when using tabbed page with 4 tabs, how can I prevent “sliding” effect of tab bar on Android?
I have an app with four pages, and I want it to look similar to my (non-Xamarin) iOS app, so to have toolbar at the bottom. 我有一个有四页的应用程序,我希望它看起来类似于我的(非Xamarin)iOS应用程序,所以底部有工具栏。 Here is my MainPage.xaml file:
这是我的MainPage.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:local="clr-namespace:XaBLE1"
x:Class="XaBLE1.MainPage"
Title="Safe-T Sim" HeightRequest="768" WidthRequest="512"
BarBackgroundColor="#F1F1F1"
BarTextColor="Gray"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.BarItemColor="#666666"
android:TabbedPage.BarSelectedItemColor="Black"
>
<NavigationPage Title="Test" Icon="ElectTest.png"
HasNavigationBar="False">
<x:Arguments>
<local:TestPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Review" Icon="Review.png"
HasNavigationBar="False">
<x:Arguments>
<local:ReviewPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Setup" Icon="Gear.png"
HasNavigationBar="False">
<x:Arguments>
<local:SetupPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Info" Icon="Info.png"
HasNavigationBar="False">
<x:Arguments>
<local:InfoPage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
I don't care for the current look-and-feel on Oreo, which is to make the selected page tab larger and put the title, pushing the other tabs aside and removing the page title. 我不关心Oreo上的当前外观,这是为了使选定的页面选项卡更大并放置标题,将其他选项卡推到一边并删除页面标题。
Is there anyway to disable this behavior, and let it just be 4 tabs. 无论如何都要禁用此行为,并让它只是4个选项卡。 Note that this behavior does not happen if there are 3 tabs -- there is only darkening and slight enlarging of the icon & text, but both are visible.
请注意,如果有3个选项卡,则不会发生此行为 - 图标和文本只有变暗和略微放大,但两者都可见。
EDIT: I tried the answer suggested in the comments, but as noted I'm not sure this is trying to solve the same problem, and in any case does not change the behavior. 编辑:我尝试了评论中提出的答案,但正如所指出的,我不确定这是在尝试解决同样的问题,并且在任何情况下都不会改变行为。
It looks like you are looking for this (not implemented yet) feature: [Enhancement] Implement fixed mode for Bottom Navigation Bar Android (Github) 看起来你正在寻找这个(尚未实现)功能: [增强]实现底部导航栏Android(Github)的固定模式
I could solve it following this James Montemagno tutorial: Removing BottomNavigationView's Icon Shifting in Xamarin.Android and implementing my own Tabbed Page custom renderer: 我可以按照James Montemagno教程解决它:在Xamarin.Android中删除BottomNavigationView的Icon Shifting并实现我自己的Tabbed页面自定义渲染器:
using Android.Content;
using Android.Support.Design.Internal;
using Android.Views;
using FixedTabbedPage.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace FixedTabbedPage.Droid.CustomRenderers
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
public CustomTabbedPageRenderer(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (ViewGroup != null && ViewGroup.ChildCount > 0)
{
BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);
if (bottomNavigationMenuView != null)
{
var shiftMode = bottomNavigationMenuView.Class.GetDeclaredField("mShiftingMode");
shiftMode.Accessible = true;
shiftMode.SetBoolean(bottomNavigationMenuView, false);
shiftMode.Accessible = false;
shiftMode.Dispose();
for (var i = 0; i < bottomNavigationMenuView.ChildCount; i++)
{
var item = bottomNavigationMenuView.GetChildAt(i) as BottomNavigationItemView;
if (item == null) continue;
item.SetShiftingMode(false);
item.SetChecked(item.ItemData.IsChecked);
}
if (bottomNavigationMenuView.ChildCount > 0) bottomNavigationMenuView.UpdateMenuView();
}
}
}
private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
{
if (viewGroup == null || viewGroup.ChildCount == 0) return null;
for (var i = 0; i < viewGroup.ChildCount; i++)
{
var child = viewGroup.GetChildAt(i);
var typedChild = child as T;
if (typedChild != null) return typedChild;
if (!(child is ViewGroup)) continue;
var result = FindChildOfType<T>(child as ViewGroup);
if (result != null) return result;
}
return null;
}
}
}
You only have to add this code to your Android solution (refactoring namespaces) and here is the result: 您只需将此代码添加到Android解决方案(重构命名空间),结果如下:
For disabling tab swipe you can use PlatformConfiguration in your TabbedPage class 要禁用选项卡滑动,可以在TabbedPage类中使用PlatformConfiguration
public partial class MyTabbedPage : TabbedPage
{
public MainTabbedPage ()
{
InitializeComponent();
this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);
}
}
if you don't have MyTabbedPage class, add it than your axml file structure would look like this 如果你没有MyTabbedPage类,添加它比你的axml文件结构看起来像这样
<?xml version="1.0" encoding="utf-8" ?>
<MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XaBLE1.MainPage">
</MyTabbedPage>
It looks like, there is a simpler alternative since Android 9. 看起来,Android 9之后还有一个更简单的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.