第一部分:原理

(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适配的文档的更多相关文章

  1. Web 前端 UI 组件库文档自动化方案 All In One

    Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...

  2. Swagger UI教程 API 文档神器 搭配Node使用

    ASP.NET Web API 使用Swagger生成在线帮助测试文档 Swagger 生成 ASP.NET Web API 前言 swagger ui是一个API在线文档生成和测试的利器,目前发现最 ...

  3. 微信小程序UI自动化: minium文档部署

    目录 参考资料 1. 在线文档(临时) 2. 本地部署 参考资料 https://git.weixin.qq.com/minitest/minium-doc 1. 在线文档(临时) 其实上面的链接里面 ...

  4. vuepress搭建UI组件库文档踩坑篇

    为了实现组件效果预览及代码展示可折叠功能,使用了插件vuepress-plugin-demo-container 相关配置可参考官网说明文档 第一步 安装插件 npm i - D vuepress-p ...

  5. Onsen UI for React文档

    注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...

  6. vivo官网APP全机型UI适配方案

    vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...

  7. Swagger文档添加file上传参数写法

    想在swagger ui的yaml文档里面写一个文件上传的接口,找了半天不知道怎么写,终于搜到了,如下: /tools/upload: post: tags: - "tool" s ...

  8. .net core 使用swagger自动生成接口文档

     前言 swagger是一个api文档自动生动工具,还集成了在线调试. 可以为项目自动生成接口文档, 非常的方便快捷 Swashbuckle.AspNetCore 是一个开源项目,用于生成 ASP.N ...

  9. 使用springfox+swagger2书写API文档(十八)

    使用springfox+swagger2书写API文档 springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfo ...

随机推荐

  1. [mvc] 简单的forms认证

    1.在web.config的system.web节点增加authentication节点,定义如下: <system.web> <compilation debug="tr ...

  2. caffe网络结构可视化在线工具

    http://ethereon.github.io/netscope/#/editor shift+enter

  3. 框架源码系列四:手写Spring-配置(为什么要提供配置的方法、选择什么样的配置方式、配置方式的工作过程是怎样的、分步骤一个一个的去分析和设计)

    一.为什么要提供配置的方法 经过前面的手写Spring IOC.手写Spring DI.手写Spring AOP,我们知道要创建一个bean对象,需要用户先定义好bean,然后注册到bean工厂才能创 ...

  4. BarTender安装常见问题集结

    很多人在安装BarTender时,会出现各种安装程序信息警告提示,导致软件无法继续安装下去,那么针对这些Bartender安装问题我们要怎么正确解决呢?下面,小编将BarTender安装失败常见问题, ...

  5. C# SQLite数据库

    在客户端配置文件<configuration>节点下,添加: <connectionStrings> <add name="localdb" conn ...

  6. 简单的Verilog测试模板结构

    这里记录一下曾经用到的简单的测试模板,如下所示: //timescale `timescale 1ns/1ns module tb_module(); //the Internal motivatio ...

  7. Oracle中的NULL、’’(空字符串)以及’_’(空格)

    本文首发于 http://youngzy.com/ 在Oracle中使用 null,''(空字符串),'_'(空格)时,有没有遇到问题?产生疑惑? null和’’(空字符串)是一个意思 注: 为了便于 ...

  8. grafana安装和配置(centos7上配置)

    author:  headsen  chen date:  2019-03-29  10:33:19 1,安装: yum install https://s3-us-west-2.amazonaws. ...

  9. python2.7.X 升级至Python3.6.X

    安装Python3 项目是在py3环境下进行编码的,正好yczhang默认的py版本是2,我们还需要安装py3才能让程序run起来,在此之前,需要安装开发工具包,因为要编译安装Python [root ...

  10. react 路由导航栏 withRouter

    codesandbox https://codesandbox.io/s/9l6prnyxjy app.js import React, { Component, Fragment } from &q ...