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

简介: 原文:Xamarin自定义布局系列——PivotPage(多页面切换控件)PivotPage ———— 多页面切换控件 PivotPage是一个多页面切换控件,类似安卓中的ViewPager和UWP中的Pivot枢轴控件。
原文: 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

Demo

GitHub地址:PivotPage

目录
相关文章
|
Android开发 iOS开发 索引
Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView
原文:Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView 背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App。
1890 0
|
虚拟化 容器
Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl(横向列表)
原文:Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl(横向列表) 在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在...
1118 0
|
Android开发 iOS开发
Xamarin自定义布局系列——瀑布流布局
原文:Xamarin自定义布局系列——瀑布流布局 Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简称XF,下同)为我们提供大这么多的控件,但在实际使用中,会发现这些控件的可定制性特别差,基本上都需要里利用Renderer来做一些修改。
1133 0
|
C#
C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
原文:C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.
1315 0
|
C#
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
原文:C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1180 0
|
C# Android开发
C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码
原文:C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1004 0
|
XML Android开发 数据格式
xamarin android自定义spinner
以前弄的一个下拉框时自带的spinner,感觉好丑,实际效果实在满足不了基本的UI界面要求,还是自己动手丰衣足食,看了网上关于android中自定义spinner的文章,感觉实现原理还是比较简单,所以这里用xamarin android来实现自定义spinner样式。
1751 0
|
编解码 Android开发 Java
xamarin android 布局尺寸了解
为了使UI界面在不同大小的移动端显示器上能够正常显示,大家可能都知道使用sp作为字体大小的单位,dp作为其他元素长度的单位。 前几天看了一篇文章关于 App设计规范的,文章用心写的非常好,这里是链接 http://www.25xt.com/appdesign/10821.html 。
1503 0
|
Android开发 Java 数据格式
Xamarin Android自定义文本框
xamarin android 自定义文本框简单的用法 关键点在于,监听EditText的内容变化,不同于java中文本内容变化去调用EditText.addTextChangedListener(mTextWatcher);为EditText设置内容变化监听! 简单来说就是添加一个AfterTextChanged 事件就OK了,这是最简单的一种做法,当然你要想java那样去监听也可以的。
1176 0
|
Android开发 数据格式 XML
xamarin android checkbox自定义样式
xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 //状态为选中 //状态为没选中 //默认的必须的有一个 在values文件夹中新建一个Style.
1301 0

热门文章

最新文章

下一篇
DataWorks