zoukankan      html  css  js  c++  java
  • Windows phone UI虚拟化和数据虚拟化(二)

    书接上回的Windows phone UI虚拟化和数据虚拟化(一)我们学习了wp的ui虚拟化。
    今天来和大家分享一下wp的数据虚拟化。

    并同时感谢我的同事dgwutao在编写此文时给我的巨大帮助,3ks!

    1.什么是数据虚拟化及其优点。

    --弱水三千,只取一瓢饮。百万记录,只载十几条。

    和ui虚拟化一样,尽管我们要显示的数据有成百上千条,但我们只在内存中,加载我们需要展示在屏幕上的

    若干条。随着列表的滑动,我们添加将要显示在屏幕上的数据条目,删除已经不再展示区的条目。保证内存中

    加载的数据条目只有很少的一部分(具体数目根据情况定制)。

    虚拟化的优点也显而易见了,有效地节省内存。

    2.怎么实现数据虚拟化

       

    不知道各位看到这里,心里会不会说,通过上面的描述,这个,这个,不就是【点击】/【滑动】 加载更多吗?

    话说滑动加载真心弱爆了。。。也不要纠结怎么判断触底没触底了。

    来!开始我们的数据虚拟化!

    接着用上一篇的Demo,我们来看一个基本的列表数据绑定。

    【.xaml】
    <phone:LongListSelector ItemsSource="{Binding ListProduct}"

    【.cs】

    这个是,我们通常的用法。没有任何问题。但是,我们要实现我们想要的只加载屏幕上显示的一页(9条)数据。

    该如何着手呢?保持List只有9条很容易,但是当list只有9条恰好一页的时候,我们知道ListBox,LLS的滚动条。
    根本就不会滚动。因为列表控件认为你的数据源不是1000条,而是9条。

    那么列表控件是根据什么来判断数据源的总数呢?
    开始思考。。。3 。。。    2。。。。。1。。。对,答案就是集合的【Count】属性。

    所以我们第一步要做的就是,骗过这些列表控件。给他们一个"假的" 【Count】属性

    下面我们定义一个泛型类,继承Ilist<T>等几个接口。

    public class VirtualizingCollection<T>:IList<T>,IList, INotifyPropertyChanged, INotifyCollectionChanged

    {

    public VirtualizingCollection(int count)

    {

    this.count = count;

    }

    public int Count

    {

    get { return count; }

    set

    {

    count = value;

    RaisePropertyChanged("Count");

    }

    }

    public T this[int index]

    {

    get

    {

    Return null;

    }

    set

    {

    throw new NotImplementedException();

    }

    }

    //----省略-----

    }

    So Easy! 我们只要在VirtualizingCollection初始化的时候给Count付个1000,就轻松的骗过那些傻傻的列表控件,可以尽情的滚动了。

    尽管能刷刷的滚动了,但是我们发现,界面上一片空白,没有任何数据。为啥呢?

    控件在绑定后,遍历数据源时。我们的索引 public T this[int index]还没有实现!肯定是不会返回任何数据的。

    这块索引的实现并不是固定的实现方式,要根据具体的场景来看。

    好,现在我们来假设这样一个qq聊天的场景。

    在进入qq会话页面的时候会从本地数据库里读取聊天的历史记录。共有1000条记录。每页显示9条。

    这里我们可以按照传统的分页方式来加载。

    在上面的类里,我们新建一个字典字段。

    private readonly Dictionary<int, IList<T>> _pages = new Dictionary<int, IList<T>>();

    这个字典就是我们所说的,对应屏幕上显示的若干条数据(此例中我们保持每个时刻,内存中只有3-5屏数据)

    Dictionary<int, IList<T>> int就是pageindex 页码, IList<T> 就是这一页里的pagesize条数据(本例是9条)

    下面是具体的代码

    private readonly int _pageSize = 9;

    public T this[int index]

    {

    get

    {

    int pageIndex = index / PageSize;//请求的item的索引(index)所在的页码

    int pageOffset = index % PageSize;//滑动列表当前页产生的偏移

    RequestPage(pageIndex);

    //大于一屏的一半加载下一页

    if (pageOffset > PageSize / 2 && pageIndex < Count / PageSize)

    {

    RequestPage(pageIndex + 1);

    }

    // 小于一屏的一半加载上一页

    if (pageOffset < PageSize / 2 && pageIndex > 0)

    {

    RequestPage(pageIndex - 1);

       

    }

    //只保留,当前页和上下两页,删除多余的

    if (_pages.Count >= 3 && _pages.ContainsKey(pageIndex - 2))

    {

    _pages.Remove(pageIndex - 2);

    }

    if (_pages.Count > 3 && _pages.ContainsKey(pageIndex + 2))

    {

    _pages.Remove(pageIndex + 2);

    }

    return _pages[pageIndex][pageOffset];

    }

    }

    protected virtual void RequestPage(int pageIndex)

    {

    if (!_pages.ContainsKey(pageIndex))

    {

    _pages.Add(pageIndex, null);

    LoadPage(pageIndex);

    }

       

    }

    protected virtual void LoadPage(int pageIndex)

    {

    PopulatePage(pageIndex, FetchPage(pageIndex));

    }

       

    protected virtual void PopulatePage(int pageIndex, IList<T> page)

    {

    if (_pages.ContainsKey(pageIndex))

    _pages[pageIndex] = page;

    }

    protected IList<T> FetchPage(int pageIndex)

    { //这里是从数据库里取,列表请求的页码对应的数据

    return (IList<T>)LocalData.FetchRange(pageIndex * PageSize, PageSize);

    }

    LocalDatd.cs

    public static class LocalData

    {

    private static Random rnd = new Random();

    private static List<Product> listProduct;

    static LocalData()

    { //假设这里是存在本地数据库里的聊天记录的信息有1000条

    listProduct = new List<Product>(1000);

    for (int i = 0; i < 1000; i++)

    {

    listProduct.Add(new Product { Id = i, Name = "聊天记录-" + rnd.Next(1000, 10000).ToString(), Category = "" });

    }

    }

    //分页取库里的聊天记录(模拟)

    public static IList<Product> FetchRange(int skip, int take)

    {

    return listProduct.Skip(skip).Take(take).ToList();

    }

    }

    在viewmodel中初始化

    private VirtualizingCollection<Product> vList;

    public VirtualizingCollection<Product> VList

    {

    get { return vList; }

    set { vList = value; }

    }

    private static Random rnd=new Random ();

    public MainPageViewModel()

    {

    vList = new VirtualizingCollection<Product>(1000);

    }

    我们运行,上下滑动,看一下效果s

       

    我们看到内存中加载的页数始终是3-5页。而且滚动条已经显示的是总数为1000时的高度。

    这就是所谓的数据虚拟化了。

    比起点击加载,滑动加载,以数据虚拟化的方式,内存占用更少。(滑动加载数据源是不断被add的并没有delete)

    另一点在用户体验上,滚动条的变化也给了用户预期,列表到底有多少数据。

    当然我这里只是演示性的demo。具体应用还有很多需要注意的地方。比如说如果数据来源于网络,从磁盘读取,较慢的时候。

    就需要一些异步的的读取处理。在实现索引器的时候我们这里是根据固定的页数移除,还可以根据最近的加载时间判断哪些页面要移除等等。

       

    最后我还要留个小小的问题。public class VirtualizingCollection<T>:IList<T>,IList在这里我实现了两个很相近的接口。

    谁能告诉我这么做是为啥?请留言回答:) 回答正确的,月薪15k以下的,你们老板对不起你!

    最后的呐喊!所有关注/从事Windows Phone平台的道友,能不能在android,ios大行其道,wp沦为小平台的无奈下,

    别再敝帚自珍!一起为wp平台多奉献一些自己的经验,多分享一些优质的资源。

    能不能在您看完文章的此刻,顺便给这些同在wp平台挣扎的道友,轻轻的,点一下【推荐】!!!

    demo下载

  • 相关阅读:
    2019年1月26日训练日记
    2019年1月25日训练日记
    2019年1月24日训练日记
    2019年1月23日训练日记
    2019年1月22日训练日记
    2019年1月21日训练日记
    2019年1月20日训练日记
    2019年1月19日训练日记
    2019年1月18日训练日记
    C语言学习小结
  • 原文地址:https://www.cnblogs.com/beyoung/p/3526505.html
Copyright © 2011-2022 走看看