Xamarin新手-项目创建三

一、新建Tab切换页

1.1 添加依赖

通过NuGet程序包添加依赖程序。右键项目名称，点击“管理NuGet程序包”。搜索框架ThriveGmbH.BottomNavigationBar.XF并安装。（截图中圈出的位置处会有一个下载按钮，由于当前已经下载，所以会显示叉号）

1.2 新建Tab切换页

首先，新建Tab切换页，这里新建三个空白页面，可在底部切换“首页”、“通知”、“我的”等。

其次，新建Tab页（空白页），用于管理切换各子页面。修改Tab页的.xaml布局文件，如下所示，

程序说明：

BarTheme指定底部导航栏类型，BarTextColor指定底部导航栏选中时的字体颜色，<NavigationPage></NavigationPage>可指定页面标题及图标，图标资源需要根据尺寸要求放在各平台资源文件路径下（安卓：hdpi(36*36) xhdpi(48*48) xxhdpi(72*72) IOS：29*29 @2x(58*58) @3x(87*87)）。

<?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:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
                  xmlns:local="clr-namespace:项目名称.Views"
                  x:Class="项目名称.Views.TabPage"
                  Title="{Binding Title}"
                  BarTheme="Light"
                  Padding="0"   
                  BarTextColor="#00904a"               
                  >
    <TabbedPage.Children>
        <NavigationPage Title="首页" Icon="ic_home.png">
            <x:Arguments>
                <local:HomePage Title="首页"/>
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="新闻" Icon="ic_news.png" >
            <x:Arguments>
                <local:NotificationPage Title="新闻"/>
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="我的" Icon="ic_mine.png">
            <x:Arguments>
                <local:NotificationPage Title="我的"/>
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</xf:BottomBarPage>

1.3 运行效果

Xamarin新手-项目创建三

猜你喜欢