什么是UI元素的相对自适应

  UI元素的相对自适应,顾名思义,是指两个UI元素之间保持一种相对的位置不要变化,例如,UI元素A永远处于UI元素B右边的50像素处位置。再比如,一个UI背景框,不论屏幕尺寸怎么变化,框的左边缘永远距离屏幕左边100像素,框的右边缘永远距离屏幕右边100像素。

Anchors的介绍及使用

  Anchor的主要作用是一个组件,它将会自动去寻找摄像机的边缘和中心点一共9个点,以此作为基准点进行定位适配。而Anchors(为了 区分,以下皆用相对Anchors来形容)是每一个UI控件都会附带的选项,它能为每一个UI控件设定绑定对象和绑定的方式。默认情况下为none,意味着控件默认情况下无相对定位。

  Anchors设置:

    Type为Anchors定位的类型,一共有None(默认状态,无相对定位)、Unified(统一的标准定位)、Advanced(高级定位)。统一的标准定位和高级定位之间的区别在于,高级定位能够有更加复杂的定位设置,但它们的定位原理是一样的。

    Execute选项为设定相对定位执行的时机,一共有3个选项可以选择:OnUpdate、OnEnable和OnStart,Update、Start、OnEnable是Unity中脚本自动执行的函数,如果选择了OnUpdate,则这个空间的定位会随着每一帧去进行更新,如果选择了OnEnable,那么意味着这个空间只会在激活的时候更新一次定位,然后不再更新,直到下次激活再进行更新,如果选择了OnStart,那么这个控件在场景加载之后只会更新一次相对定位信息。一般来说,为了节省性能有照顾需求,会选择OnEnable。

    Target选项为这个控件相对位置选取的参照物,也就是这个控件以哪一个物体作为锚点来进行相对位置的绑定。

    下面的4个选项:Left、Right、Bottom、Top。它们的作用是设置这个控件的4个边的对位信息,在每个选项旁边的下拉菜单中选择Target's Center(以目标点的中心点作为参照)等目标体身上的参照点,最右边的数字表示的是像素偏移,加号为向X轴正向偏移一定像素,减号为向X轴负向参照目标点偏移一定像素。

    Anchors适配的核心原理为:为该控件的4条边分别设定相对位置的参照点,这个参照点可以选择参照物体身上的中点、左边点灯,然后设定一定量的偏移像素。这样当相对Anchors执行时,控件的4条边会分别按照定位信息朝4个方向"拉扯控件",来达到相对位置适配的效果。所以,Anchors本质上市点对点的(自身控件的4条边的终点,分别去对应一个参照点)。

    Anchors的Advance模式比Unified多了一些功能,可以给控件的4边分别设置不同的参照物。

使用Anchors的注意事项

  (1)Anchors需要对每个控件都进行详细的锚点定位设置,工作量巨大,所以,在没有必要的情况下,尽量用Anchor组件,可以减少很多工作量。

  (2)使用Anchors时一定要切记它在屏幕分辨率变化的情况下,很可能会导致控件形变(控件4边被拉发生变形)。

  (3)如果一定要使用Anchors,又不希望它形变,就将Anchors的4边定位都以目标物体的同一个点(如Target's Center)作为参照点。

UI元素的相对自适应的更多相关文章

  1. CSharpGL(6)在OpenGL中绘制UI元素

    CSharpGL(6)在OpenGL中绘制UI元素 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入 ...

  2. 【Win 10 应用开发】打印UI元素

    Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印, ...

  3. 10套免费的 Photoshop UI 元素以及 PSD 素材

    免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...

  4. 怎样进行Android UI元素设计

    Android UI元素里面包含了许多的内容,比如:该平台由操作系统.中间件.用户界面和应用软件组成,一个应用程序要想受用户喜爱,那么UI可不能差. Android为相似的编程名词引入了一些新的术语, ...

  5. 使用float属性布局时父元素高度不能自适应的解决方法

    在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...

  6. appium— Android定位webView里面的UI元素

    Android SDK中的UIAutomator中本身是不支持网页中的UI元素定位,下面介绍几种常用的定位app内部的网页的UI元素的方法. 一.使用chrome浏览器调试移动端网页 这是使用最多的一 ...

  7. 动态控制C4C UI元素的显示和隐藏

    C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式: if ( logic expression = true ) t ...

  8. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  9. 巧用Drawable 实现Android UI 元素间距效果

    源文地址: 巧用Drawable 实现Android UI 元素间距效果 在大部分的移动UI或者Web UI都是基于网格概念而设计的.这种网格一般都是有一些对其的方块组成,然后它们组合成为一个块.使用 ...

随机推荐

  1. MySQL多实例配置

    实验环境:RHEL6.4为最小化安装,mysql安装包为通用二进制安装包,版本为mysql-5.6.26 创建mysql用户 #useradd –M –s /sbin/nologin mysql #y ...

  2. [改善Java代码]使用构造函数协助描述枚举项

    一.分析 一般来说,我们经常使用的枚举项只有一个属性,即排序号,其默认值是从0.1.2... ....但是除了排序号外,枚举还有一个(或多个)属性:枚举描述,它的含义是通过枚举的构造函数,声明每个枚举 ...

  3. js中定义对象的方式有哪些?

    1.对象直接量 2.构造函数 3.原型方法 4.动态原型方法

  4. iOS - 文件与数据(File & Data)

    01 推出系统前的时间处理 --- 实现监听和处理程序退出事件的功能 //视图已经加载过时调用 - (void)viewDidLoad { [super viewDidLoad]; // Do any ...

  5. (转)DockPanel的一点点改进

    1.当双击Tab时,原先是直接把当前Tab所表示的这个窗体,从主窗体的框架上分离现来,成为一个浮动的窗体.这不是我想要的,我把它改成了双击关闭.在DockPaneStripBase的WndProc方法 ...

  6. eclipse中英文切换--四种方式

    若转载,请注明出处 http://www.cnblogs.com/last_hunter/p/5627009.html 谢谢! ------------------------------------ ...

  7. vim全局替换

    :1,$ s/cmss_//g 1,$代表第一行到最后一行 s代表替换 cmss_为要替换的内容 替换为空格,所以直接// g代表全局替换

  8. (poj 3177) Redundant Paths

    题目链接 :http://poj.org/problem?id=3177 Description In order to <= F <= ,) grazing fields (which ...

  9. UML静态类图

    0,主要分为类.接口.协作.关系,这四种元素.作用:a,显示类.接口以及他们之间的静态结构和关系:b,用于描述系统的结构化设计. 1,类 CStudent +m_strName : string +S ...

  10. ZigBee NV层使用

    原文转载于http://www.cnblogs.com/yqh2007/archive/2011/05/31/2065284.html 系统NV区:初始化nv数据项   osal_nv_item_in ...