基本原理
最新的android Material Design 指南谈到了底部导航栏。
https://material.io/guidelines/components/bottom-navigation.html#
执行
在 TabbedPage 上公开一个开关，使其使用 BottomNavigationView 在 android 上呈现。
public static class TabbedPage
{
public static readonly BindableProperty UseBottomNavigation;
public static bool GetUseBottomNavigation(BindableObject element);
public static void SetUseBottomNavigation(BindableObject element, bool value);
public static bool UseBottomNavigation(
this IPlatformElementConfiguration<Android, FormsElement> config
);
public static IPlatformElementConfiguration<Android, FormsElement> SetUseBottomNavigation(
this IPlatformElementConfiguration<Android, FormsElement> config,
bool value
);
}
预期结果
TabbedPage 使用BottomNavigationView 呈现。
对 CSS 的影响
没有任何。
向后兼容
没有任何。
难度：中等
要么映射是自然的，所以很容易，否则我们不应该把它推到 TabbedView 中，我们需要重新审视设计。
kingces95
所有89条评论
相关 #1400
davidortinau
于 2018-01-26
嗨，我刚刚就这个问题打开了一个拉取请求。 我对实施有一些疑问，但这是一个起点。
映射已经很明显了。
mikescandy
于 2018-01-30
我真的很期待这个拉取请求被合并到 Xamarin Forms 中。 是否有 ETA 之类的。 我还没有找到任何可行的解决方案来在 Android 底部设置标签页。
lemieuxs
于 2018-03-19
@mikescandy 对此有何更新？
rcunniffe
于 2018-04-17
最后，我对这件事望而却步了这么久！
非常感谢！
topfunet
于 2018-05-25
此增强功能何时推出？
niels9001
于 2018-05-29
+1
我可以在每晚构建时获得它吗？ 抄送@PureWeen @davidortinau
rcunniffe
于 2018-05-29
它是如何工作的？ 我们是否也可以在我们的 Forms 应用程序的 XAML 中设置它（作为 TabbedPage 的属性）？
niels9001
于 2018-05-29
@netonjm我认为这只是一个道具“UseBottomNavigation” https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/AppCompat/Tabbeds#Renderer6
但不太确定细节（图标和颜色）。
rcunniffe
于 2018-05-29
这就是我 ：-）
netonjm
于 2018-05-29
哎呀
rcunniffe
于 2018-05-29
@niels9001你可以在这里看到设置图标等的所有选项
PureWeen
于 2018-05-29
因此，通过在 XAML 中设置“UseBottomNavigation”，它将在 Android 和 iOS 的底部显示标签栏（就像它已经为 TabbedPage 所做的那样），对吧？
太棒了：D！ 此增强功能是否已经包含在最新的预发布 NuGet 包中？ 如果没有，关于此的任何预计到达时间？
niels9001
于 2018-05-29
@niels9001和@PureWeen我已经为版本 2 安装了 xamarin 表单3.1.0.506097升级。似乎现在可以工作，但我认为这在那里不可用是对的吗？
任何人都可以解释何时卡片（在完成的封闭列等上）从这里合并到夜间的过程https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124？
还有这个板子有什么关系？ https://github.com/xamarin/Xamarin.Forms/projects/6
谢谢！
rcunniffe
于 2018-06-01
好的，通过拉取请求，最终这样做是为了让它在 xamarin.forms 上工作
private Xamarin.Forms.TabbedPage __bottomBarPage;
private INavigationService __navigationService;
private Page __currentPage;
public BottomTabBarPageBuilder(INavigationService navigationService)
{
__navigationService = navigationService;
__bottomBarPage = new Xamarin.Forms.TabbedPage();
__bottomBarPage.BarTextColor = (Color)App.Current.Resources["tile2"]; // Setting Color of selected Text and Icon
__bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
// You can only define the color for the active icon if you set the Bottombar to fixed mode
//__bottomBarPage.Navigation..FixedMode = true;
}|
别介意我的代码，但主要部分是__bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);这是正确的方法吗？
rcunniffe
于 2018-06-01
是的，这是正确的方法。 这是一个平台特定的东西，所以只需要在呈现控件之前设置它。
PureWeen
于 2018-06-01
嘿，这支持固定模式吗？！ 我找不到设置它的方法
maherzaidoune
于 2018-06-03
@maherzaidoune还没有。
我已经对初始实现进行了一些研究，但决定将其留给下一个版本。
只是为了清楚你在谈论这个吗？
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android
PureWeen
于 2018-06-04
我有点不解。 我们应该在哪里设置 ToolBarPlacement？
`命名空间 Test.Mobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
公共部分类 TestPage ：Xamarin.Forms.TabbedPage
{
public Test()
{
InitializeComponent();
On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
}`
像这样？
niels9001
于 2018-06-05
@PureWeen On<Android>().SetElevation();工作的？ 我试图用一些浮点值设置它，但我没有看到任何效果。 我想添加一些阴影来区分页面内容和底部栏。
b1mn
于 2018-06-05
@niels9001是的
这对你有用吗？
PureWeen
于 2018-06-06
@PureWeen不，我在 MainPage.xaml.g.cs（这是 MasterDetail 视图，TabbedPage 位于其中的 Detail 部分）中收到此错误
未处理的异常：
System.TypeLoadException：无法解析带有标记 0100008e 的类型（来自类型引用、类/程序集 Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement、Xamarin.Forms.Core、Version=2.0.0.0、Culture=neutral、PublicKeyToken=null）
niels9001
于 2018-06-06
我很惊讶。 杰出的。 @PureWeen 非常感谢。
15mgm15
于 2018-06-06
@PureWeen如果我可以帮助实现徽章，请告诉我。
15mgm15
于 2018-06-06
@niels9001该错误通常意味着某些内容与库不同步。 你能删除所有的 obj/bin 文件夹并确保你在任何地方都安装了相同版本的 Xam Forms 吗？
https://forums.xamarin.com/discussion/83410/could-not-resolve-type-with-token-01000012
PureWeen
于 2018-06-06
@PureWeen谢谢，那
我们如何设置整个栏的背景颜色？ 或者启用投影？
niels9001
于 2018-06-06
如果底部 TabbedPage 的子页面（选项卡）是 NavigationPage，那么它及其内容（带有 ScrollView 的 ContentPage）将呈现在选项卡栏下方。 (3.1-pre3)
bdgza
于 2018-06-07
干得好！
但为什么最多 5 个孩子呢？ 当我尝试添加更多时它崩溃了。
DevEddy
于 2018-06-07
5 在 Android 中设置为最大项目数。
见https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java
mikescandy
于 2018-06-07
原来如此。 谢谢！
真难过：/
DevEddy
于 2018-06-07
是的，我以最好的方式来回帮助用户解决这个问题。 如果你看有一个 GetMaxCount 你可以调用它现在只为底部选项卡返回一个 5，为顶部选项卡返回一个最大整数。 我会看看我是否可以传播更有用的错误消息:-)
PureWeen
于 2018-06-07
@bdgza
感谢您的举报。 我为此创建了一个问题
https://github.com/xamarin/Xamarin.Forms/issues/2993
PureWeen
于 2018-06-08
@PureWeen BarBackgroundColor 放置在 Android 底部时似乎无法更改栏的背景颜色？
niels9001
于 2018-06-12
@niels9001你有机会复制吗？
我测试过，对我来说它有效
PureWeen
于 2018-06-13
嘿，是否可以在切换页面时禁用该动画？ 我的意思不是图标动画而是过渡动画
编辑：我还想问一下，如果我想要最新的更改，我应该使用每晚构建还是预发布？ 因为看起来 pre4 比当前的夜间版本更新
dstarec
于 2018-06-13
@dstarec一个新的 3.2 每晚在 myget 上发布
目前没有，但你要问的是这个
https://github.com/xamarin/Xamarin.Forms/issues/2948
对？
PureWeen
于 2018-06-19
@PureWeen
是的，好像是
dstarec
于 2018-06-20
@PureWeen
如何禁用 Shift 模式？
我从这里提取了 James 的代码： https :
为Android添加了自定义渲染器，但我不能这样调用，因为我不知道底部导航视图的Id：
var bottomNavigation = FindViewById
bottomNavigation.SetShiftMode(false, false);
编辑：
到目前为止，我能够做到的唯一方法是递归循环遍历 ViewGroup 中的视图以找到底部导航视图。
LynoDesu
于 2018-06-20
有没有去除换档模式的解决方案？
amrkamal1993
于 2018-06-20
@LynoDesu @amrkamal1993将在即将发布的版本中解决
https://github.com/xamarin/Xamarin.Forms/issues/3083
PureWeen
于 2018-06-20
@amrkamal1993我通过使用自定义渲染器解决了这个问题。 等我回家后我会发布我的代码
LynoDesu
于 2018-06-20
@amrkamal1993 @maherzaidoune
请参阅此处的要点：
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb
LynoDesu
于 2018-06-20
@LynoDesu我如何实现禁用换档模式？ 我使用了你的代码，但没有任何改变
amrkamal1993
于 2018-06-21
你是如何实施的？ 使用我的代码，您需要使用自定义控件 BottomNavTabPage 而不是 TabbedPage：
<?xml version="1.0" encoding="utf-8" ?>
<controls:BottomNavTabPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MyProject.App.Views;assembly=MyProjects.App"
xmlns:controls="clr-namespace:MyProject.App.Controls;assembly=MyProjects.App"
x:Class="MyProject.App.Views.MainTabPage"
Title="">
<views:NewsFeed></views:NewsFeed>
<views:Rewards></views:Rewards>
<views:Nominations></views:Nominations>
<views:Notifications></views:Notifications>
</controls:BottomNavTabPage>
LynoDesu
于 2018-06-21
如何在底部选项卡中添加徽章文本？
nhdanh
于 2018-06-21
@LynoDesu thx 终于成功了！！ ^_^
amrkamal1993
于 2018-06-21
@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
这可能对你有帮助:)
amrkamal1993
于 2018-06-21
@amrkamal1993 ：谢谢，但我试试这个插件。 当我使用底部栏时，它不会添加徽章文本。
nhdanh
于 2018-06-21
@nhdanh标签仍然与顶部相同，它应该与新功能一起使用..底部标签放置
amrkamal1993
于 2018-06-21
@amrkamal1993当我设置为 On
nhdanh
于 2018-06-21
还有什么关于徽章文字的吗？
nhdanh
于 2018-06-25
@LynoDesu 太棒了！ 您的解决方案帮助我度过了愉快的一天！ 谢谢！
syed-pelican
于 2018-06-25
我尝试将 Xamarin.Forms 更新到最新版本，当我尝试在 TabbedPage 类中设置 ToolbarPlacement 时出现此错误：
未处理的异常：
System.TypeLoadException：无法使用标记 01000029 解析类型（来自类型引用、类/程序集 Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement、Xamarin.Forms.Core、Version=2.0.0.0、Culture=neutral、PublicKeyToken=null）
我不知道我做错了什么，我认为这个错误与 nuget 包的版本有关。 我能做些什么来解决它？
aalbendin
于 2018-06-25
@aalbendin如果某些东西已经过时或者只是没有构建正确的库，就会发生这种情况。 我建议删除您所有的 bin/obj 文件夹，然后重建您的项目，这应该可以解决它。
进一步的用户遇到了同样的问题，并为他们解决了
https://github.com/xamarin/Xamarin.Forms/issues/1675#issuecomment -395211876
PureWeen
于 2018-06-25
这在稳定的 3.1.0.583944 版本上可用吗？ 我已经添加了
cassionandi
于 2018-07-04
还有其他人试图隐藏 TabbedNavigationBar 吗？ 如果我将VisibiltyStates.Gone设置为BottomNavigationView ，我在 Android 上遇到了一个问题，该视图不会被完全关闭：
15mgm15
于 2018-07-05
@15mgm15该问题与
https://github.com/xamarin/Xamarin.Forms/issues/3055
显示内容的 ViewPager 占底部导航栏的高度，以便内容不会隐藏在它后面。 为了再次占用该内容，它必须重新布局 viewpager，但现在没有任何东西可以监视该可见性和更改
你的用例是什么？ 你能不能把一个模态页面推到堆栈上，这样它就覆盖整个屏幕而不是试图隐藏底部导航栏？
PureWeen
于 2018-07-05
@PureWeen感谢您的回复！ 不幸的是，使用模态页面会破坏客户端设计，因此我必须找到解决方案。
15mgm15
于 2018-07-05
@15mgm15如果您使用顶部导航栏，它会做同样的事情吗？ 或者这只发生在底部导航栏上？
PureWeen
于 2018-07-05
@PureWeen实际上，这很好，让我检查一下并让您知道。
15mgm15
于 2018-07-06
@PureWeen使用正常的 tav 栏一切正常， TabbedPageRenderer的TabLayout隐藏或显示为我们满意。 但是我尝试在布局参数上将高度设置为 0 并且它确实有效！
BottomNavigationView _bottomBar;
...
if (_extendedTabbedPage.BottomTabBarHidden)
{
_layoutParams.Height = 0;
_bottomBar.LayoutParameters = _layoutParams;
}
else
{
_layoutParams.Height = _bottomBarHeight;
_bottomBar.LayoutParameters = _layoutParams;
}
15mgm15
于 2018-07-07
嘿，很高兴听到！！ 一旦https://github.com/xamarin/Xamarin.Forms/issues/3055得到修复，我希望能够稍微平滑一些粗糙的部分
@cassionandi你还有问题吗？ 如果您在构造函数中设置导航栏位置或使用 XAML，则不会有任何问题
PureWeen
于 2018-07-09
如果不设置标签，而只设置图标，则图标不会垂直居中对齐。 看起来很奇怪，好像缺少一个标签。
这是预期的行为吗？ 如果图标位于中心（如 Android 上的 Outlook 应用程序），那就太好了。
niels9001
于 2018-07-09
我想我错过了一些东西。 我更新了 Xamarin Forms 以发布 3.1.0.583944 但我在行On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);上遇到两个错误
当前上下文中不存在名称 ToolbarPlacement'
和
错误 CS1061：'IPlatformElementConfiguration
有什么建议？
bverp
于 2018-07-11
@bverp
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific
?
PureWeen
于 2018-07-11
如果有人想要覆盖 OnTabReselected事件或想要向选项卡添加徽章或想要隐藏底部导航视图，这里是一个示例：
https://gist.github.com/15mgm15/76914bf623e33676252864ac1898e7f9
15mgm15
于 2018-07-11
@bverp关闭 VS，删除 obj 和 bin 文件夹并重新启动项目。 那应该有用，至少对我有用。
niels9001
于 2018-07-12
@ niels9001对我不起作用。 @bverp你让它工作了吗？ 我尝试下载并构建此项目，但收到错误消息：当前上下文中不存在名称 ToolbarPlacement'
https://github.com/15mgm15/XamarinFormsBottomTabbedPage
taramasalata
于 2018-07-13
我正在做我的疯狂 - 有没有人有时间帮忙？
我尝试了很多方法来获取 Android 中的底部选项卡，包括此链接中的两个选项。 无论我做什么，我的解决方案都无法识别更新。
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
我有表单版本 3.1.0.637273（并且也尝试了最后 5 个版本/预发布版本）。
我已经清理、构建、重建、删除了 bin/obj 目录 - 无论我做什么，我似乎都看不到这个更新。
例如，这是我当前的 XAML
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ProjName"
x:Class="ProjName.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.BarItemColor="Black"
android:TabbedPage.BarSelectedItemColor="Red">
<local:LoginPage Title="Favorites" Icon="ic_favorites.png" />
<local:LoginPage Title="Friends" Icon="ic_friends.png" />
<local:LoginPage Title="Nearby" Icon="ic_nearby.png" />
<local:LoginPage Title="Recents" Icon="ic_recents.png" />
<local:RegistrationPage Title="Restaurants" Icon="ic_restaurants.png" />
</TabbedPage>
结果是
找不到“ToolbarPlacement”的属性、可绑定属性或事件，或者值和属性之间的类型不匹配。
以编程方式执行的类似问题 - 它根本无法识别该更新。
我在 Windows VS 上，使用 8.1 Android 进行测试，它是一个共享而不是 .net 项目。 如果有人能告诉我我错过了什么，那会让我很高兴。
@pureween？
taramasalata
于 2018-07-13
@taramasalata确认您的所有项目都使用最新版本的 3.1.0。 有些东西不匹配。
你也可以在这里查看我的示例项目： https :
我还确认我可以毫无错误地从共享项目中执行底部选项卡。 项目：
应用程序25.zip
davidortinau
于 2018-07-13
@davidortinau谢谢你的帮助。 我在 8 种不同的解决方案中尝试了这种变化。 我已将所有项目更新到 3.1.0 并对所有内容进行三重检查。 我已经反复检查了每个选项的“更新”选项卡，它们都是最新的。 我想不出还有什么可尝试的。 我会在早上尝试您的示例项目，然后回复您。 也许我应该尝试重新安装 VS。
taramasalata
于 2018-07-14
您的 app25 将不会构建并出现错误：找不到“ToolbarPlacement”的属性、可绑定属性或事件，或者值和属性之间的类型不匹配。
您使用的是 Windows 还是 Mac？
我现在要尝试完全重新安装 VS 我真的想不出还有什么可以尝试的
taramasalata
于 2018-07-14
不。 全新安装，运行 App25 没有乐趣。 这太令人沮丧了。
错误：位置 6:13。 找不到“ToolbarPlacement”的属性、可绑定属性或事件，或者值和属性之间的类型不匹配。
taramasalata
于 2018-07-14
除了 Xamarin.Forms 之外，我还需要什么包吗？
taramasalata
于 2018-07-14
嗯，您的构建工具链中的某些内容不太正确@taramasalata
也许将构建输出设置为详细以查看任何消息？ 检查您的 Android Sdk 以确保您拥有最新的构建工具？ 安装 4.7.1 sdk 看看能不能解决？ 删除所有缓存的 Xamarin.forms nuget
c:用户
使用 ILSpy 或 dotpeek 之类的工具查看调试目录中的 dll 并检查版本或查看是否可以在其中找到这些值？
尝试代码库方法而不是 XAML？
PureWeen
于 2018-07-14
谢谢@purewen。 我尝试了基于代码和 xaml。 我还尝试重新安装 VS 并尝试了“预览”版本。 不过，我的卸载/重新安装可能没有删除 .nuget 文件。 我现在会尝试你所有的建议。
taramasalata
于 2018-07-15
重新安装了 Android 的所有东西后，现在可以使用了。 非常感谢大家！
快速 Q 我认为这只能在 Android 8.1 上运行是正确的吗？
taramasalata
于 2018-07-15
嗨@taramasalata。 我有一个类似的问题，它使用以下步骤修复：
- 删除我的应用程序的所有“bin”和“obj”文件夹
- 点击“清洁解决方案”
- 重新启动 Visual Studio
- 单击“重建解决方案”。
ricardouffcomp
于 2018-07-15
@taramasalata耶！！！！ 它应该在至少 API 15 的任何设备上运行
在构建它时，我针对 API 15、19、23、27 进行了测试
让色调在 19 和 15 上工作真的很有趣
PureWeen
于 2018-07-15
@taramasalata是的，我在添加using Xamarin.Forms.PlatformConfiguration.AndroidSpecific并重新启动 VS 并清理解决方案后让它工作了。
bverp
于 2018-07-16
在顶部使用时，可与 6 个儿童一起使用。 当在底部时，只有 5。
应用程序崩溃并显示消息“Java.Lang.IllegalArgumentException：
mcferdev
于 2018-07-18
@marcelinhovt是的，这是一个 android 限制。
Android 中的 BottomNavBar 仅支持 5 个项目，我们真的没有办法解决这个问题
PureWeen
于 2018-07-18
@PureWeen哦...我不知道。 谢谢...我会尝试写一些渲染来扩展
mcferdev
于 2018-07-19
@marcelinhovt所以我的意思是android中的BottomNavigationBar本身不支持超过5个项目。 这不是我们的设计强加的限制
PureWeen
于 2018-07-19
有没有办法在底部标签栏上设置高程？
marciosouzajunior
于 2018-08-10
我在 android 限制中有一个新问题，即使我只有 5 个标签应用程序崩溃
amrkamal1993
于 2018-08-12
@amrkamal1993如果您可以创建一个重现和一个新问题，那么我们有望解决该问题
PureWeen
于 2018-08-13
@PureWeen感谢 PureWeen，当我在工具栏中添加标题图标时发生异常，我有底部选项卡和工具栏，这是一个未处理的问题
amrkamal1993
于 2018-08-13
@amrkamal1993我们为底部选项卡
你能发布一个我可以测试的重现或代码，看看我是否可以重新创建崩溃吗？
PureWeen
于 2018-08-13
相关问题
xabre
·
3评论
jgold6
·
3评论
EmilAlipiev
·
3评论
jamiewest
·
3评论
sonic1015
·
3评论
最有用的评论
@maherzaidoune还没有。
我已经对初始实现进行了一些研究，但决定将其留给下一个版本。
只是为了清楚你在谈论这个吗？
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android