原文:Xamarin自定义布局系列——PivotPage(多页面切换控件)

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. autojs遍历当前页面所有控件_自定义控件(引入布局)

    系统给我们提供了许多功能强大的控件,我们在需要时可以直接在布局中添加使用,但是有时候我们程序想要实现的功能往往因人而异,如:我们的程序需要在内个Activity的标题栏左侧有一个返回按钮(类似于iPh ...

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

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

  3. 英语阅读推荐:主题切换控件 ExpressionBuilder

    这里是Cat in dotNET的Random Clippings系列,专门向大家推荐.NET相关的英文技术文章,每期推荐两篇文章,第一篇适合于英语技术文章阅读的入门者练习阅读能力,而第二篇则适合于进 ...

  4. 梅花雨做的一个日历 Javascript 页面脚本控件

    梅花雨做的一个日历 Javascript 页面脚本控件 比较好用,背景颜色可以自己用替换的形式改 //------------------------------------------------- ...

  5. Android学习笔记26:图片切换控件ImageSwitcher的使用

    在Windows操作系统中,要查看多张图片,可以通过使用"Windows照片查看器"在"上一张"和"下一张"之间切换,进行多张图片的浏览. ...

  6. openlayer 图层上下_OpenLayers实现图层切换控件

    OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: 图层切 ...

  7. 用户控件如何控制ASPX页面的控件

    问题来自论坛http://topic.csdn.net/u/20120415/17/3f264265-b25c-4db8-a192-520e8a60e4c1.html?85396 问题分析,aspx页 ...

  8. 深入学习SAP UI5框架代码系列之五:SAP UI5控件的实例数据修改和读取逻辑

    这是Jerry 2021年的第6篇文章,也是汪子熙公众号总共第277篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) SAP UI5 module懒加载机制 ...

  9. 深入学习SAP UI5框架代码系列之四:SAP UI5控件的元数据实现

    这是Jerry 2021年的第5篇文章,也是汪子熙公众号总共第276篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...

最新文章

  1. 卷积神经网络基础:(7)经典的网络架构
  2. 15g1和g2和g3区别大吗_河南成人高考和普通高考的区别有哪些?成人高考难度会越来越大吗?...
  3. linux的编程命令,linux编程常用命令
  4. Asp.net mvc 添加Jquery UI
  5. 【渝粤题库】陕西师范大学202311金融机构管理Ⅰ作业(高起专)
  6. php 开源 采集,迅睿CMS 火车头内容采集
  7. PHP框架有没有前途?是否适用于复杂的web开发框架
  8. 程序员 论坛 linux,用了五年Linux,三分钟带你揭开Linux过程内幕
  9. java array 元素的位置_介绍java中的两种排序工具Arrays和Collections
  10. 配置管理——配置项标识
  11. Python 解析风云四A卫星L1级别数据以及绘制卫星云图
  12. 机器视觉技术在工业检测中的应用综述
  13. jdk chm右边文档打不开的问题
  14. linux addr2line 用法,addr2line的用法
  15. 噪音分贝测试软件在线,分贝测试(在线分贝测试仪)
  16. 亚马逊云服务(AWS)机器学习服务Amazon SageMaker发力中国
  17. c语言多进程编写龟兔赛跑程序,龟兔赛跑(多线程练习题)
  18. 【Educoder作业】※ 数值信息——除二取余
  19. 【使用python和flask建个人博客】增加了重复类型的卡片功能,用于更好的完成日常的工作与生活
  20. pos共识机制_PoS共识机制是什么?其优缺点分别是什么?

热门文章

  1. jni直接转byte_JNI jbyteArray转char*
  2. linux安装挂载samba,【Linux系列】Centos7安装Samba并将工作区挂载到win(八)
  3. vue树形权限菜单_Vue.js 递归组件实现树形菜单(实例分享)
  4. 京东批量下单_京东快递发件指南!
  5. phython拟合曲面方程_python数据关系型图表散点图系列曲面拟合图
  6. 超声波的四个特性_超声波传感器,超声波的特性
  7. 掌握 git reset 使用
  8. java过去不到空单元格,Java POI。空白时跳过单元格
  9. android 7 apk 安装程序,Android安装apk文件并适配Android 7.0详解
  10. iosxib 设置图片_iOS framework制作及使用(包含xib和图片)