美文网首页
利用对齐方式进行UI伸缩效果(进阶版)

利用对齐方式进行UI伸缩效果(进阶版)

作者: MeganChou | 来源:发表于2017-02-09 17:25 被阅读49次

一:效果图

点击主按钮1:其下的子列表上移或者下移;

点击主按钮2:其下子列表上移或者下移;

图1

错了。。(能看出哪里不一样吗)。。。。代码没有变化,但是对齐方式有变化,这就是对齐方式问题导致的。。。。至于是谁的对齐方式,当然是子按钮的,因为,mask伸缩,那么panel伸缩,导致子物体伸缩。。。所以子物体如何移动,就是按照对齐方式。

二:实现原理

利用Mask缩小以及自动排列,使用对齐方式进行伸缩;

三:细节;

1:层级结构

描述一下为什么这么分层级?

整体看来,整个UI部分分为两个列表,一个List1,一个List2;

其中List1中包含

图2

下面这张图是我做的修正panel下面只需要摆放属于他的子物体就好了,没必要再嵌套一个,这个是也是按照图示的层级结构来的。

2:①Mask


图3

②List

图4 图5

③Button


图6

④Panel


图7

每个小的列表按钮,纠正一下对齐方式


图8

四:总结

发现写篇文章真不容易,还是不熟练,不那么理解。。。。有时间再修改一下

相关文章

网友评论

      本文标题:利用对齐方式进行UI伸缩效果(进阶版)

      本文链接:https://www.haomeiwen.com/subject/lgxwittx.html