参考:

屏幕适配API概述

版本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组件适配的更多相关文章

  1. Android手机适配——UI图片适配

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...

  2. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

  3. Android实战开发租赁管理软件(适配UI,数据的存储,多线程下载)课程分享

    亲爱的网友,我这里有套课程想和大家分享,假设对这个课程有兴趣的,能够加我的QQ2059055336和我联系. 课程内容简单介绍 我们软件是基于移动设备的.所以我们必定的选择了安卓作为我们的开发工具.课 ...

  4. iOS 关于字体根据不同屏幕尺寸等比适配的问题(zz)

    http://www.jianshu.com/p/5815e81abb52 背景 去年的六月份开始了一个新的项目,此项目支持的设备从4S开始一直到6+,也就是说屏幕的尺寸最小的320x480 最大的1 ...

  5. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  6. Amaze UI 云适配

    Amaze UI  云适配 陈本峰  一中,中科大 香港科大

  7. Android 屏幕适配之dimens适配

    Android 屏幕适配之dimens适配     转  https://blog.csdn.net/github_2011/article/details/72636851 在过去多个项目中一直使用 ...

  8. vue+lib-flexible实现大小屏幕,超大屏幕的适配展示。

    p.p1 { margin: 0; font: 12px "PingFang SC" } span.s1 { font: 12px "Helvetica Neue&quo ...

  9. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

随机推荐

  1. 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别

    第一部分: 浏览器缓存如何控制?   做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明:浏览器向服务器请求资源m.pn ...

  2. 五.Protobuf3 枚举

    Protobuf3 枚举 定义消息类型时,您可能希望它的一个字段有一个预定义的值列表.例如,假设您希望为每个SearchRequest添加一个corpus字段,其中语料库可以是UNIVERSAL.WE ...

  3. WSGI原理

    web_server: import socket import time import multiprocessing import re import mini_frame class WSGIS ...

  4. Vue 实例成员

    Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架:Angular React Vue Vue结合了其他框架优点.轻量级. ...

  5. springboot开发人员工具(自动重启及相关的配置)

    导入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> ...

  6. MySQL 是怎么保证数据一致性的(转载)

    在<写数据库同时发mq消息事务一致性的一种解决方案>一文的方案中把分布式事务巧妙转成了数据库事务.我们都知道关系型数据库事务能保证数据一致性,那数据库到底是怎么设计事务这一特性的呢? 一. ...

  7. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  8. webuploader+asp.net如何实现分片+断点续传

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  9. 目录——创建、切换、pwd、删除、复制、剪切

    1.创建目录: (1)在已经存在的目录下新建一个目录: 可以看出在创建1997目录后,在tmp中能够顺利找到. (2)在一个不存在的目录下新建一个目录: 直接在tmp目录下新建一个a目录,再在a目录下 ...

  10. ES特点

    ES                     Hadoop                       spark的区别存(可扩展)         hdfs存(可扩展)             不存 ...