为多种分辨率设计UI

如今的游戏和程序通常需要支持许多种不同的屏幕分辨率,并且其UI布局也需要自适应多种分辨率。Unity的UI系统包含多种工具来实现这一目的。

下面我们将使用一个简单的例子来学习、观察和比较不同的工具如何实现这一目的。此例中,我们将三个按钮放置在屏幕的角落,同时使其在不同的分辨率下能够自适应的布局。

此例中我们将使用四种分辨率:Phone HD in portrait (640 x 960) and landscape (960 x 640) and Phone SD in portrait (320 x 480) and landscape (480 x 320)。初始化的分辨率为Phone HD Portrait。

使用锚点来适应不同方向的缩放

UI元素默认以其父对象的矩形中心为锚点。也就是说他们距离中心的位移是一个常量。如果分辨率变为landscape方向,那些按钮也许甚至会跑到屏幕外面。

使按钮保持在屏幕内的一种方法是改变布局,例如使按钮的位置与其对应的角落绑定。左上角的按钮的锚点设置为屏幕的左上角,方法是修改Inspector中的锚点预设(Anchors Preset),或者是拖拽Scene View中的三角锚点符号。

无论屏幕尺寸变大或变小,按钮都将保持固定在各自所在角落的位置。然而,由于他们保持原始的以像素为单位的尺寸,他们在屏幕中所占的比例可能会变大或变小。这也许是你想要的结果,也许不是,这取决于你希望你的布局在不同的分辨率下是什么样子的。

在这个例子中,我们所说的Phone SD Portrait 和 Landscape的小分辨率并不是说其屏幕在物理意义上的很小,而是指有一个较低的像素密度。在这些低像素密度屏幕中,按钮不会比高像素密度的屏幕中显示的大,他们应该显示出一样的大小。

这意味着如果屏幕变小,按钮也应该等比例缩小。换句话说,按钮的缩放应该跟随屏幕并与其保持一致。在这一点,Canvas Scaler组件能够提供帮助。

随着屏幕一起缩放

Canvas Scaler可以被添加到根对象Canvas——一个附带Canvas组件的游戏物体,所有的UI元素都是他的子对象。通过GameObject菜单添加的Canvas默认附带Canvas
Scaler
组件。

在Canvas Scaler组件中,你可以设置其UI缩放模式(UI Scale Mode)为Scale With Screen Size。在这种模式下,你可以指定一个分辨率作为参照。无论当前屏幕的分辨率比参照的分辨率大还是小,Canvas的缩放因子都将被设置,因此所有UI元素都将随着屏幕一起缩放。

在我们的例子中,我们将Canvas Scaler设置为Phone HD landscape的分辨率640 x 960。现在,当设置屏幕分辨率为Phone SD portrait的320 x 480时,整个布局都等比例的缩小了。所有东西都缩小了:按钮尺寸,他们距离屏幕边缘的距离,按钮的图标以及文字。这意味着在Phone SD portrait中显示出的布局与再Phone
HD portrait中是一样的,仅仅是像素密度降低了。

添加Canvas Scaler组件后,搞清楚这个布局在其他宽高比下看起来是什么样子的是很重要的。通过设置回Phone HD landscape, 我们发现按钮此时显示的比他们应当显示的尺寸要大。

归根结底按钮变大的原因取决于Canvas Scaler如何设置。默认情况下,他拿当前分辨率的宽与Canvas
Scaler
指定的参考分辨率的宽作对比,其结果将作为缩放因子来缩放所有的东西。这个组件有一个名为Match的属性,其值可以设置为0(宽),1(高)或者一个介于两者之间的值。默认情况下其值为0,也就是当前屏幕的宽和Canvas
Scaler
的宽作比较。

如果Match的值设为0.5, 他将同时比较当前宽和参考宽以及当前高和参考高,并且在两者区间内(个人理解)选择一个缩放因子。由于此例中landscape分辨率是1.5倍宽但是也是1.5倍短,所以这两个缩放因子平均出了一个缩放因子1,
也就是说按钮保持其原来大小。

时间: 2024-10-20 10:05:03

为多种分辨率设计UI的相关文章

基础知识漫谈(2):从设计UI框架开始

说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工具包\框架,又产生了大量通用的或者业务性的UI框架,比如Draw2d.GEF.easyUI乃至国内的EChart.白鹭等等. 这些框架的业务范围各异,一个程序员的时间和精力有限,你不可能全部都掌握,又不能预言出是哪一个将来会独步天下,甚至,连当前哪一个最流行,都够打一阵嘴炮. 那,我们应该学什么?

Android Studio 图形化设计 UI 界面

我们开发 Android 程序必定是从 UI 开始的 ,使用最新版的 Android Studio 可以在图形化界面下设计软件 UI, Android Studio 默认的布局是 ConstraintLayout 通过拖动可以快捷的将我们想要的文字.图片.输入框放到界面中 通过各种国定对齐方式可以方便的设计程序 UI ,并让界面适应不同的屏幕大小 其中值得注意的是,魔法棒按钮可以智能的固定已有的组件,十分方便 一般用好辅助线和边界线就可以设计出比较整齐的界面来 原文地址:https://www.

2.3 使用Android Studio 简单设计UI界面

首先 创建一个新的项目找到app 文件目录下的layout的 activity_main.xml 因为Android Studio 是可视化的,所有操作都可以在图形界面进行. 该res 界面当中  drawable 可以将需要的图片导入该目录当中进行调用 layout的目录是布局界面 values 当中存有可以更改界面的颜色 字符串还有款式的xml文件.当然也可以在可视化界面当中便捷的更改. 如下图所示为可以添加到界面的各种符号,若账号输入框,密码输入框,按钮和各种选择键. 添加辅助线的按钮如下

实现简单的计算器(设计UI)

要点说明: 1.一个textedit控件,其余全部是button控件,button布局方式:栅格布局(Grid layout) 2.对窗体的Title进行修改(默认是工程名) 3.在ui文件中设计的UI,编译器会自动创建一个类,在这个类的创建依据就是在用户自定义的类中说明的: 通过ctrl+鼠标左键可以查看生成的类的详细情况: 1 /******************************************************************************** 2

Android 轻松设计UI模板

写在前面: 我们写应用的时候,常常会发现很多界面都是有相同或是相似的部分的,比如相同的Topbar或是相同的底部之类. 我们以QQ为例: 而且这些相似的部分一旦修改,就是所有的一起修改,如果就改一两个倒还好,多了你试试?都说懒惰是程序员进步的阶梯,所以懒惰的程序员们就使用模板这种东西来提高自己的生产效率,同时也提高了代码的可读性.可维护性.本文就和大家一起来实现我们自己的模板,一个Topbar.效果如下: 麻雀虽小,五脏俱全,重要的是思想. 看完本文,你可以学到: 1.declare-style

C如何设计UI啊

83vg3b蚕藏逝狭砂既<http://weibo.com/20180413p/230927983250966776127488> m48pxs断案市炎赋林<http://weibo.com/XzUBnp/230927983196764897026048> ohfigq袄缴莆俗殖员<http://weibo.com/20180413pp/230927983082242391678976> iti844妥勤古廊眉硬<http://weibo.com/BMHJYp/2

U3D多分辨适配实现原理

  在游戏开发过程中多种分辨率的UI适配一直都是一个麻烦点,开发当中都是在美术和程序里面的工作量寻求一个平衡点.做UI适配有以锚点定位为主和做UI配文件配置等方案. 锚点定位   目前主流的还是以锚点定位为主.锚点定位的方式对于开发来讲比较方便,设计人员定好每个UI要挂在哪个锚点上,就不会去管不同分辨率的显示问题了.每个不同的分辨率都会根据获取的锚点进行UI的显示.不过锚点是有局限性的,设计上需要针对每种分辨率进行显示避规,需要不断的调整锚点的位置,达到不同分辨率都能显示正常,如果没有调整好锚点

【转】iOS6中的Auto Layout:通过代码添加约束

最近做的项目用到了Auto Layout,于是经过了一番大量的google,这是我看到的讲用代码创建约束最清晰的一篇教程,于是想跟更多的人分享一下.原文也比较简单,可以直接过去看,如果我翻译的那块需要校对的,也请多多指教. 原文:http://www.ioscreator.com/tutorials/auto-layout-in-ios-6-adding-constraints-through-code iOS6提供了一种设计用户界面的新方法:Auto Layout.使用Auto-Layout很

学习中收集的一些有关网页UI设计、前端开发的相关知识网址分享,赶紧收藏走起。。。

http://iconfont.cn/ 强大的矢量图标库,妈妈再也不用担心我不会画图标了 http://pxtoem.com/ 像素单位px的转换为em,可以自豪的说小学数学是体育老师教的啦 http://qrohlf.com/trianglify/#gettingstarted 时下钻石风格代码完成,有木有高大上 http://www.sheji11.com/category/ruanjian 软件神器,设计师资源网,各种插件上这找 http://www.w3cplus.com/css3/ps