UI开发核心问题-UI随屏幕自适应

屏幕分辨率对UI适配的影响

  一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象。但是,还有另一个真正严重的问题:不同屏幕的宽高比不一样。

  在Unity中,不同屏幕的宽高比,一般都会以高度为基准而拉伸宽度。

  切换屏幕比例模式的方法为在Game视图中的屏幕比例菜单,FreeAspect为不限长宽比,可以在其中选择想要的长宽比。

  如果屏幕比例菜单中没有想要的屏幕比例,可以单击菜单最底部那个小较好按钮,会弹出一个让自定义一个新的屏幕比例模式的界面,Label选项中,可以输入一个名称来为这个自定义的屏幕比例命名。在Type中可以选择FixedResolution和Aspect Ratio两个选项,如果选择FixedResolution,可以在下面的Width&Height中输入分辨率的宽和高的具体像素;如果选择Aspect Ratio,可以在下面的Width&Height中输入分辨率的宽高比。设定好之后单击OK按钮,即可保存这个自定义的屏幕分辨率模式。

  因为NGUI的UIRoot具备FixSize模式,所以,一般在进行UI随屏幕自适应时,主要着重解决的是屏幕宽高比发生变化之后的自适应。

主流设备的屏幕分辨率

  不论是PC设备还是移动设备,屏幕分辨率一般处于4:3到16:9之间,一般来说,只需要考虑这两个值作为极限值即可。

自适应核心组件Anchor的使用

  所谓Anchor,即为锚点,它的工作原理是它会自动地绑定摄像机的某一个点作为锚点,锚点一共有上左、上、上右、左、中、右、左下、下、右下9个点可以设定。当相机变动时,Anchor组件所在的物体位置也会跟随相机的变动而变动,并始终处于相机边界的锚点位置。

  Anchor的创建方式,在Unity顶部NGUI菜单中选择Create->Anchor即可。

  Anchor组件的设置:

    UICamera选项自动锁定了该Anchor所在的UI的摄像机,它将会绑定这个摄像机边缘上的某一个点作为锚点。Container即为包含的物体,一般情况下无需设置,因为将物体放置于Anchor的子物体中,就可以利用“子物体跟随父物体”实现跟随Anchor的锚点。

    Side一项为核心项,选择该Anchor的脑电,一共9个点,分别对应相机边缘的上左、上、上右、左、中、右、左下、下、右下。

    RunOnlyOnce意为执行一次,即只在开始的时候进行一次适配,默认为勾选上,一把把不需要去修改它。

    RelativeOffset,这是Anchor的相对位置偏移,百分比形式的。

    PixelOffset,像素偏移,Anchor会相对于相机边缘上的锚点以像素为单位进行偏移。

使用Anchor的注意事项

  (1)在设定了Anchor的Side锚点之后,Anchor会自动跑到响应的锚点位置上去,不需要手动拖动Anchor。

  (2)不论是3D UI还是2D UI,Anchor的用法是一模一样的,不要手动拖动Anchor的位置。

  (3)一般情况下,尽量不要去设置Anchor的RelativeOffset和PixelOffset,就让Anchor保持锚点原位置,然后将UI控件放到Anchor下作为子物体,再去调整UI控件的位置。

  (4)Anchor物体身上,尽量保证只有Anchor一个组件,以便于管理维护。

  (5)一套UI体系中,可以有无数多个Anchor(例如有5个Anchor都定位于左上角是被允许的),但是,尽量确保Anchor的父物体中没有Anchor,也就是尽量避免Anchor中套Anchor。Anchor的父物体可以是UI Root,也可以是一个空物体。

  (6)不要滥用Anchor,如果相机边缘的9个锚点中的每个点都有多个Anchor来定位,那么一定是UI结构的实际有问题了。

正式开发UI之前必须明确的几个问题

  (1)针对的是什么样的平台。

  (2)游戏的设备屏幕宽高比最大、最小是几比几。

  (3)游戏开发时的标准分辨率是多少像素,这将关系到美术制作图片资源的标准。

  (4)检查UI设计草图,和策划人员明确哪些UI会在屏幕宽高比变化时自适应位置。

  (5)明确需要自适应位置的UI分别属于哪一个锚点,并设计一个最佳的UI结构。

时间: 2024-11-02 03:33:27

UI开发核心问题-UI随屏幕自适应的相关文章

U9单据UI开发--单据类型UI开发

1.在解决方案下新建UI界面项目,命名以UI作为后缀 2.先删除系统默认新建的UI界面数据模型,并新建界面数据 3.新建单据类型UIModel(界面数据),以model作为界面数据后缀名 4.修改单据类型的命名空间 5.添加表单按钮动作 6.生成数据模型树 7.编辑数据模型树的缺省过滤条件,在弹出的对话框中,可设置单据类型的所属组织 8.设置界面参数 9.新建UI界面,命名以form作为后缀,在弹出的对话框中选择定制Form模,实体模型选择单据类型实体模型,Form模型根据实际需要选择,这里选择

Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和Kendo UI Support for Vue四个控件.Kendo UI for jQuery是创建现代Web应用程序的最完整UI库. 编辑是Kendo UI网格的基本功能,可让您操纵其数据的显示方式. Kendo UI Grid提供以下编辑模式: 批量编辑 内联编辑 弹出式编辑

关于Kendo UI 开发教程

Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互动式的 Web 应用. 在开发 Web 应用时,可以直接使用 jQueryUI ,也可以使用其它一些基于 jQuery 的其它 UI 框架,其中 Kendo (日文剑道) UI 就是其中的佼佼者.两种框架各有所长,下表列出两种 UI 框架的简单比较: 分类 jQuery UI Kendo UI Wi

iOS开发UI篇—核心动画(转场动画和组动画)

iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比)

iOS开发UI篇—核心动画(转场动画和组动画)(转摘)

iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比)

iOS开发UI篇—核心动画(基础动画)

iOS开发UI篇—核心动画(基础动画) 一.简单介绍 CAPropertyAnimation的子类 属性解析: fromValue:keyPath相应属性的初始值 toValue:keyPath相应属性的结束值 随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue 如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态.但

iOS开发UI篇—核心动画(关键帧动画)

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组

iOS开发UI篇—核心动画简介

iOS开发UI篇—核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用

iOS开发UI篇—核心动画(关键帧动画)(转摘)

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组