MvxExpandableRecyclerView.Core
3.0.3
See the version list below for details.
dotnet add package MvxExpandableRecyclerView.Core --version 3.0.3
NuGet\Install-Package MvxExpandableRecyclerView.Core -Version 3.0.3
<PackageReference Include="MvxExpandableRecyclerView.Core" Version="3.0.3" />
paket add MvxExpandableRecyclerView.Core --version 3.0.3
#r "nuget: MvxExpandableRecyclerView.Core, 3.0.3"
// Install MvxExpandableRecyclerView.Core as a Cake Addin #addin nuget:?package=MvxExpandableRecyclerView.Core&version=3.0.3 // Install MvxExpandableRecyclerView.Core as a Cake Tool #tool nuget:?package=MvxExpandableRecyclerView.Core&version=3.0.3
Android MvxExpandableRecyclerView
This is an unofficial package that contains an expandable AndroidX RecyclerView supported for MvvmCross. This view allows us to bind a collection of items (objects, ViewModels, etc) to the ItemsSource
property. It works similarly to a RecyclerView. However, this comes with out-of-the-box functionality such as grouping items with collapsible/expandable headers. Additional functionality can be implemented such as dragging items up and down and swiping them by binding a boolean
property to EnableDrag
and EnableSwipe
respectively.
All original functionality of MvxRecyclerView
is also available and it is highly encouraged that you read the documentation before proceeding.
Getting Started
You need to ensure that you have the MvxExpandableRecyclerView.Core and MvxExpandableRecyclerView.DroidX NuGet packages installed in your .Core
and .Droid
projects respectively.
The general steps to implement this control:
- We want to create an app where people are grouped by their appointment dates. Firstly, in our
.Core
project, we create an entity class to hold our data:Person.cs
.
public class Person
{
public Person(string firstName, string lastName, DateTime? appointment)
{
FirstName = firstName;
LastName = lastName;
Appointment = appointment;
}
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime? Appointment { get; set; }
}
- We then create a class that inherits
TaskItem<Person, DateTime?>
namedPersonItem.cs
. This will allow the ExpandableRecyclerView to know how to group ourPerson.cs
objects.
public class PersonItem : TaskItem<Person, DateTime?>
{
public PersonItem(Person model)
: base(model)
{ }
public override DateTime? Header { get => Model.Appointment; set => Model.Appointment = value; }
}
- In our ViewModel (where we will add the ExpandableRecyclerView to the corresponding view), we will initialise a list that will hold
PersonItem
s for binding.
public MvxObservableCollection<ITaskItem> People { get; private set; }
- For the rest of the steps, everything will be done in our
.Droid
project. We create a view to display ourPersonItem.cs
objects inside the ExpandableRecyclerView. We'll name the viewPersonItem.xml
.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:MvxBind="Text Format('{0} {1} - {2:d}', Model.FirstName, Model.LastName, Model.Appointment);"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="4sp"
android:textColor="?android:attr/colorAccent"
app:MvxBind="Text Sequence;"/>
</LinearLayout>
Notice that "Model" is prepended to our binded properties. This allows us to access properties in the underlying entity class. In this example, "Model" refers to the Person.cs
entity class and we are binding Person.FirstName
, Person.LastName
and Person.Appointment
to the TextView
We also have another TextView
that binds to TaskItem<TModel, THeader>.Sequence
, if you want to save the ordering of each item.
- We then create another view for our headers, if we want to display something other than a
SimpleListItem1
[^1]. In this example:TaskHeader.xml
displays anImageView
showing an arrow up or down depending on theTaskHeader.IsCollapsed
property and uses aTextView
to bind toTaskHeader.Name
. There's also anotherTextView
that display the number of items under the said header.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8sp"
android:gravity="center">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/arrow_down_float"
app:MvxBind="Visible IsCollapsed;"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/arrow_up_float"
app:MvxBind="Visible !IsCollapsed;"/>
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Base.TextAppearance.AppCompat.Headline"
app:MvxBind="Text Name;"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="4sp"
android:textColor="@android:color/holo_red_dark"
app:MvxBind="Text Count;"/>
</LinearLayout>
- We then create a custom Item Template Selector to handle displaying view for the corresponding item(s). In this example, if an item doesn't have a corresponding view, it will default to
PersonItem.xml
.
public class AppointmentTemplateSelector : MvxTemplateSelector<ITaskItem>
{
public override int GetItemLayoutId(int fromViewType)
{
return fromViewType switch
{
1 => Resource.Layout.TaskHeader,
_ => Resource.Layout.PersonItem,
};
}
protected override int SelectItemViewType(ITaskItem forItemObject)
{
if (forItemObject is ITaskHeader)
return 1;
else
return -1;
}
}
- Finally, adding
MvxExpandableRecyclerView
to one of yourView.xml
is very simple. In this example we haveAppointmentView.xml
and add:
<MvvmCross.ExpandableRecyclerView.DroidX.MvxExpandableRecyclerView
android:id="@+id/appointment_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxTemplateSelector="AppointmentPlanner.Droid.Components.AppointmentTemplateSelector, AppointmentPlanner.Droid"
local:MvxBind="ItemsSource People;
ItemSwipeRight UnplanPersonCommand;
ItemSwipeLeft RemovePersonCommand;"/>
Important: MvxExpandableRecyclerView will require you to bind an MvxObservableCollection<ITaskItem>
to ItemsSource
and will need to have your custom MvxTemplateSelector
for it to display your headers and items correctly.
For more information, MvvmCross provides documentation for MvxTemplateSelector. If you want to display complex objects for both/either headers and/or items, it is strongly recommended to use MvxTemplateSelector
to show different types of views.
Dragging and Swiping Items
To enable dragging and swiping features, we need to modify our xml
and bind EnableDrag
and EnableSwipe
to true
.
<MvvmCross.ExpandableRecyclerView.DroidX.MvxExpandableRecyclerView
android:id="@+id/appointment_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxTemplateSelector="AppointmentPlanner.Droid.Components.AppointmentTemplateSelector, AppointmentPlanner.Droid"
local:MvxBind="ItemsSource People;
ItemSwipeRight UnplanPersonCommand;
ItemSwipeLeft RemovePersonCommand;
EnableDrag true;
EnableSwipe true;"/>
Swipe actions are bindable and can have 2 different actions depending on the direction of the swipe. ItemSwipeLeft
and ItemSwipeRight
are bindable and are done in the same way as MvxRecyclerView
's ItemClickCommand
and ItemLongClickCommand
.
Hide Sticky Header
A sticky header is always shown by default, however we can hide the sticky header by modifying our xml
and bind ShowStickyHeader
to false
.
<MvvmCross.ExpandableRecyclerView.DroidX.MvxExpandableRecyclerView
android:id="@+id/appointment_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxTemplateSelector="AppointmentPlanner.Droid.Components.AppointmentTemplateSelector, AppointmentPlanner.Droid"
local:MvxBind="ItemsSource People;
ItemSwipeRight UnplanPersonCommand;
ItemSwipeLeft RemovePersonCommand;
EnableDrag true;
EnableSwipe true;
ShowStickyHeader false;"/>
[^1]: If you don’t provide an item template selector MvxExpandableRecyclerView
will fall back to using a SimpleListItem1
, which is a built in Android Resource. It will also just call ToString()
on your item that you are supplying. A custom view should be used for headers, if items aren't grouped using a string
.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.0 is compatible. netstandard2.1 was computed. |
.NET Framework | net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen40 was computed. tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.0
- No dependencies.
NuGet packages (1)
Showing the top 1 NuGet packages that depend on MvxExpandableRecyclerView.Core:
Package | Downloads |
---|---|
MvxExpandableRecyclerView.DroidX
MvvmCross is the .NET MVVM framework for cross-platform solutions, including Xamarin iOS, Xamarin Android, Xamarin Forms, Windows and Mac. This is an unofficial package that contains an expandable AndroidX RecyclerView supported for MvvmCross. |
GitHub repositories
This package is not used by any popular GitHub repositories.