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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM