[MAUI 활용] BookStore 만들기 (10) – Refresh 기능 추가

모바일 애플리케이션에서는 화면을 위에서 아래로 끌어서 “새로 고침” 기능을 제공하는 경우가 많습니다. 이번 장에서는 기존에 만들었던 도서 정보 조회 화면에 “새로 고침” 기능을 추가해 보겠습니다. 기존 MainPage.xaml 소스를 아래와 같이 수정해 보겠습니다.

[MainPage.xaml]

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MyBookStore.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:model="clr-namespace:MyBookStore.Models"
    xmlns:viewmodel="clr-namespace:MyBookStore.ViewModels"
    Title="{Binding Title}"
    x:DataType="viewmodel:BookListViewModel">
    <Grid
        ColumnDefinitions="*,*"
        ColumnSpacing="5"
        RowDefinitions="*, Auto">
        <RefreshView Grid.ColumnSpan="2" Command="{Binding LoadBooksCommand}" IsRefreshing="{Binding IsRefreshing}">
            <CollectionView ItemsSource="{Binding Books}" SelectionMode="Single">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Book">
                        <Frame HeightRequest="90">
                            <HorizontalStackLayout Padding="10" Spacing="5">
                                <Label Text="{Binding Id}" />
                                <Label Text="{Binding Title}" />
                            </HorizontalStackLayout>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>
        <Button
            Grid.Row="1"
            Grid.Column="0"
            Command="{Binding LoadBooksCommand}"
            IsEnabled="{Binding IsNotLoading}"
            Text="Get Books" />
    </Grid>
</ContentPage>

어떤 부분이 변경되었는지 보이시나요? 기존 CollectionView가 새로 추가된 RefreshView 의 하위 엘리먼트로 설정된 것을 확인할 수가 있습니다.

RefreshView

RefreshView는 사용자가 목록을 아래로 끌어 새로 고침 동작을 트리거할 수 있게 하는 컨트롤입니다. 이 컨트롤은 주로 데이터 목록을 포함하는 컨트롤을 감싸는 데 사용됩니다.

Grid.ColumnSpan=”2″: 이 속성은 RefreshView가 그리드의 두 열을 모두 차지하도록 설정합니다.
Command=”{Binding LoadBooksCommand}”: LoadBooksCommand를 실행하여 데이터를 새로 로드합니다.
IsRefreshing=”{Binding IsRefreshing}”: 이 속성은 새로 고침 상태를 나타내는 속성을 바인딩합니다. IsRefreshing 속성은 새로 고침이 진행 중인지 여부를 나타냅니다. BookListViewModel 의 IsRefreshing 속성과 바인딩 되어 있기 때문에 속성 값이 변경되었을 때 실시간으로 적용할 수 있습니다.

IsRefreshing 속성

IsRefreshing 속성은 RefreshView 컨트롤에서 새로 고침 상태를 관리하는 데 사용됩니다. 이 속성은 사용자가 새로 고침 동작을 트리거했을 때와 새로 고침이 완료되었을 때의 상태를 나타냅니다.

새로 고침 시작
- 사용자가 RefreshView를 아래로 끌어 새로 고침을 시작하면, IsRefreshing 속성이 true로 설정됩니다.
- 이때, Command 속성에 바인딩된 명령(LoadBooksCommand)이 실행됩니다.
새로 고치는 중
- IsRefreshing 속성이 true인 동안, 새로 고침 애니메이션이 표시됩니다.
- 이 상태에서 데이터 로드 작업이 진행됩니다.
새로 고침 완료
- 데이터 로드 작업이 완료되면, IsRefreshing 속성을 false로 설정하여 새로 고침 애니메이션을 중지합니다.
- 이로써 사용자는 새로 고침이 완료되었음을 알 수 있습니다.

소스중에 IsRefreshing=”{Binding IsRefreshing}” 에 대해서는 위에 설명하였습니다. BookListViewModel 에 IsRefreshing 속성이 추가되어야 합니다. 이전 강의에서 설명된 IsLoading 속성은 BookListViewModel 의 부모클래스인 BaseViewModel 에 정의되어 있습니다. IsRefreshing 속성도 BaseViewModel 에 정의하도록 하겠습니다.

[BaseViewModel.cs]

 [ObservableProperty]
 string title;

 [ObservableProperty]
 [NotifyPropertyChangedFor(nameof(IsNotLoading))]
 bool isLoading;

 [ObservableProperty]
 bool isRefreshing;
  
 public bool IsNotLoading => !IsLoading;

BaseViewModel 클래스에 IsRefreshing 멤버 변수를 ObservableProperty 로 선언한 것을 확인할 수 있습니다. ObservableProperty 에 대해서는 이전 포스팅을 참고하시면 됩니다.

[MAUI 활용] BookStore 만들기 (4) – BaseViewModel 만들기

이제 프로그램을 실행해서 화면을 위에서 아래로 끝어당겨보면 새롭게 도서 리스트가 새로 고침 되는 것을 확인할 수 있습니다.

RefreshView

IsRefreshing 속성

Related Posts

댓글 달기 댓글 취소