在 ILRuntime 的基础上，搭建一个简单的UI系统（三） 层级关系

前面大致讲解了下UIPanel和UIView的创建和使用，这篇我们主要来讲解下UIPanel之间的层级关系。

基本上我们一个完整的界面是一个UIPanel对象，正常来说，显示一个新的UIPanel都会覆盖在前一个之上。但是有些特殊的UI我们需要特殊的处理，例如几乎每个界面都会有的货币栏UI，你可以在每个UIPanel都添加，也可以单独做成一个UIPanel，但是要始终保持在别的UIPanel之上。再比如提示框或者其他弹出框类型的UI，他们又会在普通UI和货币栏UI之上。甚至有的可能会有一些系统公告的走马灯显示在所有UI的上层。

在Demo中，我们就简单的将其分为三个层次：

Default：存放普通的UIPanel，显示最新加载的UIPanel

Banner：存放UI顶部的货币栏个人信息等，始终显示在Default之上

Popup：存放一些弹窗UI，例如对话框，菊花框等等

 

搞清楚要实现什么后，接下来我们来看看如何实现我们想要的效果。首先UGUI的Canvas上有一个Order in Layer属性，可以用来控制每个Canvas的渲染顺序，值越大的渲染的越晚，也就是显示在越前面。

正好我们可以利用这个特性，来处理我们上面的三个层次，每个层次一个Canvas，分别为DefaultCanvas = 0，BannerCanvas = 1，PopupCanvas = 2。（注，除了Order in Layer属性外，三个Canvas的其他属性要相同）

然后在每个Canvas中，我们如果来保证新显示的UI显示在最上方呢，我们都知道UGUI的显示顺序是Hierarchy面板中的排列顺序，排在后面的显示在排在前面的之上。在我们之前的UIPanel设计中，由于关闭的页面不销毁只是隐藏，再次显示的时候只是SetActive(true)因此就会有一个问题。加入我们先显示MallPanel，然后关闭之后去显示MessagePanel，此时的排序MessagePanel在MallPanel下面。若我们有个需求是MessagePanel上加个按钮跳转到MallPanel，那么按照之前的逻辑，仅仅将MallPanel.SetActive(true)，不去改变前后顺序，我们依旧无法看见它。因此我们需要加最新Show的UIPanel，放到Canvas中的最下面。