Xamarin Forms: Pull To Refresh в ListView

17 Январь

ListView, Перевод Android, Forms, iOS Leave a Comment

Элемент управления Xamarin Forms ListView позволяет достичь того, чтобы при движении сверху вниз, выполненном пользователем в верхней части ListView, вызывалась команда обновления. Я говорю «команда обновления» потому, что движение сверху вниз для обновления просто запускает «команду», а Вы уже можете делать все что угодно в этой «команде» в том числе даже и не обновлять ListView.

Свойства

Для того чтобы реализовать функцию «потяните для обновления», нужно иметь представление о трех свойствах.

 <ListView ItemsSource="{Binding MyList}"
           IsPullToRefreshEnabled="True"
           RefreshCommand="{Binding RefreshCommand}"
           IsRefreshing="{Binding IsRefreshing}" />

<ListView ItemsSource="{Binding MyList}"

IsPullToRefreshEnabled="True"

RefreshCommand="{Binding RefreshCommand}"

IsRefreshing="{Binding IsRefreshing}" />

Для включения этой функции установите IsPullToRefreshEnabled=”True”, а затем создайте следующие два свойства во ViewModel.

private bool _isRefreshing = false;
public bool IsRefreshing { 
get { return _isRefreshing; }
set {
    _isRefreshing = value;
    OnPropertyChanged(nameof(IsRefreshing));
    }
}

private bool _isRefreshing = false;

public bool IsRefreshing {

get { return _isRefreshing; }

set {

_isRefreshing = value;

OnPropertyChanged(nameof(IsRefreshing));

}

public ICommand RefreshCommand
{
    get {
        return new Command(async () =>
        {
            IsRefreshing = true;
            
            await RefreshData();

            IsRefreshing = false;
        });
    }
}

public ICommand RefreshCommand

{

get {

return new Command(async () =>

{

IsRefreshing = true;

await RefreshData();

IsRefreshing = false;

});

}

Теперь при выполнении движения сверху вниз в верхней части ListView начнет показываться анимация обновления, пока действует установка IsRefreshing=”true”.

Pull To Refresh кастомизация

На каждой платформе мы можем индивидуально настроить небольшую часть анимации обновления.

Android

Android использует элемент управления SwipeRefreshLayout для отображения анимации при обновлении ListView. SwipeRefreshLayout является внутренним содержанием ListViewRenderer, следовательно, Вы лишены возможности обращаться непосредственно к его свойствам, если, конечно, не ходите написать полностью новый ListViewRenderer. Однако, поскольку у Android есть стили, их можно использовать для переопределения трех цветовых элементов.

<color name="refresh_progress_1">@color/theme_accent_2</color>
<color name="refresh_progress_2">@color/theme_accent_1</color>
<color name="refresh_progress_3">@color/theme_primary</color>

<color name="refresh_progress_1">@color/theme_accent_2</color>

<color name="refresh_progress_2">@color/theme_accent_1</color>

<color name="refresh_progress_3">@color/theme_primary</color>

iOS

В iOS для отображения анимации при обновлении данных используется элемент UIRefreshControl. У UIRefreshControl имеется TintColor и AttributedTitle и в отличие от Android здесь у нас есть возможность взаимодействия с этим элементом управления. У ListViewRenderer есть ViewController, который в действительности является UITableViewController. И из него можно добраться до RefreshControl.

[assembly: ExportRenderer(typeof(ListView), typeof(ListViewRender))]
namespace Mobile.iOS
{
    public class ListViewRender: ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            ((UITableViewController)ViewController).RefreshControl.TintColor = UIColor.Red;
        }
    }
}

[assembly: ExportRenderer(typeof(ListView), typeof(ListViewRender))]

namespace Mobile.iOS

{

public class ListViewRender: ListViewRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)

{

base.OnElementChanged(e);

((UITableViewController)ViewController).RefreshControl.TintColor = UIColor.Red;

}

Ограничения

Не доступно на UWP или Windows Phone 8.1
Невозможность простой кастомизации анимации обновления.
Доступны только ограниченные варианты стилей.

Автор: Adam Pedley
Источник: Статья в блоге автора

Xamarin Developers