前言:MasterDetailPage可以实现左侧滑出菜单,下面把Demo的关键代码调用展示出来:
TabPage.xaml:实现底部Tab切换,多数应用都会用到这种效果。
<?xml version="1.0" encoding="utf-8" ?>
<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
xmlns:local="clr-namespace:MasterDemo.Views;assembly=MasterDemo"
x:Class="MasterDemo.Views.TabPage">
<TabbedPage.Children >
<local:MainPage Title="首页" Icon="ic_home.png"/>
<local:Main1Page Title="新闻" Icon="ic_news.png"/>
<local:Main2Page Title="我的" Icon="ic_mine.png"/>
</TabbedPage.Children>
</xf:BottomBarPage>
其中,BottomBarPage是第三方框架,可以直接在NuGet程序包中添加引用“ThriveGmbH.BottomNavigationBar.XF”即可,注意在布局文件的头部天剑命名空间引用哦(上面的“xf”即为BottomBar的命名空间引用)。
另外,MainPage、Main1Page、Main2page为空页面示例,这里不做源码展示,注意“Icon”字段的图片需要分别下载尺寸存放于安卓(drawable)及IOS(Resource)资源路径下,如果为了省事,而选择只用一个图片尺寸,会在不同分辨率的收集下展示效果差异很大,所以还是多花点时间吧,这里给出我用的图片尺寸规则(PS:如果安卓的资源目录下没有drawable文件夹,则需要自己添加文件夹):
类别 | 资源文件目录 | 尺寸 |
Android | drawable-hdpi | 36 |
drawable-xhdpi | 48 | |
drawable-xxhdpi | 72 | |
IOS | 最小尺寸 | 29 |
@2x | 58 | |
@3x | 87 |
好了,上面就是底部导航栏页面的一些需要注意的地方,下面说一下本章的“正宫”内容吧:
这里的NavigateCommand是自定义的命令,后面会介绍,MasterDetailPage.Master即为左侧的菜单栏,MasterDetailPage.Detail即为正文内容,这里我默认为TabPage。
MasterPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:local="clr-namespace:MasterDemo.Views"
x:Class="MasterDemo.Views.MasterPage"
>
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Padding="20">
<!-- TODO: // Update the Layout and add some real menu items -->
<Button Text="首页" Command="{Binding NavigateCommand}" CommandParameter="TabPage" />
<Button Text="示例一" Command="{Binding NavigateCommand}" CommandParameter="Temp1Page" />
<Button Text="示例二" Command="{Binding NavigateCommand}" CommandParameter="Temp2Page" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:TabPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MasterPage.cs
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
namespace MasterDemo.ViewModels
{
public class MasterPageViewModel : ViewModelBase
{
public MasterPageViewModel(INavigationService navigationService)
: base(navigationService)
{
}
private DelegateCommand<object> _navigateCommand;
public DelegateCommand<object> NavigateCommand
{
get
{
return _navigateCommand = _navigateCommand ?? new DelegateCommand<object>(async (x) =>
{
var tag = x as string;
switch (tag) {
case "TabPage":
await NavigationService.NavigateAsync("NavigationPage/TabPage");
break;
case "Temp1Page":
await NavigationService.NavigateAsync("NavigationPage/Temp1Page");
break;
case "Temp2Page":
await NavigationService.NavigateAsync("NavigationPage/Temp2Page");
break;
}
});
}
}
}
}
运行效果: