使用中继器实现添加标签的交互

AxureRP8.0教程 小楼一夜听春语 3230℃ 0评论

这篇教程我们通过中继器实现添加标签的交互效果。

阅读这篇文章之前,请先阅读《中继器结构与原理详解》

先来看看最终要实现的效果。

上面这张图,不足以表达要实现的所有交互。

我来具体描述一下:

1、最后的矩形是一个输入框,当内容输入完毕,光标离开这个输入框的时候,自动出现新的标签;

2、在添加标签时,白色的矩形输入框始终在最后的位置;

3、每个标签上都有删除按钮,点击时删除当前的标签。

接下来,我们来看详细的令人发指的实现步骤。

1、先放入一个中继器,做一下样式的设置,布局设置为【水平】,并且为每个标签之间设置列的【间距】。如果允许输入的标签很多的话,还可以通过【网格排布】来设置每排项的数量,让标签每到达一定数量折行显示。

2、双击中继器元件,进入中继器的内容编辑区。为中继器中自带的矩形设置样式,将填充颜色设置为黑色,文字颜色设置成白色;同时,设置元件的文字左对齐;并且为元件添加左侧文字与边界间的填充。

3、在编辑区中再放入一个文本标签元件,然后输入一个乘号(×),将文字的字号设置为28号字,字体颜色设置成白色,并将元件的文字进行水平与垂直方向的居中对齐。

4、上面的两步,我们完成了模板内容的制作。接下来,我们进行数据集的内容编辑。

首先,修改数据集的列名为“TagText”,这个名称建议和模板中黑色矩形的名称保持一致。

然后,因为标签列表默认情况下只有一个输入框,所以删除数据集中原有的数据,保留一个空行。

完成上面的操作之后,因为我们在模板中使用的矩形是中继器自带的,所以在交互设置中默认的交互依然有效。

并且,因为我们为矩形添加了名称以及为数据集编辑了列名,大家能够在默认的交互中看到这些名称。

5、我们进行点击删除按钮时删除标签的交互设置。这个设置很简单,只需要在删除按钮【鼠标单击时】添加【删除行】的动作设置,删除当前行。

具体动作设置如下图:

6、把编辑区中的内容全选,然后在内容上点击鼠标右键,选择【转换为动态面板】的选项。然后双击动态面板,为其命名为“TagPanel”,并且新增一个状态,将之前的状态名称修改为“Show”,新增的状态名称修改为“Input”。

为什么要进行这一步操作呢?因为在中继器中不但能够显示标签,还要能够输入标签,这是两部分不同的内容。

所以,我们通过动态面板的两个状态,分别存放显示标签和输入标签的元件内容。在之后的操作中,我们进一步实现只有中继器最后一个列表项显示状态“Input”,也就是输入标签的元件内容。

7、双击上图中的状态“Input”,打开这个状态的编辑区。

在这个状态中,我们放入一个矩形作为边框,注意这个矩形要与状态“Show”中的矩形尺寸保持一致。

然后,我们继续放入一个文本框元件,将其命名为“TagInput”,用于输入标签内容。

8、在上图中,大家能够看到,文本框还有自己的边框,这样影响美观。

所以,我们在元件的属性中勾选【隐藏边框】的选项。

这样设置之后,看上去就是一个矩形的输入框。

9、当我们输入标签,光标离开文本框的时候,要让中继器保存标签的内容,并且新增一项。

这里大家注意,在我们输入完标签之后,实际上是对当前列表项的内容进行了更新,并且添加了一个新的列表项。

在数据集中的表现就是,将标签内容保存到了当前行,并且添加了一个新行。

所以,我们为文本框添加【失去焦点时】【更新行】的动作,为中继器“TagList”更新当前行“Tagtext”列的列值。

这个列值的内容,我们需要获取到文本框中输入的内容。

我们点击“fx”按钮,进入编辑值的界面进行获取。

编辑值的界面打开之后,我们添加一个局部变量“tag”,把文本框“TagInput”的元件文字保存到这个局部变量中,并且添加到值的编辑区。

完成上面的操作之后,我们点击确定按钮,保存设置,并且回到添加动作的界面中。

10、继续在用例编辑的界面中添加【添加行】的动作,

添加的行对应的是中继器最后一项,这一项显示标签的输入框,无需显示标签内容。

所以,在添加行的动作中,新增行的列值内容我们可以任意输入,但不能为空。

11、如果需要限制标签的添加数量,在这一步我们也可以添加条件进行限制。

例如,只允许输入4个标签(实际为5个列表项,包含输入标签的列表项),我们就可以添加条件:【值】“[[Item.Repeater.itemCount]]”【<】【值】“5”。

“[[Item.Repeater.itemCount]]”能够获取当前项所在中继器的列表项数量。

完成上述的操作之后,文本框“TagInput”的交互设置如下:

12、当列表项为最后一项时,要显示标签输入框。

我们需要先判断列表项是否最后一项。

在中继器的交互中,我们为【每项加载时】的交互再添加一个用例,设置条件:【值】“[[Item.isLast]]”【==】【值】“true”。

“[[Item.isLast]]”能够获取真值(true)或者假值(false),如果当前加载的项是最后一项,则获取到真值,否则获取到假值。

当获取到真值的时候,我们就可以通过动作【设置动态面板状态】,将动态面板“TagPanel”的状态切换到“Input”,从而将输入框显示出来。

不过,大家要注意,当我们完成上面的操作之后,中继器加载时最后一项并没有切换到输入框。

这是因为,当我们添加新的用例时,软件会自动让新的用例和前一个用例形成条件的关联。

我们需要在新的用例上点击鼠标右键,在菜单中选择【切换为<If>或<Else If>】的选项,来取消这个关联。

 

通过以上的步骤,我们就完成了这个案例的制作。惊不惊喜?开不开心?

不过,这个案例还存在一些不足之处,例如:

1、输入标签内容不能为空值;

2、输入标签的长度限制;

3、输入标签后按回车键添加标签;

4、标签达到数量后隐藏输入框。

这里我简单说一下这些不足的解决方案,大家可以自己去尝试解决:

1、不能添加空标签:在文本框“TagInput”的用例上添加条件,判断该文本框的元件文字不等于空。

2、字符限制:在文本框“TagInput”的属性中设置【最大长度】。

3、输入后按回车键添加标签:在文本框“TagInput”的【按键按下时】添加条件判断,判断【按下的键】等于键值<Enter>,设置的动作与【失去焦点时】相同。或者,设置动作【触发事件】,目标元件选择文本框“TagInput”,事件列表中勾选【失去焦点时】,这种方法也能够实现。

4、标签达到数量后隐藏输入框:在中继器的每项加载时继续添加用例,判断如果是最后一项并且中继器列表项的数量等于5,添加动作【隐藏】动态面板“TagPanel”。

源文件下载:http://downloads.iaxure.com/add_tags.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 使用中继器实现添加标签的交互

喜欢 (16)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 牛批
    liangllk2017-07-12 12:15 回复
  2. “标签达到数量后隐藏输入框”这个功能还是完成不了,中继器列表项的数量这个条件应该在哪里设置啊
    摇阿遥2017-07-21 11:02 回复
  3. 讲解的顺序有问题,从第一步做到最后会出错,在input那一步会找不到 this
    EHOOOOOOO2017-07-21 17:15 回复
    • 小楼一夜听春语
      下载源文件 对比一下 看看哪有问题
      小楼一夜听春语2017-07-22 23:53 回复
  4. 全部实现了,但是对那些函数一窍不通,只能依葫芦画瓢,要想自己做个什么东东出来还是很难 ➡
    djiprvtd2017-07-26 16:29 回复
  5. 这里标签长宽都是固定的,请问可不可以实现出标签长度不等的样式呢?
    hym2017-07-30 16:18 回复
    • 小楼一夜听春语
      每项加载时设置元件尺寸为标签字符数量乘以字体尺寸
      小楼一夜听春语2017-07-30 19:46 回复