Xamarin.Forms ListView의 지연 로드 JSON 데이터: 개요

Lazy loading 또는 주문형 로드는 로드 성능을 향상시키는 기술입니다. 이를 통해 대규모 데이터 세트의 초기 로드에서 고정된 양의 데이터를 표시할 수 있습니다. 사용자가 해당 데이터의 끝으로 스크롤하면 데이터가 끝날 때까지 목록 끝에 더 추가할 수 있습니다. 무한 스크롤 또는 증분 로드라고도 합니다.

SyncfusionXamarin.Forms ListView(SfListView) 컨트롤은 목록과 유사한 인터페이스입니다. 데이터 항목 세트를 선형 또는 격자 구조로 수직 또는 수평으로 렌더링할 수 있습니다. 또한 Load More 기능으로 지연 로딩 지원을 제공합니다. 수동 및 자동으로 지연 로드를 활성화할 수 있습니다.

이 블로그에서는 초기 로드(지연 로드) 시 고정된 양JSON의 데이터를 표시하고 Xamarin.Forms ListView에서 스크롤할 때 나머지 데이터를 로드하는 동안 사용 중 표시기를 표시하는 방법을 알려줍니다.

URI에서 JSON 데이터 수집 채우기

URI에서 JSON 데이터 컬렉션을 채우려면 다음 단계를 따르세요.

1단계: Newtonsoft.Json NuGet 패키지를 Xamarin.Forms 공유 프로젝트에 설치합니다.

2단계: 그런 다음 HttpClient 메서드를 사용하여 URI에서 JSON 데이터를 다운로드하고 로컬 파일에 저장합니다.

public async Task<bool> DownloadJsonAsync()
{
  try
  {
    var url = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; //Set your REST API url here

    //Sends a request to retrieve data from the web service for the specified Uri
    var response = await httpClient.GetAsync(url);
    using (var stream = await response.Content.ReadAsStreamAsync()) //Reads data as stream
    {
      //Gets the path to the specified folder
      var localFolder = System.Environment.GetFolderPath(System.Environment.SpecialFolder.LocalApplicationData);

      var newpath = Path.Combine(localFolder, "Data.json"); // Combine path with the file name

      var fileInfo = new FileInfo(newpath);
      File.WriteAllText(newpath, String.Empty);

      //Creates a write-only file stream
      using (var fileStream = fileInfo.OpenWrite())
      {
         await stream.CopyToAsync(fileStream); //Reads data from the current stream and write to destination stream (fileStream)
      }
    }
  }
  catch (OperationCanceledException e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  catch (Exception e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  return true;
}

3단계: 이제 JSON 데이터를 동적 개체 목록으로 가져올 수 있습니다. 다음 코드 예제를 참조하십시오.

private async void GetDataAsync()
{
  isDownloaded = await DataService.DownloadJsonAsync();
  if (isDownloaded)
  {
    var localFolder = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);
    var fileText = File.ReadAllText(Path.Combine(localFolder, "Data.json"));

    //Read data from the local path and set it to the collection bound to the ListView.
    JSONCollection = JsonConvert.DeserializeObject<IList<dynamic>>(fileText);
    totalItems = JSONCollection.Count;
  }
}

LoadMoreCommand 속성은 점진적으로 JSON 데이터 컬렉션을 사용하여 요청 시 항목을 로드합니다. 이전에 말했듯이 Xamarin.Forms ListView에서 수동 또는 자동으로 데이터를 지연 로드할 수 있습니다.

코드 예제를 통해 이를 달성하는 방법을 살펴보겠습니다!

Xamarin.Forms ListView에서 JSON 데이터를 수동으로 지연 로드

ListView에서 더 많은 항목을 수동으로 로드하려면 LoadMoreOption 및 LoadMoreCommand 속성을 사용하여 LoadMoreCommandParameter을 수동으로 설정합니다. 이렇게 하면 목록 끝에 있는 추가 로드 버튼을 탭할 때 더 많은 항목이 로드됩니다.

ViewModel을 바인딩하려면 다음 코드 예제를 참조하세요. Xamarin.Forms ListView에 대한 LoadMoreItemsCommand.

<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=115, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ItemSpacing="5"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}">

ViewModel의 LoadMoreItemsCommand에 대한 다음 코드 정의를 참조하십시오.

private bool CanLoadMoreItems(object obj)
{
  if (Items.Count >= totalItems)
  return false;
  return true;
}

private async void LoadMoreItems(object obj)
{
   var listview = obj as SfListView;
   try
   {
      IsBusy = true;
      await Task.Delay(1000);
      var index = Items.Count;
      var count = index + 3 >= totalItems ? totalItems - index : 3;
      AddProducts(index, count);
   }
   catch
   {

   }
   finally
   {
      IsBusy = false;
   }
}

private void AddProducts(int index, int count)
{
  for (int i = index; i < index + count; i++)
  {
     Items.Add(JSONCollection[i]);
  }
}

위의 코드 예제를 실행하면 다음 GIF 이미지와 같은 출력이 표시됩니다.



추가 로드 단추를 사용하여 수동으로 Xamarin.Forms ListView에서 JSON 데이터 지연 로드

Xamarin.Forms ListView에서 JSON 데이터를 자동으로 지연 로드

ListView에서 더 많은 항목을 자동으로 로드하려면 LoadMoreOption 및 LoadMoreCommand 속성을 사용하여 LoadMoreCommandParameter을 Auto로 설정합니다. 스크롤 막대가 목록 끝에 도달하면 더 많은 항목을 로드합니다.

다음 코드 예제를 참조하십시오.

<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=105, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ScrollBarVisibility="Always"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}"/>

위의 코드 예제를 실행하면 다음 GIF 이미지와 같은 출력이 표시됩니다.



Xamarin.Forms ListView에서 자동으로 JSON 데이터 지연 로드

GitHub 참조

lazy loading JSON data in Xamarin.Forms ListView on GitHub에 대한 전체 예를 참조하십시오.

결론

읽어 주셔서 감사합니다! SyncfusionXamarin.Forms ListView에서 JSON 데이터를 지연 로드하는 방법을 확인했습니다. 자세한 내용은 load more feature in Xamarin ListView documentation 을 참조하십시오. 이 블로그의 단계를 시도하고 로딩 성능을 쉽게 향상시키십시오. 아래 댓글 섹션에 피드백을 남기는 것을 잊지 마세요!

현재 고객의 경우 새로운 Essential Studio 버전을 License and Downloads 페이지에서 다운로드할 수 있습니다. 아직 Syncfusion 고객이 아닌 경우 30일free trial을 사용하여 최신 기능을 확인할 수 있습니다.

support forum , support portal 또는 feedback portal 을 통해 저희에게 연락하실 수도 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그

View PDF Annotations as a List and Navigate Using Xamarin.Forms PDF Viewer

Let’s Replicate an Online Store UI in Xamarin.Forms

Create a Wizard View in Xamarin.Forms: A Novice’s Guide

Creating a Floating Label Layout in Xamarin.Forms DataForm