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

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

关于中继器的教程又来了,今天分享的是通过中继器实现添加标签的交互效果,我们都知道,Axure软件的交互功能是非常丰富的,而中继器也是一个比较复杂,不,是Axure中最复杂的一个元件了,所以,今天的文章一定要仔细阅读。

具体描述:

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

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

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

实现步骤:

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

Axure中继器

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

Axure填充

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

Axure文字居中对齐

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

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

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

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

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

Axure每项加载时

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

Axure鼠标单击时

具体动作设置如下图:

Axure删除行

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

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

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

Axure管理动态面板

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

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

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

Axure标签内容

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

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

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

Axure隐藏边框

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

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

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

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

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

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

Axure更新行

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

Axure局部变量

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

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

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

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

Axure添加行

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

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

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

Axure添加条件

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

Axure交互

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

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

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

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

Axure添加条件

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

Axure设置面板状态

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

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

我们需要在新的用例上点击鼠标右键,在菜单中选择【切换为

Axure切换

 

通过以上的步骤,我们就完成了这个案例的制作。

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

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

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

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

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

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

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

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

3、输入后按回车键添加标签:在文本框“TagInput”的【按键按下时】添加条件判断,判断【按下的键】等于键值

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

以上内容就是Axure使用中继器实现添加标签的交互的教程 ,更多教程,点击文章:Axure实现复选框选中时文字添加到文本框

在线客服
客服邮箱
客服电话
17051276424