3.Layer容器

老赵发表于:2015年01月03日 20:44:28更新于:2018年12月10日 15:23:57

无广告视频教程

layer容器&layer幻灯

简介:用于盛放一个或多个内容的容器组件,这个容器内可以放置文字、图片、图形等。但不建议放置音频、视频,因为不利于加载跟控制。

Layer页面内的元素可以互相触发控制,也可以控制Masterpage(后面简称M页)和Background(后面简称B页) 的元素,但本身和页面的逻辑割裂,页面、M页、B页的元素不能控制layer页内的元素。

Layer可以拿来做部分区域的长页面滑动浏览,也可以用来模拟目录、模拟聊天界面、模拟镜头移动等。

blob.png  blob.png

1.Layer容器的内容必须在layer页面添加,每个Layer页面可各自定义尺寸。

blob.pngblob.png

传送门


注意事项:

GIF较大,建议对图片右键单击,在新标签页中打开图片查看(这是竖长图的Layer)

00156790283e05d51fb0bb69609e518


视频教程链接

(一)Layer内容

简述:Layer内容=Layer元素+Layer画布(下图↓)

image.png

Layer画布:打开Layer页面,可见的白色底板我们称为Layer画布,画布默认是透明无色的,透明度可调节,画布默认颜色是白色,颜色可选择。(下图↓)

image.png

Layer元素:放置在Layer画布上的文本,图形,图片等,Layer内的元素可以互相触发控制。

Layer内容:切换到Layer状态下,在Layer画布上放置一个或多个元素,元素跟Layer画布一起称为Layer内容。


(二)Layer相关尺寸:   

image.png

点击编辑器页面左上角的小黑三角,可以实现Masterpage,页面,Layer,Background的切换。

1、Layer元素范围尺寸:切换到Layer状态下,放入一个元素时,该元素的高和宽就是元素范围尺寸;放入多个元素时,多个元素组合的最宽值和最高值为Layer元素范围尺寸。

Layer画布尺寸:切换到Layer状态下,白色底板的高和宽。(下图↓)

image.png

2、把layer容器放置在页面中,layer容器可以显示多少的内容取决于layer画布;理解好两个尺寸可以帮助我们通过调整任意一种尺寸来修改细节。如:滑动 layer时,在元素跟layer画布尺寸一致的情况下,有些用户注意到开始滑动时和滑动到结束时,会有白色画面漏出来,这时只需要把layer画布尺寸调整到比layer内容的尺寸范围小一些就可以了。

3、Layer容器尺寸:切换到page(页面)状态下,选择高级组件添加一个Layer容器组件后,点击下容器,在右侧的面板显示的宽和高就是Layer容器尺寸,可修改尺寸。

image.png

image.png

image.png

     若想实现Layer内容在Layer容器中的滑动,请一定记住一点:Layer内容(Layer元素+Lay 人画布在一起叫做Layer内容)的尺寸一定要大于Layer容器的尺寸,详情请看具体操作。

(三)具体操作:

1、实现Layer内容在Layer容器中的竖直(上下)滑动:把Layer容器调节到高度小于Layer画布高度。

2、实现Layer内容在Layer容器中的横向(左右)滑动:把Layer容器宽度调节到小于Layer内容宽度。

3、实现Layer内容在Layer容器中的上下左右(横向竖向)滑动:把Layer画布宽度跟高度都调节到大于Layer容器宽度跟高度。

注意事项:

  • 调整尺寸时:点一下要调节的目标,在右侧面板找到尺寸项,输入数值修改。

  • Layer的画布尺寸需要调整,一般不能用默认的;起码要比Layer容器的长才可以滑动浏览

  • 如果希望通过手势滑动到底能触发翻页,则Layer容器的宽度必须要与Layer画布宽度相等!

  • 若需要制作滑动横长图,则将上述的文字中的“长”替换成“宽”。

  • 添加Layer到Layer容器后可以双击进行拖动,决定初始显示区域。

  • Layer页面内的元素只能由Layer页内的元素进行触发控制。

  • 如果有多个Layer页面的联动,前面的Layer要比后面的Layer长(或宽)才可以触发滑动到底的翻页。


(四)案例参考

模拟群聊·附案例教程

image.png


(五)常见问题

问题1:竖屏状态下(Layer画布高>宽),可以上下滑,为什么有个别元素的左右部分看不见?

答:Layer容器组件刚添加到page页面时,宽度默认跟Layer画布一样,再加上Layer元素范围尺寸大于Layer画布尺寸,只要把Layer容器宽度调小一些,或者切换到Layer把Layer画布宽度调大一些, Layer画布外的左右元素就可以看见。补充:同理上下元素有些部分看不见的时候,调整layer画布高度就可以了。

问题2:如果我觉得Layer容器在page页面中显示太小了,但是Layer容器尺寸调太大了会造成Layer内容的不滑动等问题,怎么办?

答:那先把Layer画布调大,再去调整Layer容器尺寸。


练习题:

练习如何实现Layer内容在Layer容器内的上下滑动。

练习如何实现Layer内容在Layer容器内的左右滑动。

有几个需要注意的点再提一下:

Layer的画布尺寸需要调整,一般不能用默认的;起码要比Layer容器的长才可以滑动浏览

Layer的画布和Layer容器都是可以调整大小的!

如果希望通过手势滑动到底能触发翻页,则Layer容器的宽度必须要与Layer画布相等!

若需要制作滑动横长图,则将上述的文字中的“长”替换成“宽”。

添加Layer到Layer容器后可以双击进行拖动,决定初始显示区域。


Layer容器支持重力感应。

Layer页面内的元素只能由layer页内的元素进行触发控制。

如果有多个Layer页面的联动,前面的Layer要比后面的Layer长(或宽)才可以触发滑动到底的翻页。

Q&A:

Q:为什么layer放在页面中不能滑动
A:Layer添加在画布后,一般需要调整其尺寸,layer在页面中的尺寸起码要比Layer容器本身短才可以滑动浏

Q:为什么我已经设置了Layer大于Layer容器的尺寸还是无法滑动?

A:请确认是否在添加了页面触发器,如若添加建议删掉试试。

Q:我想让layer在页面中最开始显示的是最下面的画面(即由下往上滑动),该如何调整?
A:在页面中双击layer,然后拖动到合适的位置(图片的最下面)

静态图文教程戳这儿

--------- 不了解设计的程序员不是好客服 ---------------

回复(5)