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:/ ...
随机推荐
- python_并发编程——事件
1.事件 :通过一个信号来控制多个进程同时执行或者阻塞. 一个信号可以使所有的进程都进入阻塞状态,也可以控制所有的进程接触阻塞,一个事件被创建之后,默认是阻塞状态. from multiprocess ...
- 行为型模式(九) 访问者模式(Visitor)
一.动机(Motivate) 在软件构建过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法),如果直接在基类中做这样的更改,将会给子类带来很繁重的变更负担,甚至破坏原有设计.如何在不更 ...
- workerman——报错
stream_socket_server(): unable to connect to tcp://0.0.0.0:8282 (Address already in use) in file [报错 ...
- 动态加载 ShellCode绕过杀软
反病毒解决方案用于检测恶意文件,并且通常使用静态分析技术来区分二进制文件的好坏.如果是恶意文件本身包含恶意内容(ShellCode),那么依靠静态分析技术会非常有效,但如果攻击者使用轻量级的stage ...
- md5关于加密
# 导入hashlib模块 import hashlib # 获取MD5对象 # 不加盐操作 # md5 = hashlib.md5() # 加盐操作 md5 = hashlib.md5('wenwe ...
- js模拟滚动条滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- editplus 支持lua语言语法高亮显示
找到自己的安装目录 建一个这个名字的文件 里面写上 #TITLE=LUA ; LUA syntax file written by ES-Computing. ; This file is requi ...
- npm 安装全局包 不是内部或外部命令的问题
场景: npm已经安装成功 ,通过npm install -g 安装的 全局包 提示不是内部或外部命令 第一步: npm list -g --depth=0:查看npm全局包的路径,和有哪些安装包 ...
- C二维字符数组的使用及如何获取二维数组的总行数和总列数!
#include <stdio.h> #include <stdlib.h> int main(){ char str[][30] = {"zhangsan" ...
- luogu P1160 队列安排
二次联通门 :luogu P1160 队列安排 /* luogu P1160 队列安排 链表 手动模拟一下就好了... */ #include <cstdio> #define Max 5 ...