xamarin ProgressBar 动画 xamarin tabbedpage

Tabbedpage 在手机开发中是常用的页面布局方式，但是在IOS平台，与Andriod平台显示效果不一致，在IOS平台中标签位于屏幕下方，而在Andriod平台位于上方，如何保持跨平台的一致性呢，国内大多APP都是在下方显示，这已经成为多数人的习惯。

下面我们上一个DEMO来说明一下：郊果如图

这里大家可以看到列表2上有一块蓝色区域，看起来不怎么舒服，而列表1就好多了，这是因为列表2是一个NavigationPage,而列表1是一个Contentpage.

下面看主要代码，这是一个新建的类，继承于Xamarin.Forms.TabbedPage：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using Xamarin.Forms;

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
namespace APPtest1
{
 public partial class tabbedpageDemoPage : Xamarin.Forms.TabbedPage
    {
        public tabbedpageDemoPage()
        {
            
            //this.Title = "标签页DEMO";
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
                   
            //注意列表1为Contentpage类型页面
            ContentPage navigationPage = new listviewforicon();
            navigationPage.IconImageSource = ImageSource.FromResource("APPtest1.Images.gray.ico");
            navigationPage.Title = "列表1";
            //navigationPage.Opacity = 0.5;
            //navigationPage.BackgroundColor = Color.Red;
            //navigationPage.BarBackgroundColor = Color.Yellow;

            NavigationPage navigationPage1 = new NavigationPage(new listviewForState());
            navigationPage1.IconImageSource = ImageSource.FromResource("APPtest1.Images.snow.ico");
            navigationPage1.Title = "列表2";

            NavigationPage navigationPage2 = new NavigationPage(new listviewCunstomCell());
            navigationPage2.IconImageSource = ImageSource.FromResource("APPtest1.Images.qq.ico");
            navigationPage2.Title = "列表3";

            Children.Add(navigationPage2);
            Children.Add(navigationPage1);
            Children.Add(navigationPage);

        }
}

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

这两个命名空间一定要加上， On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);可以更改标签工具栏出现的位置

这样我们直接在App.xaml.cs文件中使用即可

NavigationPage和Contentpage的区别，因为Navigation是有导航栏的所以会有一片蓝色的空白区域

上面我们是用一个新建的类来实现，那么如果我们是新建的一个内容页，即tabbedpage1.xaml.cs中含有InitializeComponent();//组件初始化时，编译会出错，因为经过几次测式，发现系统默认会含有3个tab页，而tabbedpage默认最多5个TAB页，所以我们加三个内容页编译不过，因此要用 this.Children.Clear();清空子页。代码如下：

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

namespace APPtest1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TabbedPage1 : Xamarin.Forms.TabbedPage
    {
        public TabbedPage1()
        {
            InitializeComponent();//组件初始化

            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

            this.Children.Clear();//为什么要加上这个呢，因为组件初始化时，系统默认含用3个TAB，所以要清空Children

            ContentPage navigationPage = new listviewforicon();
            navigationPage.IconImageSource = ImageSource.FromResource("APPtest1.Images.gray.ico");
            navigationPage.Title = "列表1";

    
            NavigationPage navigationPage1 = new NavigationPage(new listviewForState());
            navigationPage1.IconImageSource = ImageSource.FromResource("APPtest1.Images.snow.ico");
            navigationPage1.Title = "列表2";
            //navigationPage1.

            NavigationPage navigationPage2 = new NavigationPage(new listviewCunstomCell());
            navigationPage2.IconImageSource = ImageSource.FromResource("APPtest1.Images.qq.ico");
            navigationPage2.Title = "列表3";

            Children.Add(navigationPage2);
            Children.Add(navigationPage1);
            Children.Add(navigationPage);

        }
    }
}

这是自己测试发现的，有什么不对，大家指证一下。

二、下面我们来解决一下NavigationPage的导航栏，比如“列表2” listviewForState页面，如何去掉空白的导航栏呢，在listviewForState.xaml.cs的代码上加入NavigationPage.SetHasNavigationBar(this,false);即可

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class listviewForState : ContentPage
    {
        public listviewForState()
        {
            InitializeComponent();
       
            NavigationPage.SetHasNavigationBar(this,false);
....省略

 

效果如图

三、假如我们不想去掉导航栏，也可以在导航栏上显示当前页的标题，如“列表3” listviewCunstomCell ，在listviewCunstomCell.xaml.cs的代码上加入设置该页的Title,(我觉得在页面上加入Title是一个很好的编程习惯)

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class listviewCunstomCell : ContentPage
    {
        public listviewCunstomCell()
        {
            InitializeComponent();
            this.Title = "自定义单元格列表";
            ....

效果如图：

那么最终我们实现的效果，列表1是一个contentpage,列表2 去掉了导航栏，列表3 在空白的导航栏处显示页的标题，显然列表2去掉导航与列表1contentpage效果一样，所以多页时，我们可以直接使用ContentPage,根据需要想要显示页的标题的话，用列表3的效果也可以，希望对大家的学习有帮助。