Xamarin自定義布局系列——支持無限滾動的自動輪播視圖CarouselView

背景簡述

---

自動輪播視圖（CarouselView）在現在App中的地位不言而喻，絕大多數的App中都有類似的視圖，無論是WebApp還是Native App。在安卓、iOS以及Windows(UWP)開發中，有一些控件可以很方便的來實現類似的效果。

1. ViewPager(安卓)
2. UIScrollView(iOS)
3. FlipView(UWP)

Xamarin.Forms怎么實現自動輪播視圖呢？

---

Xamarin.Forms有自己的一套布局系統，結合各平台特性，也可以實現一個比較好的自動輪播視圖。

上次介紹我實現的一個多頁面水平切換布局中，提到我使用了一個叫做ViewPanel的自定義布局，他與自動輪播視圖相比，只是缺少了無線滾動和自動輪播，這次也以這個布局為基礎，來實現自動輪播視圖。

核心依然是ViewPanel在各個平台中的具體實現：

Portable:

...
public static readonly BindableProperty ChildrenProperty = BindableProperty.Create("Children", typeof(IList), typeof(ViewPanel), propertyChanged: OnChildrenChanged);
public IList Children
{
    get { return (IList)this.GetValue(ChildrenProperty); }
    set { SetValue(ChildrenProperty, value); }
}
...

依賴屬性Children是一個集合類型，它用來存儲需要在ViewPanel中顯示的視圖，一般子視圖的都從Xamarin.Forms.View派生或者是他本身

其次，ViewPanel能交互，需要實現一個事件，一個方法

• event EventHandler SelectChanged:當ViewPanel中顯示的元素改變時提供通知,並且提供OnSelectChanged()來觸發該事件
  * void select():用於設置ViewPanel需要顯示的子視圖（實際Select會是一個委托，因為ViewPanel並不能設置當前顯示的內容，需要調用各平台一些特定的方法實現）

安卓：

直接利用Renderer實現

ViewPanelRenderer : ViewRenderer<ViewPanel, ViewPager>

在安卓平台上，ViewPanel直接利用ViewPager來實現，所以ViewPanel對子元素的布局等方法都會無效，所有的子元素布局，顯示狀態都由ViewPager來管理,ViewPanel的作用只限於提供子視圖。而ViewPager中子視圖的創建刪除都由相應的Adapter來實現，這兒用到的是ViewPagerAdapter。

ViewPagerAdpter需要的子視圖的類型是Android.Views.View,而上面提到，ViewPanel提供的子視圖類型是Xamarin.Forms.View,所以在添加Xamarin.Forms.View類型視圖到ViewPagerAdpter中的時候，需要完成一次轉換，實則是獲取Xamarin.Forms.View類型對象對應在安卓平台中的Renderer，實現方法如下：

//view is Xamarin.Forms.View
var renderer = Platform.CreateRenderer(view);
var viewGroup = renderer.ViewGroup;

//viewGroup is Android.Views.View

需要注意，雖然子試圖的布局直接由ViewPager來管理，但是ViewPager本身的位置，大小是可以由ViewPanel自己或者他的上層布局決定的。如果它的父布局沒有約束他的位置大小，那么他可以通過在ViewPanel中重寫的OnMeasure方法來自定義自己的大小：

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
    ...
    //最簡單的就是返回固定尺寸，但通常不這么寫，一般根據它的子視圖位置大小等信息，來相應的設置他自己的尺寸，測量子元素的尺寸可以調用`Measure()`方法;
    return new SizeRequest(new Size(385, 400));
}

完成了ViewPanel視圖的顯示，還需要實現交互部分：

• 訂閱ViewPager的PageSelected事件，再訂閱方法中調用ViewPanel的OnSelectChanged()方法,用於通知訂閱了ViewPanel的SelectChanged事件的所有對象;

• ViewPanel的屬性Select是委托類型,通過為該屬性賦值，真正設置ViewPanel顯示的子視圖（調用ViewPager的SetCurrentItem()方法）;

iOS：

iOS的ViewPanel實際是利用iOS中UIScrollView實現,唯一需要用Renderer實現的，就是設置UIScrollView的PagingEnabled屬性為Ture，這樣該滾動條就可以按頁滾動了

實現邏輯如下：
ViewPanel繼承自ScrolView,設置為水平方向滾動，然后設置其Content為一個水平方向的StackLayout，把要顯示的子試圖添加到StackLayout中。這樣，只要StackLayout的寬度超出ScrolView的顯示寬度后，就會出現水平滾動條，通過實現Renderer設置滾動條的PagingEnabled屬性，就能每次滾動都完整的滾動一個子視圖的寬度，如果子視圖的寬度恰好為頁面寬度，那就有了輪播圖的效果。

為了讓子視圖的寬度就是ScrollView的可視寬度，需要重寫該ScrollView的OnMeasure和LayoutChildren方法。可以自定義一個繼承自StackLayout的HorizentalStackLayout來重寫以上兩個方法。

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{

    var measuredList = new List<SizeRequest>();
    foreach (var item in this.Children)
    {
        measuredList.Add(item.Measure(ViewPanel.MeasureWidth, double.PositiveInfinity));
    }
    if (Children == null || Children.Count <= 0)
    {
        return new SizeRequest(new Size(ViewPanel.MeasureWidth, 0));
    }
    //ViewPanel.Panel.Width就是滾動條可視寬度
    Size size = new Size(ViewPanel.Panel.Width * Children.Count(), measuredList.Select(m => m.Request.Height).OrderByDescending(m => m).First());
    return new SizeRequest(size, size);
}

protected override void LayoutChildren(double x, double y, double width, double height)
{
    double posX = 0;
    foreach (var item in this.Children)
    {
        item.Layout(new Rectangle(posX, y, ViewPanel.MeasureWidth, height));
        posX += ViewPanel.MeasureWidth;
    }
}

現在有一個問題，在ViewPanel中，我們定義了Children屬性，用來存放子視圖，但是在iOS中，StackLayout的屬性Children和她並不相同，所以我們要做一次他們的同步，同步發生在ViewPanel的Children屬性改變的時候，如下：

static void OnChildrenChanged(BindableObject sender, Object oldValue, Object newValue)
{
    ...
    var viewPanel = sender as ViewPanel;
    var stackLayout = viewPanel.Content as StackLayout;
    stackLayout.Children.Clear();
    foreach (View item in viewPanel.Children)
    {
        stackLayout.Children.Add(item);
    }...
}

至此，同樣視圖顯示部分就完成了，還剩交互部分，和安卓中一樣，設計兩個部分：

• 訂閱UIScrollView的ScrollView_DecelerationEnded事件，再訂閱方法中計算當前選中的索引，然后調用ViewPanel的OnSelectChanged()方法,用於通知訂閱了ViewPanel的SelectChanged事件的所有對象;

    private void ScrollView_DecelerationEnded(object sender, EventArgs e)
    {
        var index = (int)(_viewPanel.ScrollX / _viewPanel.Width);
  
        if (_viewPanel.Width / 2 < (_viewPanel.ScrollX % _viewPanel.Width))
        {
            index++;
        }
  
        _viewPanel.CurrentIndex = index;
        _viewPanel.OnSelectChanged();
    }
  

• ViewPanel的屬性Select是委托類型,通過為該屬性賦值，真正設置ViewPanel顯示的子視圖（根據索引來計算滾動條的水平位置，並設置他）;

    public void Select(int index, bool animate = true)
    {
        var perWidth = _viewPanel.Width;
        _viewPanel.CurrentIndex = index;
        _viewPanel.ScrollToAsync(index * perWidth, _viewPanel.ScrollY, animate);
    }
  

實現了ViewPanel,如何利用他實現自動輪播？

---

之前介紹到，ViewPanel就是閹割版的自動輪播視圖,相比自動輪播，只少了兩塊兒

1. 無限滾動

   邏輯如下圖：實際添加到顯示ViewPanel中的子視圖比設定的多兩個，第一個設置為設定子視圖的最后一個，最后一個設置為設定子視圖的第一個。結合下圖以向右滾動為例（紅色），當滾動到索引為3（黑色標號）的子視圖，也就是設定子視圖的最后一個，此時繼續向右滾動，滾動到索引為4的子視圖，他和索引為1的子視圖顯示內容相同，當滾動完成后，繼續滾動到索引為1的子視圖，這次滾動很特殊，沒有任何動畫效果，直接跳轉，因為滾動前后顯示的視圖相同，所以肉眼看不出任何區別，給人以無限滾動的假象。
   

2. 自動輪播

   這個簡單，設置Timer即可。

總結

---

自動輪播視圖（CarouselView）的核心思想就是這些，其他具體代碼就不在這兒貼出，文末留出GitHub地址。在實現中，遇到一些問題或是新的，總結如下：

• 在自定義布局中，OnMeasure方法不是100%會被調用的，這個布局的大小是否已經被約束；
  下面是我摘抄的一段話，來解釋這個：

As you’ve seen, it is not guaranteed that the OnSizeRequest override will be called. The method doesn’t need to be called if the size of the layout is governed by its parent rather than its children. The method definitely will be called if one or both of the constraints are infinite, or if the layout class has nondefault settings of VerticalOptions or HorizontalOptions. Otherwise, a call to OnSizeRequest is not guaranteed and you shouldn’t rely on it.

• Renderer實現中，可以利用Xamarin已經為我們提供的Renderer，而不是自己利用ViewRenderer去自定義，這樣很大程度上能避免去寫一些iOS、安卓和UWP中相關的代碼。這次實踐中iOS平台下的ViewPanel就直接派生自ScrollViewRenderer

• 依賴屬性，自定義布局的知識在自定義一個控件，Renderer的時候是非常重要的

• ······

本次實踐相關連接：

GitHub項目地址：cjw1115/PivotPage