关于UI适配的文档
第一部分:原理
(1)根据当前屏幕尺寸与开发预设屏幕尺寸尺寸得出以下参数。
1 XRatio:当前屏幕尺寸与开发尺寸的X轴比例
2 YRtaio:当前屏幕尺寸与开发尺寸的Y轴比例
3minRatio: XRatio与YRtaio中的较小值。
(2)之后,在UIManager里创建UI预制体时,根据预制体下添加的UISetReso_Attach脚本。调用SetResolution.Instance.SetAResolution适配。
第二部分:组件适配类型
UI组件需要添加UISetReso_Attach脚本,并设定Resolution_Type。
Resolution_Type有以下几种类型
(1)Normal
适用于图标,按钮等组件。
位置适配:物体的位置分别乘以XRatio,YRtaio
尺寸适配:缩放乘以minRatio,统一缩放
(2)Strech
适用于图标,按钮等组件。
位置适配:位置分别乘以XRatio,YRtaio
尺寸适配:缩放分别乘以XRatio,YRtaio,拉伸
(3)OnlyPosition
适用于空节点
位置适配:位置分别乘以XRatio,YRtaio
(4)UIScrollView_Item
适用于ScrollView的item
(5)UIScrollView_X_BG
适用于Horizontal ScrollView的背景 或者背景框
(6)UIScrollView_Y_BG
适用于VericalScrollView的背景 或者背景框
注意:
只有OnlyPosition不计算缩放,其他都计算缩放。
所以,当GameObject添加类型不是OnlyPosition的UISetReso_Attach后,子节点不能再添加任何UISetReso_Attach。
(因为父节点已有scale计算。所以所有子节点的位置和缩放都会被scale,所以子节点不需要再处理。)
举例:如一个按钮设置为UISetReso_Attach的Normal后,按钮GameObject下的子GameObject文字不需要也不能再添加UISetReso_Attach。
而当GameObject添加类型是OnlyPosition的UISetReso_Attach后,子节点可添加任何类型的UISetReso_Attach。
(因为只有位置计算没有scale计算。所以所有子节点的相对位置和缩放没有影响)
(7)UIPanel有Clipping时:
UIPanel及其以上的父节点位置不为0的,加OnlyPosition的UISetReso_Attach,
缩放在任何UIPanel之下的节点处理即可。
PivotType:
根节点一般分两种,center(0,0) 或者边角如 1280x720的屏幕左上角是(-640,360)。正上为(0,320)等。
Center:根节点为中心点
Corner:根节点为边角
第三部分:使用方法
1.如果整个UI预制体是小窗口
预制体添加UISetReso_Attach并设为Normal
2.整个UI预制体是全屏UI时
(1)背景或者其他需要拉伸的物体:添加UISetReso_Attach并设为Strech。
(2)图标,按钮等组件添加UISetReso_Attach并设为Normal。
(3)小窗口等非全屏可以作为一个整体缩放的部分,在父节点添加UISetReso_Attach并设为Normal。
3.NGUI的滚动列表UIScrollView
(1) 滚动列表的背景或背景框:横轴列表则设置为UIScrollView_X_BG,竖轴列表则设置为UIScrollView_Y_BG。
(2) 滚动列表:
中心点对齐:
父节点:可直接位于预制体下,或者父节点添加UISetReso类型设置为onlyPosition,Center。
UIScrollView:添加UISetReso类型设置为UIScrollView,Center。
中间节点:添加UISetReso类型设置为UIScrollView,Center。
边角对齐:
父节点添加UISetReso类型设置为onlyPosition,Center。
UIScrollView:添加UISetReso类型设置为UIScrollView,Corner。
中间节点:添加UISetReso类型设置为UIScrollView,Corner。
(3)Item
添加UIScrollView并设置为UIScrollView_Item,并在创建并设置完后,调用UIResolution.SetDynamicItem_AfterSet
4.锚点
把锚点设置到目标位置后,添加UISetReso_Attach并设为Normal。锚点下的物体不需要再处理。
5. 动态创建的物体
(1) 动态创建的物体在 非OnlyPosition的UISetReso_Attach之下时:不需要再处理
(2) 其他动态创建的物体:需添加UISetReso_Attach组件设置属性。并
在设置好位置和缩放等后调用
SetResolution.Instance.SetDynamicItem_AfterSet(UISetReso_Attach item)
(3)滚动列表item
在设置好位置和缩放等 并在UIGrid下后,调用
SetResolution.Instance.SetDynamicItem_AfterSet(UISetReso_Attach item)
6.3D
当有3D模型需要和2D UI对齐时。
(1)相机设置成正交相机。
(2)根节点为相机或者与相机相同位置旋转缩放。
(3)将锚点或者物体添加UISetReso_Attach组件设置属性为Space3D,之后和2DUI对齐即可。
关于UI适配的文档的更多相关文章
- Web 前端 UI 组件库文档自动化方案 All In One
Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...
- Swagger UI教程 API 文档神器 搭配Node使用
ASP.NET Web API 使用Swagger生成在线帮助测试文档 Swagger 生成 ASP.NET Web API 前言 swagger ui是一个API在线文档生成和测试的利器,目前发现最 ...
- 微信小程序UI自动化: minium文档部署
目录 参考资料 1. 在线文档(临时) 2. 本地部署 参考资料 https://git.weixin.qq.com/minitest/minium-doc 1. 在线文档(临时) 其实上面的链接里面 ...
- vuepress搭建UI组件库文档踩坑篇
为了实现组件效果预览及代码展示可折叠功能,使用了插件vuepress-plugin-demo-container 相关配置可参考官网说明文档 第一步 安装插件 npm i - D vuepress-p ...
- Onsen UI for React文档
注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...
- vivo官网APP全机型UI适配方案
vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...
- Swagger文档添加file上传参数写法
想在swagger ui的yaml文档里面写一个文件上传的接口,找了半天不知道怎么写,终于搜到了,如下: /tools/upload: post: tags: - "tool" s ...
- .net core 使用swagger自动生成接口文档
前言 swagger是一个api文档自动生动工具,还集成了在线调试. 可以为项目自动生成接口文档, 非常的方便快捷 Swashbuckle.AspNetCore 是一个开源项目,用于生成 ASP.N ...
- 使用springfox+swagger2书写API文档(十八)
使用springfox+swagger2书写API文档 springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfo ...
随机推荐
- windows下JDK环境配置与Android SDK环境配置
一.JDK环境配置1.配置变量名:JAVA_HOME变量值:jdk安装的绝对路径. 变量名:Path(在系统变量中找到并选中Path点击下面的编辑按钮,不要删除原本变量值中的任何一个字母,在这个变量值 ...
- HttpWebRequest 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系
请求对象前加入 ServicePointManager.ServerCertificateValidationCallback = ValidateServerCertificate; 然后实现该方法 ...
- 通过端口映射连接不同网段的oracle
oracle在内网,只有特殊机器能访问,通过做端口映射,可以以这个特殊机器作为“跳板”完成本机对远程oracle的连接. “跳板”机器是windows,需要在该机器上执行netsh命令: netsh ...
- Deseq2 的可视化策略汇总
1) MA图 对于MA图而言, 横坐标为该基因在所有样本中的均值,basemean = (basemean_A + basemean_B ) / 2, 纵坐标为 log2Fold change 其 ...
- 更改Nginx网站根目录以及导致的403 forbidden问题解决
版权声明:本文为博主原创文章,未经博主允许不得转载. 一.更改根目录 Nginx默认网站根目录为/usr/local/nginx/html,要将它改成/home/fuxiao/www 更改方法: ...
- SDE表空间不足解决办法(ORA-01653)
一.问题描述 在往空间数据库拷贝数据的时候,发生了ORA-01653的错误,提示信息如下: 这主要是因为表空间不足引起的,出现这种表空间不足的问题一般有两种情况:一种是表空间的自动扩展功能 ...
- 【Py-Github】根据条件筛选Github repo的例子
条件: language:python commits:>100 contributors:>2 stars:>5 fork:0 实现: from github import Git ...
- cs231n笔记(二) 最优化方法
回顾上一节中,介绍了图像分类任务中的两个要点: 假设函数.该函数将原始图像像素映射为分类评分值. 损失函数.该函数根据分类评分和训练集图像数据实际分类的一致性,衡量某个具体参数集的质量好坏. 现在介绍 ...
- python基础类型—数字(Number)
Python3 支持 int.float.bool.complex(复数). 在Python 3里,只有一种整数类型 int,表示为长整型,没有 python2 中的 Long. 像大多数语言一样,数 ...
- 防止vue文件中的样式出现‘污染’情况(html5 scoped特性)
近期在项目中出现了vue样式污染的情况: 一个页面刚进去时样式不正常,刷新之后,样式才才达到预期那样 在vue中,如果把样式写在vue文件的 style中,可能会出现样式污染的情况,这是要把写样式的标 ...