Axure实现Toast效果——使用动态面板实现自动调整宽度的效果

前言:欢迎关注我左侧头像下的新浪微博,实时更新最新文章信息,增进交流,共同成长。
原文出处:http://blog.csdn.net/u014158743/article/details/52357574

最近学axure的时候, 想做出android中toast的效果, 能根据需要提示的内容长短自动调整提示文本的宽度, 类似android中toast的效果. Label部件能实现文本的宽度自动调整, 但是一有背景色, 背景色的宽度却不会随之改变. 网上也没找到什么好的方法, 后来自己想出了一种比较low的方法, 虽然比较low, 总归是实现了, 如下.

首先, 基本布局
一个用来触发显示toast的按钮, 一个label部件, 黑底白字, 模拟toast效果, 如图
Axure实现Toast效果——使用动态面板实现自动调整宽度的效果_第1张图片

然后右击label部件, 将其转换成动态面板, 并拖长动态面板留出预留空间, 如图
Axure实现Toast效果——使用动态面板实现自动调整宽度的效果_第2张图片

准备完成后我们为按钮添加单击用例, 总体动作如图
Axure实现Toast效果——使用动态面板实现自动调整宽度的效果_第3张图片
仔细留意当前toast宽度, 以便进行设置. 现在宽度为81, 假如现在文本内容从"内容内容内容"–>“内容内容内容内容内容内容”, 可知文本增长一倍, 我们可以设置面板宽度为162, 并在显示前左移40, 显示后再右移40, 这样就达到了想要的效果

最终动作如下图

你可能感兴趣的:(其他,axure)