侧面多级菜单(一个大类、一个小类、小类下多个物体)

效果:

说明:

  1. 左右侧面板使用Animator组件控制滑入滑出。
  2. 左侧面板中,左的左里面是大类,左的右有绿色的小类,绿色的小类下有多个真正的UI图片按钮。

要点:

  • 结合了一点EasyGridBuilderPro插件的UI元素:点击图片按钮的弹性效果和Tooltip。不要可以删掉。
  • 主要使用UGUI的scroll view、Vertical Layout Group、Content Size Flitter、Grid Layout Group三个组件实现。Layout组件有多层级嵌套。
  • 箭头的旋转动画用Dotween。
  • 单个折叠容器:Vertical Layout Group控制绿色标题和蓝色面板的垂直叠放。其中蓝色面板中嵌套Grid Layout Group控制UI按钮的排列。侧面多级菜单(一个大类、一个小类、小类下多个物体)_第1张图片
  • 侧面多级菜单(一个大类、一个小类、小类下多个物体)_第2张图片
  • 折叠容器的外一层需要一个面板,用来容纳多个折叠容器,用Vertical Layout Group和Content Size Flitter控制自适应堆叠。侧面多级菜单(一个大类、一个小类、小类下多个物体)_第3张图片
  • 用了三层的layout组件,其中需要主意勾选height,不然无法适应高度 。

 DEMO工程见资源下载。

下载链接

你可能感兴趣的:(unity)