PivotPage ———— 多页面切换控件

PivotPage是一个多页面切换控件,类似安卓中的ViewPager和UWP中的Pivot枢轴控件。

起初打算直接通过ScrollView+StackLayout直接实现该控件,但是在具体实现的时候,发现iOS中,利用UIScrollView的PagingEnabled 属性,可以很方便的实现分页效果。但是,在安卓平台中,原生的ScrollView只提供了很有限的事件方法,需要比较绕的操作才能实现诸如滚动开始,滚动停止等事件的监听,极其不便,所以直接利用ViewPager实现多页面切换的效果。

又考虑到在Xamarin.Forms层面,应该有同意的方法实现页面切换等操作,和具体平台相互隔离

所以使用了一个自定义控件ViewPanel,该控件继承自ScrollView

为什么ViewPanel不直接继承自View呢?

  1. 在安卓平台中,无论是View还是ScrollView,最后都要通过ViewRenderer用ViewPager来实现,没有区别。

  2. 在iOS中,情况有些不同。应为iOS中该控件基本都是用FORMS直接实现的,唯一用到的Renderer是ScrollViewRenderer,用来设置ScrollView对应的UIScrollView的PagingEnabled属性,让滚动条按页滑动,所以让ViewPanel直接继承自ScrollView,省去一些不必要的代码

如何实现在ViewPanel中显示自定义的控件?

在iOS中,ViewPanel是由ScrollView+StackLayout直接实现的,所以把我们自定义的View直接添加到StackLayout中就可以了,代码实现类似于:

    ···
    _stackLaout.Children.Add(view);
    ···

在Android中,ViewPanel由一个ViewPager实现,ViewPanel为ViewPager提供所有的子元素,利用如下方法添加到ViewPager中:

(来资源PageAdapter)

    public override Java.Lang.Object InstantiateItem(Android.Views.View container, int position)
    {

        var viewPager = container.JavaCast<ViewPager>();

        var view = _views[position] as Xamarin.Forms.View;

        view.Parent = _customViewPage;

        if (Platform.GetRenderer(view) == null)

            Platform.SetRenderer(view, Platform.CreateRenderer(view));

        var renderer = Platform.GetRenderer(view);

        var viewGroup = renderer.ViewGroup;

        viewPager.AddView(viewGroup);

        return viewGroup;

    }

使用ViewPager的时候,数据由PageAdapter提供。根据我们提供的View,创建相应的NativeView添加到ViewPager中。


控件由两部分组成:

  1. Header:放置各个页面标题,LOGO等,数据模板自定义,支持数据绑定
  2. Views:自定义控件ViewPanel,继承自ScrollView(主要方便iOS),安卓中不使用ScrollView的任何特性,只当作简单的View

注意:使用的时候需要自定义两个集合,一个存放Views,一个存放Header,二者中元素一一对应,由使用者维护

(在MVVM中使用举例)

    Headers.Add(new PivotItemModel { Title = "Mokey" });
    Views.Add(new MokeyView());
    Headers.Add(new PivotItemModel { Title = "Test" });
    Views.Add(new TestView());

目前实现的版本

  • iOS:利用Xamarin.Fomrs中SrollView+StackLayout实现ViewPanel
  • Android:直接使用ViewPager实现ViewPanel

GitHub地址:PivotPage

Xamarin自定义布局系列——PivotPage,多页面切换控件的更多相关文章

  1. Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView

    背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...

  2. Xamarin自定义布局系列——瀑布流布局

    Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简 ...

  3. Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl(横向列表)

    在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在Xaml ...

  4. Android自定义View(CustomCalendar-定制日历控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeas ...

  5. WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX

    具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的 ...

  6. Android 自定义支持快速搜索筛选的选择控件(一)

    Android 自定义支持快速搜索筛选的选择控件 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz ...

  7. WP8.1学习系列(第二十六章)——控件模板

    在本文中 自定义控件模板示例 指定控件的可视结构. 指定控件的可视行为 使用工具轻松处理主题 控件和辅助功能 了解有关控件默认模板的详细信息 控件模板中的主题资源 相关主题 在 XAML 框架中,如果 ...

  8. cesium页面小控件的隐藏

    cesium页面小控件的隐藏 1   创建一个Viewer var viewer = new Cesium.Viewer('cesiumContainer');//cesiumContainer为di ...

  9. 《zw版·Halcon-delphi系列原创教程》halconxlib控件列表

    <zw版·Halcon-delphi系列原创教程>halconxlib控件列表 Halcon v11.01版,com控件,安装后,共有75个控件,      不过最重要的控件,只有两个,T ...

随机推荐

  1. 在Windows 10 Anniversary下配置Caffe

    去年十月份的时候尝试过配置caffe,真的是恶心到家,当时用的还是微软魔改的基于NuGet的caffe.现在这个项目退役了,接手的是原项目下的windows分支,虽然并不是很成熟,但是依然非常推荐在W ...

  2. 如何在sublime中安装使用eslint

    1:首先你需要全局安装eslint npm install -g eslint 安装完成后在控制台 输入 eslint -v 有版本号说明就可以在npm中使用了,可以检查语法的错误处,但还不能在sub ...

  3. js详解之作用域-实例

    函数如下大家可以做做看 function aa(a,b,c){ function a(){} console.log(a); console.log(aa); console.log(argument ...

  4. C#实现HttpUtility.UrlEncode输出大写字母

    在c#中,HttpUtility.UrlEncode("www+mzwu+com")编码结果为www%2bmzwu%2bcom,在和Java开发的平台做对接的时候,对方用用url编 ...

  5. (@WhiteTaken)设计模式学习——单例模式

    单例模式,个人理解就是,使用了这个模式,可以保证一个类只生成唯一的实例对象.就是在整个程序中,这个类只存在一个实例对象. GoF对单例模式的定义:保证一个类,只有一个实例存在,同时提供能对该实例加以访 ...

  6. TCP/IP协议族(二) HTTP报文头解析

    本篇博客我们就来详细的聊一下HTTP协议的常用头部字段,当然我们将其分为请求头和响应头进行阐述.下方是报文头每个字段的格式,首先是头部字段的名称,如Accept,冒号后方紧跟的是该字段名所对应的值,每 ...

  7. 特殊的string类型

    1.前言 string是属于引用类型的,这个大家都知道吧?但是平常在使用的过程中,发现它还是拥有一些值类型的特征的,这到底是为什么呢? 原因就是.Net考虑到假如大量的操作string对象的时候,大量 ...

  8. html5橡皮檫特效

    体验效果:http://keleyi.com/keleyi/phtml/html5/32.htm 效果描述: 有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下: 这种刮图的效 ...

  9. Git学习之路(5)- 同步到远程仓库及多人协作问题

    ▓▓▓▓▓▓ 大致介绍 我们写好文件后添加到版本库,但是这样还没有做完,我们还需要将它同步到GitHub的远程仓库上,这里就以我们刚开始的drag项目为例,我们在Git学习之路(2)-安装GIt和创建 ...

  10. 关于BOM的理解

    BOM提供了很多对象,用于访问浏览器的功能,这些功能与网页内容无关 BOM的核心对象时window,她表示浏览器的一个实例 window的双重角色   1.JS访问浏览器窗口的一个接口  2.ECMA ...