在上一篇,我们对中继器初步的介绍,接下来,我们便用它创建更为复杂的列表部件。
列表在众多应用中算是较为重要的一个组成部分,几乎随手打开个移动端的应用,都能够找到它的身影,例如:
列表示意以上的列表,虽然代表不了全部产品的列表类型,但也差不太多。IOS的系统设置这类列表较为典型,也最为基础,列表的子单元包含有图片,文字,以及一些状态提示信息。而百度糯米虽然包含的元素更多,样式更复杂,但仍然是没有脱离IOS系统设置的那种结构。再看看今日头条的样式,虽然较为复杂,穿插了2种不同类型的显示,但也能看到是从IOS系统设置的影子,最后优酷的列表,虽然看起来和之前的3者都有所不同,它顶多算是IOS系统设置类型的变化体,在原型设计上只是比第二种稍稍增加了一些操作,处理方式还是一样的。
下面我就先教大家如何利用中继器实现以上的几种效果。
实例2:IOS系统设置页面的实现
我们打开之前在实例1创建的那个简单列表,选择在它的基础上进行修改。
首先我们先构造自己的基本部件,它看上应该是这个样子的:
部件的构造接下来,我们对这个部件进行一些设置
设置部件部件的命名与样式的基本调整
我们注意到,在IOS的系统设置中,会对不同类型的项目列表通过一个背景为灰的空白行做间隔处理,所以我们需要对列表名称这个矩形部件做一个效果,在该部件上点击右键,选择交互样式设置(Interaction Styles Setting)
对列表矩形添加选择效果然后我们开始设置数据结构,并补填部分数据供展示:
数据的填写对于在数据设置这里,我们怎么导入图片到Image列中,你可以在相应的位置,右键鼠标,就会出现导入图片的项。对于细心的读者可以看到,在数据源中,我们有2行并未添加任何数据,而这两行空白数据只是起间隔作用,所以并不需要有数据的录入。
做完这些,我们开始进行数据和各个部件之间的绑定。
数据和各个部件之间的绑定这里需要特别提出的是,对于部件中的图片与数据源中导入的图片绑定,需要用到动作里面的set image方法。
列表项图标与数据源中的图片的绑定其实,做到这里,基本上就能实现最基本的要求了,大家可以在这里点击预览(或F5)查看,但是还并没有到达我们想要的效果,我们缺失了2个地方的细节处理:1、对于飞行模式来讲,它只有开关项,并没有向右箭头;2、各个项目功能之间的间隔不是很明显,会让设计误认为是空项,所以接下来我们将这两个问题给他解决掉。
首先,我们先处理间隔的问题,在上面,我们曾对列表名称那个矩形做过一个交互样式的设置,现在在这里就会用到。
我们回到中继器的动作设置面板(Repeater Item Interactions),在OnItemLoad下面加一个动作,用数据源中的Name作标识判断,如果Name值为空,则选中列表名称这个矩形部件,并将箭头这个额外的元素隐藏起来,具体如下:
增加显示空白列的动作至此,关于间隔的问题我们有效的处理完成,接下来继续完成飞行模式开关的问题,我们先对之前创建的部件进行完善,补全缺失的关素。改变之后的部件应该是这样子。
中继器组件新增部件然后,我们继续回到中继器的动作设置面板(Repeater Item Interactions),在OnItemLoad下面再增加新的一个动作,仍然用数据源中的Name作判断标识,如果Name的值等于“飞行模式”,则隐藏掉箭头这个部件,同时显示开关这个部件,最终的OnItemLoad下面的动作为:
增加飞行模式的开关按钮这时候,我们遗留的问题已经得到解决,可以点击预览看看自己的成果了。
最终效果有兴趣的朋友可以加我个人微信公众号(微信公众号:产品设计曹蜀黍),一起交流!
微信公众号:产品设计曹蜀黍
网友评论