本文主要包含axure自定义部件库,axure自定义形状,pscad自定义元件,multisim自定义元件,cadworx自定义元件等相关知识, @ Axure原型设计工场 希望在学习及工作中可以帮助到您
阅读本篇之前,如果没有了解上篇,请点击这里查看《自定义微信元件库:Axure基本元件的应用(上)?》。
下篇讲解的是微信以下自定义元件的实现过程:
- 弹出菜单
- 消息列表样式
- 功能菜单
- 文字输入工具栏
- 语音输入工具栏
- 微信导航菜单
弹出菜单
为了更通用,可以使用中继器来实现,菜单数根据中继器的数据多少,自动显示对应的菜单。
- 添加一个中继器,命名menus
- 给中继器menus添加两个属性menu_id和menu_name,三条数据
- 双击中继器menus进入编辑状态,设置矩形框名称为menu_item,修改默认矩形框的样式,大小为300*50,只保留下边框,边框颜色为浅灰色。
- 设置矩形的交互样式的鼠标按下状态时背景为深灰色
- 修改中继器的“每项加载时”事件
- 选中中继器menus,右键转换为动态面板,命名为popup_menu,设置动态面板的“固定到浏览器”属性为水平居中和垂直居中
- 最后,像弹出窗口一样,设置弹出菜单默认为隐藏状态
在使用时,显示此动态面板,并设置为“灯箱效果”即可。
如果想添加多个菜单项,只需要添加中继器的数据,样式不需要修改。
消息列表样式
消息列表里每一项有一个头像,好友名称/群名称/公众号名称等,以及最后一条消息的内容和消息时间。
同样,对于这样的列表类数据,我们建议使用中继器来实现。
- 添加个中继器,命名为msg_list,双击中继器进入编辑状态,选择默认的矩形框,命名为msg_item,调整大小480*80,保留下边框,颜色为浅灰色,设置交互样式里鼠标按下时背景为深灰色
- 添加消息中的几个元件,一个头像和三个文本标签
- 添加一个占位符,大小55*55,放在矩形框左侧作为头像,双击设置文本为“头像”;
- 添加一个文本标签,命名为txtName,文字大小为20,放在头像右侧;
- 添加一个文本标签,命名为txtLastMsg,表示最后一条消息,放在txtName下方,文字大小14,灰色;
- 添加一个文本标签,命名为txtDatetime,表示最后一条消息的发送时间,放在背景框最右侧;
- 准备几条模拟数据,在实际使用时,根据需要多添加些数据
双击标题栏,添加了4列数据如下:
- 修改中继器的“每项加载时”事件,分别设置元件对应的列信息,预览效果如下
功能菜单
同样,功能菜单和上面的消息列表非常的类似,我们也使用中继器来完成。
- 添加一个中继器,命名为menu_list,双击中继器进入编辑状态,选择默认的矩形框,命名为menu_item,调整大小480*56,白色背景,保留下边框,颜色为浅灰色,设置交互样式里鼠标按下时背景为深灰色
- 添加功能菜单中的图标和菜单名
添加一个占位符,大小32*32,放在矩形框左侧作为菜单图标;
添加一个文本标签,命名为txtMenuName,文字大小为18,放在图标右侧;
- 添加中继器数据,实际使用根据需要修改
- 修改中继器menu_list的“每项加载时”事件
文字输入工具栏
在发送消息时,我们可以选择输入文字,或者语音输入,先说一下文字输入工具栏。
- 添加个有边框矩形,大小480*55,背景色取自微信截图,保留上、下边框,边框色为灰色
- 从微信截图中截取语音、表情和加号图标,再复制一份前面设计的文本输入框元件
- 摆放好各个图标位置,调整文本输入框的宽度为300,取消默认的文本输入提示