做商城类APP时经常会遇到抢购倒计时的功能,之前做小区宝iOS的时候也有类似的功能,想着参考iOS做的思路,自定义一个Cell,在Cell中每秒刷新一下控件的文本值,但使用xamarin.forms实现时,自定义cell的方式并不可行,小伙伴上周给发了一个倒计时功能的demo:https://github.com/jsuarezruiz/MyTripCountdown,demo是如下图实现的是一个时间的倒计时效果,需要将一个倒计时的功能放在列表中,实现多个倒计时的效果, 看了源码也一直没思路,昨天也是没思路报着试一试的心态动手操作了下,没想到成功了,还是非常有成就感的。

一、定义计时器

xamarin.forms提供了Device.StartTimer来实现定时任务,每隔一秒需要触发事件改变剩余时间。这里定义了两个Action,Completed是在倒计时结束时触发,Ticked是每秒触发一次。RemainTime是剩余时间timespan,EndDate为结束时间。

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace TimeCountDown
{
    public class CountDown : BindableObject
    {
        TimeSpan _remainTime;

        public event Action Completed;

        public event Action Ticked;

        public DateTime EndDate { get; set; }

        public TimeSpan RemainTime
        {
            get { return _remainTime; }

            private set
            {
                _remainTime = value;
                OnPropertyChanged();
            }
        }

        )
        {
            Device.StartTimer(TimeSpan.FromSeconds(seconds), () =>
            {
                RemainTime = (EndDate - DateTime.Now);

                ;

                if (ticked)
                {
                    Ticked?.Invoke();
                }
                else
                {
                    Completed?.Invoke();
                }

                return ticked;
            });
        }
    }
}

二、设置BaseViewModel

这里创建了一个BaseViewModel,并有2个方法,LoadAsync()、UnloadAsync(),而且继承了ExtendedBindableObject。

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;

namespace TimeCountDown
{
    public abstract class BaseViewModel : ExtendedBindableObject
    {
        public virtual Task LoadAsync()
        {
            return Task.CompletedTask;
        }

        public virtual Task UnloadAsync()
        {
            return Task.CompletedTask;
        }
    }
}

在ExtendedBindableObject中扩展了BindableObject,增加了SetProperty方法,SetProperty方法使用ref引用改变属性的值。

using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using System.Text;
using Xamarin.Forms;

namespace TimeCountDown
{
    public class ExtendedBindableObject : BindableObject
    {
        protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName]string propertyName = "")
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
            {
                return false;
            }

            backingStore = value;
            OnPropertyChanged(propertyName);

            return true;
        }
    }
}

三、设置ViewModel

新建继承BaseViewModel的类CountDownViewModel,在CountDownViewModel中定义了倒计时类CountDown,当CountDownViewModel调用构造函数时实例化倒计时CountDown,EndDate通过时间戳获得,之后调用LoadAsync()方法,启动计时器,并为计时器绑定具体Actio,在Ticked的Action中每秒定时刷新绑定到界面的数值。

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;

namespace TimeCountDown
{
    public class CountDownViewModel : BaseViewModel
    {
        public long Tick { get; set; }

        private string _countDownTitle;

        public string CountDownTitle
        {
            get => _countDownTitle;
            set => SetProperty(ref _countDownTitle, value);
        }

        private CountDown _countDown;

        public CountDownViewModel(long ticks)
        {
            Tick = ticks;
            _countDown = new CountDown() { EndDate = DateTime.Now.Add(new TimeSpan(ticks)) };
            LoadAsync();

        }
        public override Task LoadAsync()
        {
            _countDown.Start();
            _countDown.Ticked += OnCountdownTicked;
            _countDown.Completed += OnCountdownCompleted;
            return base.LoadAsync();
        }

        public override Task UnloadAsync()
        {
            _countDown.Ticked -= OnCountdownTicked;
            _countDown.Completed -= OnCountdownCompleted;
            return base.UnloadAsync();
        }

        void OnCountdownTicked()
        {
            CountDownTitle = string.Format("{0}:{1}:{2}后开抢", _countDown.RemainTime.Hours, _countDown.RemainTime.Minutes, _countDown.RemainTime.Seconds);
        }

        void OnCountdownCompleted()
        {
            CountDownTitle = "抢购进行中";
            UnloadAsync();
        }
    }
}

四、测试

在MainPage中设置了一个ListView,ViewCell模板中设置了一个Label,Text值绑定了CountDownTitle。在MainPage的构造方法中设置listview的ItemsSource。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimeCountDown"
             x:Class="TimeCountDown.MainPage">
    <StackLayout>
        <ListView x:Name="listView"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text=" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>
        public MainPage()
        {
            InitializeComponent();
            List<CountDownViewModel> countDownVMs = new List<CountDownViewModel>() {
                ),
                ),
                ),
                ),
            };
            listView.ItemsSource = countDownVMs;
        }

效果图如下:

xamarin.forms之实现ListView列表倒计时的更多相关文章

  1. Xamarin.Forms中的ListView的ItemTrapped事件与ItemSelected事件的区别

    今天对Xamarin.Forms中的ListView的两个事件(ItemTrapped和ItemSelected)做了小小的研究,发现有以下几点区别: 1.ItemTrapped事件会优先被触发. 2 ...

  2. A Xamarin.Forms Infinite Scrolling ListView

    from:http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/ The last few months ha ...

  3. Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl(横向列表)

    在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在Xaml ...

  4. Xamarin.Forms: 无限滚动的ListView(懒加载方式)

    说明 在本博客中,学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView.这个无限滚动函数在默认的Xamarin.Forms不存在,因此我们需要为此添加插件.在这里我 ...

  5. Xamarin.Forms 简介

    An Introduction to Xamarin.Forms 来源:http://developer.xamarin.com/guides/cross-platform/xamarin-forms ...

  6. 老司机学新平台 - Xamarin Forms开发框架之MvvmCross插件精选

    在前两篇老司机学Xamarin系列中,简单介绍了Xamarin开发环境的搭建以及Prism和MvvmCross这两个开发框架.不同的框架,往往不仅仅使用不同的架构风格,同时社区活跃度不同,各种功能模块 ...

  7. Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面

    Xamarin.Forms 是一个跨平台的.基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面.Xamarin.Forms 通过 ...

  8. 张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

    所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色 ...

  9. xamarin.forms之page

    最近在使用xamarin.forms做APP开发,之前做过ios的应用,虽然没做过安卓,但之前也有一点了解,什么四大组件五大布局啥的,微软的xamarin.forms的文档也挺详细的,基本都是复制粘贴 ...

随机推荐

  1. 【尺取法】Jurisdiction Disenchantment

    [尺取法]Jurisdiction Disenchantment PROBLEM 时间限制: 1 Sec 内存限制: 128 MB 题目描述 The Super League of Paragons ...

  2. 【高并发架构】Redis缓存高并发之-主从架构

    Redis主从架构 到目前为止,Redis Cluster 能实现很好的性能,但如果只是缓存几个G的数据,那么单机Redis就足够了,但缓存主要用来读的,单机的QPS有一定的极限,一两万QPS一台应该 ...

  3. 过滤html标签

    public static String delHTMLTag(String htmlStr){ String regEx_script="<script[^>]*?>[\ ...

  4. Python练手例子(9)

    49.使用lambda来创建匿名函数. #python3.7 MAXIMUM = lambda x,y : (x > y) * x + (x < y) * y MINIMUM = lamb ...

  5. ABP入门系列(2)——领域层创建实体

    ABP入门系列目录--学习Abp框架之实操演练 这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者 ...

  6. Java并发编程基础之volatile

    首先简单介绍一下volatile的应用,volatile作为Java多线程中轻量级的同步措施,保证了多线程环境中“共享变量”的可见性.这里的可见性简单而言可以理解为当一个线程修改了一个共享变量的时候, ...

  7. [Swift]LeetCode289. 生命游戏 | Game of Life

    According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...

  8. [Swift]LeetCode792. 匹配子序列的单词数 | Number of Matching Subsequences

    Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...

  9. [Swift]LeetCode1025. 除数博弈 | Divisor Game

    Alice and Bob take turns playing a game, with Alice starting first. Initially, there is a number N o ...

  10. linux字符测试以及for循环

    1.字符测试 常用的测试字符的命令: == .=都表示测试字符相等,格式为[ A = B ]需要注意的是变量与等号之间需要有空格,不然测试的结果不正确示例如下 若字符与等号不加空格,假设变量A=ab  ...