引言

  上一节中我们了解了IOS小组件的刷新机制,发现根本没法实现按秒刷新,但是看别的App里面有做到,以为用了什么黑科技,原来是因为系统提供了一个额外的机制实现时间的动态更新,不用走小组件的刷新机制。

Text控件支持显示日期时间,下面是来自官网的代码

计算时间差

let components = DateComponents(minute: 11, second: 14)
let futureDate = Calendar.current.date(byAdding: components, to: Date())! Text(futureDate, style: .relative)
// Displays:
// 11 min, 14 sec Text(futureDate, style: .offset)
// Displays:
// -11 minutes

  使用relative样式可以显示当前日期和时间与指定日期之间的差值(绝对值),而不管该日期是将来的还是过去的日期。使用offset样式显示当前日期和时间与指定日期之间的时差,表示将来的日期带有减号(-)前缀,而过去的日期带有加号(+)前缀。

倒计时和计时器

let components = DateComponents(minute: 15)
let futureDate = Calendar.current.date(byAdding: components, to: Date())! Text(futureDate, style: .timer)
// Displays:
// 15:00

  对于将来的日期,timer样式将递减计数(倒计时),直到当前时间达到指定的日期和时间为止,并在日期经过时递增计数(计时器)。

显示绝对日期或时间

// Absolute Date or Time
let components = DateComponents(year: 2020, month: 4, day: 1, hour: 9, minute: 41)
let aprilFirstDate = Calendar.current(components)! Text(aprilFirstDate, style: .date)
Text("Date: \(aprilFirstDate, style: .date)")
Text("Time: \(aprilFirstDate, style: .time)") // Displays:
// April 1, 2020
// Date: April 1, 2020
// Time: 9:41AM

显示两个日期之间的时间间隔

let startComponents = DateComponents(hour: 9, minute: 30)
let startDate = Calendar.current.date(from: startComponents)! let endComponents = DateComponents(hour: 14, minute: 45)
let endDate = Calendar.current.date(from: endComponents)! Text(startDate ... endDate)
Text("The meeting will take place: \(startDate ... endDate)") // Displays:
// 9:30AM-2:45PM
// The meeting will take place: 9:30AM-2:45PM

实现一天时间的计时器

  使用 style: .time样式,如果当前的时间比指定的时间大,则时间就会累计。基于这个原理,我们只需要把时间起点定在每天的0点即可,根据当前的时间计算出今天的开始时间。以下方法可以根据12,24小时制度,获取当天起点时间。

 //获取当天开始的日期,给Date增加一个拓展方法
extension Date {
func getCurrentDayStart(_ isDayOf24Hours: Bool)-> Date {
    let calendar:Calendar = Calendar.current;
    let year = calendar.component(.year, from: self);
    let month = calendar.component(.month, from: self);
    let day = calendar.component(.day, from: self);     let components = DateComponents(year: year, month: month, day: day, hour: 0, minute: 0, second: 0)
    return Calendar.current.date(from: components)!
}
}
// 实现一天内的计时器
Text(Date().getCurrentDayStart(true), style: .timer)

结语

  通过IOS Text控件我们实现了按秒刷新的计时器,所以数字时钟的按秒刷新算是解决了,但是怎么实现表盘时钟的秒针360度旋转呢?如果让秒针精确的对应当前的时间,应该做不到了。后面再继续研究,如果有解决方案的可以贡献一下,感谢。

IOS小组件(6):小组件实现时钟按秒刷新的更多相关文章

  1. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  2. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  3. 第2章 微信小程序的基础组件学习

    小程序也可以用div+css进行排版. flex-direction排列方向,可以控制内部的成员的顺序,比如从左到右.从右到左.上下,纵向和横向. flex-wrap可以控制换行是如何去换行的,控制它 ...

  4. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  5. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  6. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  7. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  8. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  9. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...

随机推荐

  1. PTE 准备之 Describe Image

    25s 准备时间:决定用什么模板,用模板cover那些信息点 Content: 数字和文字哪个多,就多说哪个,均匀覆盖 Fluency : 保持流利度 不要纠结时态,单复数,人称代词等 时间要求: 尽 ...

  2. postman接口自动化测试之添加Tests检查点

    一.概念 Postman的Tests本质上是JavaScript代码,通过我们编写测试代码,每一个Tests返回True,或是False,以判断接口返回的正确性. 其实,每一个Tests实际上就是一个 ...

  3. 利用matplotlib和cmaps根据已有的colormap,重新定义colormap

    算法网上这哥们总结的还可以[1] ,但是使用matplotlib自定义colormap自己掌握的还不够,写在这里 希望达到的目标 使用什么样的颜色,可以自己定义 方便的调用其他人的色标, 使用一部分c ...

  4. 设计Web页面(2)

    1.前面我们新建了一个空白的ASP.NET网页,那么接下来这章我们就讲一下设计Web页面 2.布局页面有两种方法,一种是通过Table表格来布局页面窗体,另一种是通过CSS+DIV来布局窗体,其中作为 ...

  5. Python转义字符中'\'的个数问题

    Python转义字符中''的个数问题 如果字符串里面有很多字符都需要转义,就需要加很多\,为了简化,Python还允许用r' '或者r" "表示''或" "内部 ...

  6. python基础(二):数据类型

    数据类型 学习Python时,一定要注意Python中数据类型和数据结构的学习,这对于你是否能够学好Python其中很重要的作用. 什么是数据类型? 人类有思想,很容易区分汉字和数字的区别,例如,你知 ...

  7. 如何在IDEA中进行时序图分析

    方法一: 使用插件 SequenceDiagram (系统自动生成) 使用方法: 下载插件,我们可以在 Plugins 中找到 选中线程方法名,然后右键就可以创建此方法的时序图了 参数设置 生成效果以 ...

  8. HTML5与CSS3新增特性笔记

    HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 on ...

  9. Day01_10_Scanner 接收用户输入

    Scanner函数 import java.util.Scanner; class ScannerTest { public static void main(String[] args){ Syst ...

  10. 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端

    基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...