在手风琴控件中,每个标题被点击时都有一段内容可以展开,来显示更多信息。有些设计可以在打开手风琴控件的一部分的同时关闭其他部分。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在练习文件中,打开“手风琴控件”页面。

在画布上有三组组合好的元件,每组都有一个“标题”元件和四个“主体”元件,“主体”元件开始的时候会隐藏起来,然后通过点击“标题”元件将它们显示出来。

点击“手风琴1”组合将其选中,然后再次点击来编辑组合。

选中全部四个“主题1项目”元件,右键点击所选内容,然后在右键菜单中选择“转换为动态面板”,命名新的动态面板为“主体1”,然后勾选样式页签下的“隐藏”复选框将其隐藏。

对“主体2项目”和“主体3项目”重复以上步骤,并将新的动态面板分别命名为“主体1”和“主体2”。

将三个“手风琴”组合对齐,使“标题1”紧贴在“标题2”下面,“标题3”紧贴在“标题2”下面。

STEP2:手风琴交互

慢慢的双击“手风琴1”来编辑组合,然后选中“标题1”,在属性页签下,双击“鼠标单击时”来创建一个新的鼠标单击时用例。

在左侧“添加动作”栏,点击“切换可见性”动作。

在右侧“配置动作”栏,选择“主体1”动态面板。

在右侧“配置动作”栏的底部,确保可见性的选择为“切换”,然后点击“推动/拉动元件”的复选框,并且选择方向为“下方”。

点击“确定”按钮关闭用例编辑器。

重复以上步骤,使“标题2”切换动态面板“主体2”的可见性,使“标题3”切换动态面板“主体3”的可见性,之后你可以预览一下页面,来确保你的按钮可以像预期的一样能够展开和折叠对应的部分。

STEP3:当一部分展开时折叠其他部分

选择“标题1”,双击“Case1”打开进行编辑。

在左侧“添加动作”列,点击“隐藏”。

在右侧“配置动作”列,选择动态面板“主体2”。

点击“拉动元件”的复选框,确保方向选择为“下方”。

下一步,在右侧“配置动作”列,选择动态面板“主体3”。

点击“拉动元件”的复选框,确保方向选择为“下方”。

点击“确定”按钮关闭用例编辑器。

对“标题2”和“标题3”重复以上步骤,这样在每种情况下,都可以隐藏另外两个动态面板主体。

STEP4:预览

点击预览。

尝试打开和关闭不同的手风琴部分,注意如何展开一个项目并且折叠其他项目。

手风琴控件android,手风琴控件 | Accordion Control相关推荐

  1. android toolbar控件,Android Toolbar控件

    1. Toolbar类 Toolbar是替代ActionBar的产物,低版本可以使用v7兼容包,使用Theme.AppCompat主题,并添加配置. false true 2. Toolbar配置 主 ...

  2. xamarin.android 控件,Android 库控件 - Xamarin | Microsoft Docs

    Xamarin Android 库控件Xamarin.Android Gallery control 03/15/2018 本文内容 Gallery是一种布局小组件,用于显示水平滚动列表中的项,并将当 ...

  3. android 横向滚轮控件,Android滚轮控件,基于ListView实现,可以自定义样式。

    Android滚轮控件,基于ListView实现,可以自定义样式. Features 支持自定义滚轮样式 支持common和holo两种皮肤 支持文本和图文混排两中数据模版 支持循环显示数据 支持选中 ...

  4. android中翻页控件,Android GridView控件分页自定义

    上一篇:Android GridView控件自定义中,我们自定义了Android GridView控件. 包名解释: com.yaomei.activity.adapter   DEMO使用到的自定义 ...

  5. android好用的曲线图控件,Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)...

    发现最新的MPAndroidChart和以前版本的使用有一些差距,就写下了现在新版的使用方法 相关文章: Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3. ...

  6. android横向列表控件,Android逆天控件:CircleListView(圆弧形列表)

    背景 近日设计师小姐姐创作能力爆棚,设计了一个狂拽酷炫的效果:星球环绕列表.如下图: image 在拿着板砖去沟通,且看到对方40米长的大刀后,愉快地确认出页面的如下特性: 需要实现一个可围绕圆弧(图 ...

  7. android的三个基础控件,Android基础控件——ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条...

    xml文件: android:centerColor="#00ff00" android:endColor="#0000ff" android:startCol ...

  8. Android Clock控件

    1. AnalogClock模拟时钟 属性配置 dial,表盘背景 hand_hour,时针图片 hand_minute,秒针图片 配置文件 <AnalogClockandroid:layout ...

  9. Android SeekBar控件

    1. SeekBar类 SeekBar类是滑动条,用于进度控制.主要属性 max,指定滑动条的最大值 progress,指定滑动条的当前值 通过setOnSeekBarChangeListener(O ...

最新文章

  1. jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]
  2. iOS开发之--打印一堆奇怪东西的解决方案
  3. Python---编写一函数 Fabonacci(n),其中参数 n 代表第 n 次的迭代。
  4. 机器学习中导数最优化方法(基础篇)
  5. Oracle 把触发器说透
  6. Flex的动画效果与变换(1)
  7. php设置http请求头信息和响应头信息
  8. Crnn中文end-to-end识别
  9. Mac 下 CocoaPods软件⁩汉化
  10. 华为VRRP-基于交换机的VRRP配置
  11. DedeCMS总是提示验证码不正确的解决方法
  12. c 语言 todo 用法,Tip:iOS开发中关于TODO的用法
  13. 最新苹果审核被拒4.3解决方案总结(2020年7月)
  14. 电阻率的单位是什么?电阻率与电阻阻值大小的有何关系
  15. windows添加右键打开cmd命令窗口
  16. excel学习07(笔记自用)
  17. 在IntelliJ IDEA中,开发一个摸鱼看书插件
  18. JAR 文件格式的强大功能
  19. Python 批量翻译图片 附详细代码
  20. 【2020模拟赛day6】A. 数字计数

热门文章

  1. AS3多线程快速入门(三):NAPE物理引擎+Starling
  2. 【SpringBoot】十八、拦截器 interceptor
  3. 2013-9-25 人物动作形态
  4. 学习笔记10----学成在线案例
  5. 万国觉醒服务器维护,《万国觉醒》怎么换服 更换服务器方法攻略
  6. 一文彻底学会CSS-3
  7. linux 三个特权位
  8. 【测试】功能测试用例设计方法总结
  9. python之if语句not in与in
  10. UIKit Dynamics入门