Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl（横向列表）

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

    //UWP中用XAML大致实现如下
    ···
    <ListView.ItemsPannel>
        <StackPannel Orientation="Horizental"/>
    </ListView.ItemsPannel>
    ···

这种让列表元素横向排列实际是一个很常见的场景，但是在Xamarin.Forms中，并没有提供直接的实现方法，如果想要这种效果，有两种解决办法

• Renderer:利用Renderer在各平台实现，适用于对性能有较高要求的场景，比如大量数据展示
• 自定义布局：实现比较简单，但是适用于数据量比较小的场景
  
  实际在使用的时候，利用自定义布局会比较简单，并且横向的列表展示并不适合大量数据的场景。

---

怎么实现呢？

Xamarin.Forms的列表控件是直接利用Renderer实现的，没有提供类似ItemsPannel之类的属性，所以考虑直接自己实现一个列表控件。有以下几个点：

• 列表控件要支持滚动：所以在控件最外层需要一个ScrollView
• 实现类似ItemsPannel的效果：所以需要实现一个ItemsPannel属性，类型是StackLayout，并且它应该是ScrollView的Content
• ItemsControl控件的基类型是View,便于使用，直接让它继承自ContentView,这样就可以直接设置其Content为ScrollView

至此，先来给出这部分的代码，我们直接在构造函数中完成绝大多数操作

    ···
    private ScrollView _scrollView;
    private StackLayout itemsPanel = null;
    public StackLayout ItemsPanel
    {
        get { return this.itemsPanel; }
        set { this.itemsPanel = value; }
    }
    public ItemsControl()
    {
        this._scrollView = new ScrollView();
        this._scrollView.Orientation = Orientation;

        this.itemsPanel = new StackLayout() { Orientation = StackOrientation.Horizontal };//子元素水平排布的关键

        this.Content = this._scrollView;
        this._scrollView.Content = this.itemsPanel;
    }
    ···

子元素的容器是ItemsPannel,它实际是一个水平排布的StackLayout。想要在列表控件添加子元素，实际就是对该StackLayout的Children添加子元素。

考虑到列表控件中子元素的添加，就必须实现一个属性ItemsSource，是集合类型,并且为了支持数据绑定等，还需要让他是一个依赖属性，针对ItemsSource属性值自身的改变或者其集合中元素的添加删除等，都需要监听，并且将具体变化表现在ItemsControl中。实现该属性如下：

    ···
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(ItemsControl), defaultBindingMode: BindingMode.OneWay, defaultValue: null, propertyChanged: OnItemsSourceChanged);

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)this.GetValue(ItemsSourceProperty); }
        set { this.SetValue(ItemsSourceProperty, value); }
    }
    ···
    Static vid OnItemsSourceChanged(BindableObject sender,object oldValue,object newValue)
    {
        ···
    }
    ···

当为ItemsSource属性赋值之后，OnItemsSourceChanged方法被调用，在该方法中，需要干这么几件事儿：

• 为ItemsSource中的每一个元素，根据ItemTemplate创建相应的View,设置View的数据绑定上想问BindingContext为该元素，并且将此View添加到ItemsPannel中（ItemsPannel实际是StackLayout，他的子元素必须继承自View或者是View）
• 检测ItemsSource的数据源是否实现了接口INotifyCollectionChanged,如果实现了，需要订阅其CollectionChanged事件，注册一个方法，便于在集合元素变动后调用我们注册的方法，来通知ItemsControl控件，把具体的变动表现在UI层面（通常就是元素的添加和删除）

OnItemsSourceChanged方法实现如下：

    public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(ItemsControl), defaultValue: default(DataTemplate));
    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)this.GetValue(ItemTemplateProperty); }
        set { this.SetValue(ItemTemplateProperty, value); }
    }

    static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = bindable as ItemsControl;
        if (control == null)
        {
            return;
        }
        //检测是否实现该接口，如果实现，就订阅该事件
        var oldCollection = oldValue as INotifyCollectionChanged;
        if (oldCollection != null)
        {
            oldCollection.CollectionChanged -= control.OnCollectionChanged;
        }

        if (newValue == null)
        {
            return;
        }

        control.ItemsPanel.Children.Clear();

        //遍历数据源中每个元素，为它创建View,并设置其BindingContext
        foreach (var item in (IEnumerable)newValue)
        {
            object content;
            content = control.ItemTemplate.CreateContent();
            View view;
            var cell = content as ViewCell;
            if (cell != null)
            {
                view = cell.View;
            }
            else
            {
                view = (View)content;
            }

            //元素点击相关事件
            view.GestureRecognizers.Add(control._tapGestureRecognizer);
            view.BindingContext = item;
            control.ItemsPanel.Children.Add(view);
        }

        var newCollection = newValue as INotifyCollectionChanged;
        if (newCollection != null)
        {
            newCollection.CollectionChanged += control.OnCollectionChanged;
        }
        control.SelectedItem = control.ItemsPanel.Children[control.SelectedIndex].BindingContext;

        //更新布局
        control.UpdateChildrenLayout();
        control.InvalidateLayout();

    }

CollectionChanged实现方法如下：

    private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.OldItems != null)
        {
            this.ItemsPanel.Children.RemoveAt(e.OldStartingIndex);
            this.UpdateChildrenLayout();
            this.InvalidateLayout();
        }

        if (e.NewItems == null)
        {
            return;
        }
        foreach (var item in e.NewItems)
        {
            var content = this.ItemTemplate.CreateContent();

            View view;
            var cell = content as ViewCell;
            if (cell != null)
            {
                view = cell.View;
            }
            else
            {
                view = (View)content;
            }
            if (!view.GestureRecognizers.Contains(this._tapGestureRecognizer))
            {
                view.GestureRecognizers.Add(this._tapGestureRecognizer);
            }
            view.BindingContext = item;
            this.ItemsPanel.Children.Insert(e.NewItems.IndexOf(item), view);
        }

        this.UpdateChildrenLayout();
        this.InvalidateLayout();

    }

到目前为止，已经实现ItemsControl控件大部分的内容了，还需要实现的有

• SelectedItem,SelectedIndex:当前列表选定项
• ItemSelected:列表中元素被选定时触发

怎么判断元素被选定呢？

当一个元素被点击后，认为它被选中了，所以需要监听列表中每一个元素的点击事件。

列表中每一个View被点击后，触发OnTapped事件，事件的发送者是该View本身

        //只定义一个TapGestureRecognizer，不需要为每一个元素都创建，只需要为每一个元素的GestureRecognizers集合添加该实例即可。
        TapGestureRecognizer _tapGestureRecognizer;

        //在构造函数中创建一个Tap事件的GestureRecognizer，并且订阅其Tapped事件
        public ItemsControl()
        {
            _tapGestureRecognizer = new TapGestureRecognizer();
            _tapGestureRecognizer.Tapped += OnTapped;
        }
        ···
        private void OnTapped(object sender, EventArgs e)
        {
            var view = (BindableObject)sender;
            this.SelectedItem = view.BindingContext;

        }
        ···
        static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
        {
            ···
            if (!view.GestureRecognizers.Contains(this._tapGestureRecognizer))
            {
                    view.GestureRecognizers.Add(this._tapGestureRecognizer);
            }
            ···
        }
        ···

一个基本的ItemsControl列表控件就完成了，至此，它的已经具备Xamarin.Forms提供的ListView的大致功能。不过还是有几点

• 它不支持虚拟化技术，所以在列表数据量比较大的时候，会有明显的卡顿

具体代码和Demo看我的Github:

ItemsControl源码