لود اطلاعات با اسکرول شدن صفحه در Xamarin

لود اطلاعات با اسکرول شدن صفحه در Xamarin

ممکن است اطلاعاتی که به کاربر قرار است نمایش داده شود به تعدادی باشد که نیاز به صفحه بندی باشد.
کاری که قرار است انجام شود به این صورت می باشد:
لود بخشی از این اطلاعات و نمایش به کاربر
لود بخشی دیگر از این اطلاعات زمانی که کابر به انتهای لیست رسید.
1. ساخت ریپازیتوری:
در این مقاله اهمیتی ندارد ریپازیتوری یا منبع اطلاعات کجا قرار دارد، بانک اطلاعاتی خود نرم افزار یا سرور، در این مثال یک لیست از اطلاعات را شبیه سازی میکنیم و با این لیست کار میکنیم.
پوشه ای با نام Repositories و درون این پوشه کلاس NewsRepository.cs را می سازیم.
کدهای زیر درون کلاس قرار میدهیم :
 

        public int PageSize { get; set; } = 20;
        public int PagesCount { get; set; }
        public List<string> News = new List<string>();
        public NewsRepository()
        {
            News.Add("1");
            News.Add("2");
            //Add data
            PagesCount = (int)Math.Ceiling(News.Count / (double)PageSize);
        }

همانطور که مشاهده میکنید، ابتدا دو پراپرتی PageSize و PagesCount را معرفی کردیم و سپس یک لیست جدید ساختیم.
در کانستراکتور کلاس هم لیست ساخته شده را مقدار دهی کردیم (این مقداردهی اولیه در پروژه واقعی انجام نمی شود و معمولا از بانک اطلاعاتی استفاده میکنیم)
مقدار PagesCount را هم با استفاده از اعمال ریاضی بدست آوردیم. این متغیر تعداد صفحات را نمایش می دهد.

2. ویو مدل صفحه بندی:

حالا کلاس جدیدی با نام PagedData به پوشه ViewModels اضافه میکنیم با اطلاعات زیر:
 

	    public int CurrentPage { get; set; }
        public int PagesCount { get; set; }
        public List<string> MyData { get; set; }

کلاس MyRepository که در مرحله قبل ساختیم را ویرایش کرده و کدهای زیر را به آن اضافه میکنیم:

	 public PagedData getNews(int page)
        {

            var data = News.Skip((page - 1) * PageSize).Take(PageSize).ToList();
            var pd = new PagedData()
            {
                CurrentPage = page,
                PagesCount = PagesCount,
                MyData = data
            };
            return pd;
        }

در این قطعه کد یک متد داریم که صفحه جاری را به عنوان ورودی دریافت می کند و با استفاده از متدهای Skip و Take اطلاعات آن صفحه را از بانک اطلاعاتی واکشی میکند (در اینجا بانک اطلاعاتی ما لیستی است که به صورت دستی مقداردهی کردیم)
اطلاعات واکشی شده به همراه شماره صفحه جاری و تعداد صفحات را بازگشت میدهد.

3. صفحه نمایش اطلاعات و لست ویو:

حالا صفحه ای که قرار است اطلاعات را نمایش دهد باز میکنیم(در این مثلا صفحه MainPage)
در صفحه MainPage.xaml کدهای زیر را قرار دهید:
 

    <StackLayout VerticalOptions="Center">
        <ListView x:Name="newsListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Label Text="{Binding .}" />
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

این قسمت نیاز به توضیح خاصی ندارد(یک لست ویو در صفحه قرار دادیم تا اطلاعات را به کاربر نمایش دهد)

4. رخداد ItemAppearing:

فایل MainPage.xaml.cs را باز کنید و کدهای زیر را به این فایل اضافه کنید:
 

        private List<string> Items;
        public int CurrentPage { get; set; } = 1;
        public int PagesCount { get; set; } = 0;
        public int PageSize { get; set; } = 20;

        bool isLoading = false;

        public MainPage()
        {
            InitializeComponent();
            Items = new List<string>();

            LoadData();

            newsListView.ItemAppearing += (sender, e) =>
            {
                if (isLoading || Items.Count == 0)
                    return;

                if (e.Item.ToString() == Items[Items.Count - 1])
                {
                    if (CurrentPage < PagesCount)
                    {
                        CurrentPage++;
                        LoadData();
                    }
                }
            };

        }

        private void LoadData()
        {
            var nl = new List<string>();
            isLoading = true;
            this.Title = "Loading";
            Device.StartTimer(TimeSpan.FromSeconds(2), () => {
                var nr = new NewsRepository();
                var pagedData = nr.getNews(CurrentPage);

                nl = pagedData.MyData;
                Items.AddRange(nl);

                Items = Items.ToList();

                CurrentPage = pagedData.CurrentPage;
                PagesCount = pagedData.PagesCount;

                newsListView.ItemsSource = Items;

                this.Title = "Done";
                isLoading = false;

                return false;
            });
        }

یک لییست با نام Items تعریف کردیم که قرار است اطلاعات واکشی شده از ریپازیتوری را داشته باشد.
CurrentPage شماره صفحه جاری را مشخص میکند.
PagesCount تعداد کل صفحات.
PageSize تعداد آیتم هایی که در هر صفحه قرار است نمایش دهیم.
isLoading نشان می دهد که آیا در حال لود اطلاعات می باشد یا خیر.
در کانستراکتور صفحه همانطور که مشاهده می کنید اولین با صدا زدن متد LoadData که در ادامه توضیح خواهم داد برای اولین بار لیست ویو را مقداردهی کردیم، سپس EventHandler ای با نام ItemAppearing را برای لیست ویو ساختیم که نکته اصلی مقاله در همین چند خط خلاصه می شود، این EventHandler زمانی اتفاق می افتد که آیتم لیست ویو نمایش داده شود، در این چند خط کد بررسی کرده این که اگر آیتم نمایش داده شده آخرین آیتم باشد لود اطلاعات صفحه بعد انجام شود که قبل از این کار صفحه جاری یک واحد اضافه می شود.
در متد LoadData متد getNews که در مرحله دوم ساختیم صدا زده شده و صفحه جاری به عنوان شماره صفحه به آن ارسال می شود، نتیجه این متد اطلاعاتی که نیاز داریم را به ما می دهد، مقدار صفحه جاری، تعداد کل صفحات و همینطور لیست اطلاعات صفحه جاری.
لیست اطلاعات صفحه جاری را به لیست ویو بایند می کنیم و کار تمام است.حالا اکر پروژه را اجرا کنید می بینید لیست اطلاعات صفحه اول نمایش داده می شود و با اسکرول کردن صفحه زمانی که به انتهای صفحه برسید اطلاعات صفحه دوم نیز نمایش داده خواهد شد.
نتیجه گیری:
نمایش یک لیست طولانی کار سختی نیست، برای اینکه سرعت لود اطلاعات بیشتر شود از تکنیک های صفحه بندی استفاده می کنیم که در این مقاله به نمایش اطلاعات صفحات با اسکرول شدن صفحه پرداختیم، نکته مهمی که داشتیم بحث ItemAppearing بود که در این قسمت تشخیص می دهیم آیا صفحه به انتهای لیست رسیده است یا خیر.

نظرات (0)

نظرسنجی
میزان رضایت شما از امکانات و مقالات سایت