Human Interface Guidelines —— Pickers

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Pickers

Human Interface Guidelines链接:Picker

Picker

Picker包含一个或多个可滚动的不同值的列表,每个列表都有一个选定的值——显示在view中心的较暗的文本中。 当用户编辑字段或点击菜单时,picker 通常会在屏幕底部或 popover 中显示。 选取器也可以在文中显示,例如在日历事件中编辑日期。 选取器的高度大致是五行lists值的高度。 Picker的宽度取决于设备和环境,可以是屏幕的宽度或 enclosing view。

使用时注意

·使用可预测的和逻辑上有序的值

当可滚动列表停止滚动时,picker中的许多值会被隐藏。 人们最好能够预测这些值是什么,例如一个按字母顺序排列的国家名称列表,以便他们能够快速浏览列表。

·避免切换屏幕以显示Picker

在上下文中,出现在正在编辑的字段下方或靠近正在编辑的字段显示时,picker效果最好。

·对于大量值的列表,请使用 table 而不是 picker

 长列表可能因为太长而无法在 picker 中导航。 Table的高度可调,并且可以包含一个index,这可以使滚动速度更快。


Date Pickers

Date Picker

Date Picker 用于选择特定日期,时间或两者均有的高效页面。 它还提供了一个显示倒数计时器的界面。

Date Picker 有四种模式,每种模式都有一组不同的可选值。

·日期。 显示年、月、日;

·时间。 显示AM/PM(可选)小时、分钟;

·日期和时间。 显示日期,小时,分钟和AM / PM(可选);

·倒计时器。 显示小时和分钟,最长23小时59分钟;

Date Picker 中显示的确切值及其顺序取决于用户的区域设置。

考虑在指定分钟时提供较小的粒度。 默认情况下,分钟列表包含60个值(0到59)。 只要能平均分配到60分钟,可以选择增加分钟的时间间隔。例如,您可能需要每小时四分之一的时间间隔(0,15,30和45)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xx_Cc的学习总结专栏

iOS-世界那么大,CoreLocation带你去看看

2879
来自专栏JackieZheng

可视化工具solo show-----Processing Prefuse show

  继上篇《可视化工具solo show》罗列出一些主要基于Java开发的软件、插件之后,又仔细揣摩了下哪些可以为我所用。   一番端详之后,准备挑出其中Pro...

1966
来自专栏技术总结

Photos存储、获取、更改照片详解

2379
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第三篇

接着上节的继续学习, 一 重构:模块game_functions 在大型项目中,经常需要在添加新代码前重构既有代码。重构旨在简化既有代码的结构,使其更容易扩展。...

2799
来自专栏微信公众号:Java团长

你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊。深深的爱上了它,强大到无所不能;

1533
来自专栏向治洪

Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果

某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下如何实现.  废话不多说,接下来我会讲述如何实现这种效...

2586
来自专栏葡萄城控件技术团队

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线...

1.3K6
来自专栏QQ音乐技术团队的专栏

web实时长图实践

本文将介绍几种浏览器端和服务器端 web 实时生成图片的方案,欲知详情请看文章详情。

1.2K8
来自专栏韩东吉的Unity杂货铺

零基础入门 20: UGUI DropDown

(题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而...

1884
来自专栏Golang语言社区

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在...

4739

扫码关注云+社区