RefreshView – Deixando tudo atualizável!

Sabe quando você puxa a tela do celular para atualizar o conteúdo? Agora ficou fácil fácil de fazer com Xamarin.Forms! Neste post vamos ver melhor como implementar PullToRefresh com o RefreshView.

O RefreshView

O RefreshView é um novo controle de tela adicionado ao Xamarin.Forms na versão 4.3. Ele permite que você adicione o comportamento de PullToRefresh (puxe para atualizar) em qualquer componente de tela que seja scrollavel, como ListView, CollectionView, ScollView.

Ele dispõe de propriedades bastante interessantes para sua personalização, como:

• RefreshColor – Propriedade para personalizar a cor do indicador de atividade
• IsRefreshing – Propriedade booleana para controlar a exibição do indicador de atividade e executar o command diretamente da ViewModel
• CommandParameter – Propriedade para enviar valores para o command a ser executado.

Implementando

O primeiro passo para utilizar o RefreshView é verificar se você está na versão 4.3 do Xamarin.Forms ou superior. Se não estiver, atualize o Xamarin.Forms antes de continuar.

Com um projeto em branco, vamos adicionar uma classe chamada MainPageViewModel. Nela vamos adicionar uma lista que será a fonte de dados para nossa tela:

Neste projeto estou utilizando o pacote MVVMHelpers do James Montemagno para auxiliar no trabalho com as View Models.

public class MainPageViewModel : BaseViewModel
{
    public ObservableRangeCollection<string> Times { get; set; }

    public MainPageViewModel()
    {
        Times = new ObservableRangeCollection<string>
        {
            "Corinthians",
            "São Paulo",
            "Palmeiras",
            "Santos",
            "Internacional",
            "Grêmio",
            "Flamengo",
            "Botafogo",
            "Vasco",
            "Cruzeiro",
            "Atlético-MG",
            "Bahia",
            "Atlético-PR"
        };
    }
}

Agora, na tela vamos adicionar um Bindable StackLayout com a fonte de dados que criamos acima. É importante que ele esteja entre um ScrollView:

<StackLayout Margin="10">
    <ScrollView>
        <StackLayout BindableLayout.ItemsSource="{Binding Times}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout Margin="10">
                        <Label Text="{Binding .}"
                               FontSize="Large"
                               FontAttributes="Bold"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</StackLayout>

O próximo passo é adicionar o RefreshView. Vamos adiciona-lo como pai do nosso BindableLayout:

<RefreshView>
    <ScrollView>
        <StackLayout BindableLayout.ItemsSource="{Binding Times}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout Margin="10">
                        <Label Text="{Binding .}"
                            FontSize="Large"
                            FontAttributes="Bold"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</RefreshView>

Na MainPageViewModel, vamos adicionar o command que o RefreshView irá acionar quando a tela for scrollada para cima. O command irá transformar a lista de times em uma lista de Pokémons apenas com o pokémon Pikachu:

public class MainPageViewModel : BaseViewModel
{
    public ObservableRangeCollection<string> Times { get; set; }

    public ICommand AtualizarListaCommand { get; set; }

    public MainPageViewModel()
    {
        AtualizarListaCommand = new Command(() =>
        {
            Times.Clear();
            Times.Add("Pikachu");
        });

        Times = new ObservableRangeCollection<string>
        {
            "Corinthians",
            "São Paulo",
            "Palmeiras",
            "Santos",
            "Internacional",
            "Grêmio",
            "Flamengo",
            "Botafogo",
            "Vasco",
            "Cruzeiro",
            "Atlético-MG",
            "Bahia",
            "Atlético-PR"
        };
    }
}

Agora basta adicionar a chamada do command no RefreshView:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PullRefresh"
             x:Class="PullRefresh.MainPage">

    <StackLayout Margin="10">
        <RefreshView  Command="{Binding AtualizarListaCommand}"
                    RefreshColor="Purple">
            <ScrollView>
                <StackLayout BindableLayout.ItemsSource="{Binding Times}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="10">
                                <Label Text="{Binding .}"
                                    FontSize="Large"
                                    FontAttributes="Bold"/>
                            </StackLayout>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>
        </RefreshView>
    </StackLayout>
</ContentPage>

Conclusão

E então? Bastante fácil não é? Desta maneira o desenvolvimento com Xamarin.Forms fica mais flexível e mais personalizável, sendo mais fácil de adapta-lo as nossas necessidades. Acompanhe as novas versões do Xamarin.Forms, vem muita coisa boa por aí!

—

#Ubuntu