Laya的屏幕适配,UI组件适配
参考:
版本2.1.1.1
目录
一 适配模式
二 UI组件适配
一 适配模式
基本和白鹭的适配模式一样。
Laya官方也推荐了竖屏使用fiexedwidth,横屏使用fixedheight。这也是我自己常用的适配模式。

修改适配模式在项目GameConfig.ts下

二 UI组件适配
Laya的页面上UI如何适配,比如游戏中的图标。需要在不同手机上恒定右上显示,或者右下显示。

在白鹭中组件的面板有个快捷约束,可以设置UI组件的适配。比如下图中,这个Group组件始终居中显示。

Laya中貌似只能设置属性面板中的top,buttom,left,right属性来适配。
首先设置页面容器的top=0,buttom=0,left=0,right=0.表示顶层容器跟随舞台大小变化。(页面要选择View,因为Scene是不支持适配的)

我界面上分别在左上,左下,右上,右下,中间放了5个按钮,用于适配调试用。现在设置左下的按钮始终居于左下。
选择按钮,然后设置按钮属性面板的left,right,top等。
设置左下按钮left=0,buttom=0。表示按钮始终离左边0像素,离下面0像素。
设置右下按钮right=0,buttom=0。其他按钮如法炮制。

实际效果

Laya的屏幕适配,UI组件适配的更多相关文章
- Android手机适配——UI图片适配
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...
- vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
- Android实战开发租赁管理软件(适配UI,数据的存储,多线程下载)课程分享
亲爱的网友,我这里有套课程想和大家分享,假设对这个课程有兴趣的,能够加我的QQ2059055336和我联系. 课程内容简单介绍 我们软件是基于移动设备的.所以我们必定的选择了安卓作为我们的开发工具.课 ...
- iOS 关于字体根据不同屏幕尺寸等比适配的问题(zz)
http://www.jianshu.com/p/5815e81abb52 背景 去年的六月份开始了一个新的项目,此项目支持的设备从4S开始一直到6+,也就是说屏幕的尺寸最小的320x480 最大的1 ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- Amaze UI 云适配
Amaze UI 云适配 陈本峰 一中,中科大 香港科大
- Android 屏幕适配之dimens适配
Android 屏幕适配之dimens适配 转 https://blog.csdn.net/github_2011/article/details/72636851 在过去多个项目中一直使用 ...
- vue+lib-flexible实现大小屏幕,超大屏幕的适配展示。
p.p1 { margin: 0; font: 12px "PingFang SC" } span.s1 { font: 12px "Helvetica Neue&quo ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
随机推荐
- 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别
第一部分: 浏览器缓存如何控制? 做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明:浏览器向服务器请求资源m.pn ...
- 五.Protobuf3 枚举
Protobuf3 枚举 定义消息类型时,您可能希望它的一个字段有一个预定义的值列表.例如,假设您希望为每个SearchRequest添加一个corpus字段,其中语料库可以是UNIVERSAL.WE ...
- WSGI原理
web_server: import socket import time import multiprocessing import re import mini_frame class WSGIS ...
- Vue 实例成员
Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架:Angular React Vue Vue结合了其他框架优点.轻量级. ...
- springboot开发人员工具(自动重启及相关的配置)
导入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> ...
- MySQL 是怎么保证数据一致性的(转载)
在<写数据库同时发mq消息事务一致性的一种解决方案>一文的方案中把分布式事务巧妙转成了数据库事务.我们都知道关系型数据库事务能保证数据一致性,那数据库到底是怎么设计事务这一特性的呢? 一. ...
- web实现大文件上传分片上传断点续传
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- webuploader+asp.net如何实现分片+断点续传
文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...
- 目录——创建、切换、pwd、删除、复制、剪切
1.创建目录: (1)在已经存在的目录下新建一个目录: 可以看出在创建1997目录后,在tmp中能够顺利找到. (2)在一个不存在的目录下新建一个目录: 直接在tmp目录下新建一个a目录,再在a目录下 ...
- ES特点
ES Hadoop spark的区别存(可扩展) hdfs存(可扩展) 不存 ...