Mvvmcross: [AndroidSupport] RecyclerView support for Footer/Header/Grouping (sections)

Created on 19 Jan 2017  路  10Comments  路  Source: MvvmCross/MvvmCross

RecyclerView should have easy support to add footer/header and grouping onto lists.
Template of Footer/Header/Groups will be "somehow" selected by MvxTemplateSelector which I have implemented in past.

Taking task - gonna implement that.

Most helpful comment

Implemented feature + adjusted Android Support sample.
1. Support for RecyclerView Header
To add header to your MvxRecyclerView add in xml:
local:MvxHeaderLayoutId="@layout/recyclerviewexample_header"

To control header visibility if list is empty use:
local:MvxHidesHeaderIfEmpty="false" (true by default)

2. Support for RecyclerView Footer
To add footer to your MvxRecyclerView add in xml:
local:MvxFooterLayoutId="@layout/recyclerviewexample_footer"

To control header visibility if list is empty use:
local:MvxHidesFooterIfEmpty="false" (true by default)

3. Support for RecyclerView grouping
To use grouping with RecyclerView you have to:

  • Your ViewModel list should implement IGrouping<TKey, TValue>
  • You should add value converter class which inherit from MvxGroupedItemsConverter<TKey, TValue>
  • Your MvxRecyclerView should look like:
        <MvxRecyclerView
            android:id="@+id/my_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            local:MvxItemTemplate="@layout/listitem_recyclerviewexample"
            local:MvxGroupSectionLayoutId="@layout/listitem_recyclerviewexample_groupheader"
            local:MvxBind="ItemsSource GroupedItems, Converter=StringGroupToMvxGroupedData; ItemClick ItemSelected" />

Please check sample project for more.

The only flaw of current grouping is that - it does not support Replace/Move ObservableCollection Changed events + there is no support for dynamic group child items change. I will probably create another issue for that when it's merged and implement this in future.

4. New commands
Additionaly MvxRecyclerViewcontains command properties like: - HeaderClickCommand, FooterClickCommand, GroupHeaderClickCommand.

5. Sample project
Android Support Droid sample project has been updated - please check that for more.

All 10 comments

Implemented feature + adjusted Android Support sample.
1. Support for RecyclerView Header
To add header to your MvxRecyclerView add in xml:
local:MvxHeaderLayoutId="@layout/recyclerviewexample_header"

To control header visibility if list is empty use:
local:MvxHidesHeaderIfEmpty="false" (true by default)

2. Support for RecyclerView Footer
To add footer to your MvxRecyclerView add in xml:
local:MvxFooterLayoutId="@layout/recyclerviewexample_footer"

To control header visibility if list is empty use:
local:MvxHidesFooterIfEmpty="false" (true by default)

3. Support for RecyclerView grouping
To use grouping with RecyclerView you have to:

  • Your ViewModel list should implement IGrouping<TKey, TValue>
  • You should add value converter class which inherit from MvxGroupedItemsConverter<TKey, TValue>
  • Your MvxRecyclerView should look like:
        <MvxRecyclerView
            android:id="@+id/my_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            local:MvxItemTemplate="@layout/listitem_recyclerviewexample"
            local:MvxGroupSectionLayoutId="@layout/listitem_recyclerviewexample_groupheader"
            local:MvxBind="ItemsSource GroupedItems, Converter=StringGroupToMvxGroupedData; ItemClick ItemSelected" />

Please check sample project for more.

The only flaw of current grouping is that - it does not support Replace/Move ObservableCollection Changed events + there is no support for dynamic group child items change. I will probably create another issue for that when it's merged and implement this in future.

4. New commands
Additionaly MvxRecyclerViewcontains command properties like: - HeaderClickCommand, FooterClickCommand, GroupHeaderClickCommand.

5. Sample project
Android Support Droid sample project has been updated - please check that for more.

Can someone look at the latest commit?
I might need the new grouping model class to implement MvvmCross bindings for AdvancedRecyclerView bindings I have made for Xamarin.

I've looked at that latest commit and added some comments. I'm not sure what you mean by

I might need the new grouping model class to implement MvvmCross bindings for AdvancedRecyclerView bindings I have made for Xamarin.

Once those issues are addressed I'll check out the branch and poke around (it's a big change to just look at the diff!).

@kjeremy I have pushed new commit
@martijn00 I think it's now ready to merge

Great work @thefex !

Is there a estimate of when the next release might happen and if that release will contain the grouping support? @martijn00

@Cybrosys soon. It will contain what is in develop currently.

Looks great @thefex! Can you please allow support for custom adapters and data binding for headers?

@thefex Great work! Can you add some documentation about those changes? The above explanation is good! Its should be easy enough to do: https://www.mvvmcross.com/documentation/contribute/mvvmcross-docs-style-guide/mvvmcross-docs-style-guide.html

Any news on when grouping could be available?

It will be done through AdvancedRecyclerView library with MvvmCross bindings. It is more reliable and stable. Work still in progress, can't give accurate estimations (on my GitHub..)

Was this page helpful?
0 / 5 - 0 ratings