关于UI的适配,让UI自动适配屏幕大小,做更好的UI布局

首先看一下这两个图片 :



Ui的大小,位置摆放,不管屏幕怎么缩小,都不会因此变乱。

这都缘由与四个关键属性,首先介绍一下第一个属性:
1、锚点(AnchorPoint)
锚点的X和Y到底如何去调整呢?请看下图:


从图里的坐标系可以看出,锚点就类似于一个Ui的中心点,在其他属性的Ui调整都是会按照锚点来调整。下图是把锚点调到了(0.5,0.5)

2、坐标(Position)

既然要将图片位于正中央,那个Position绝对会派上用场。Position用来适配的话一般都是用相对位置。
Position的属性类型是这样的{0,0},{0,0}
把Position展开,image

如图,属性有四个空,但是他们有不同功能:image

红圈部分是相对坐标,而非红圈部分是绝对坐标,
所以调整相对位置基本都是调整坐标。现在回到在讲解锚点时的Ui,锚点调为{0.5,0.5}

然后把Position坐标调为如图所示:

image

然后看看效果:

不管屏幕怎么缩小,他都一直处于中点位置。但是他的Ui就有点问题了,不会随着窗口缩小而改变大小,这个时候我们就需要依靠Size属性了。

3、大小(Size)

Size属性类型也和Position一样,image

左边是相对大小,右边是绝对大小,一般来说,做屏幕适配是不会用到绝对大小的。

我们先来做个测试,把Size调为如图所示:image

这个时候UI是这样的:

横坐标占了整个屏幕长度的0.5,也就是1/2,
纵坐标也占了整个屏幕宽度的1/2

不管你怎么缩小屏幕,Ui的位置都是相对的:

这个时候又出现了一个问题,一个Ui怎么可能这样随意缩放大小呢,如果做好一个圆形的Ui:

但是窗口一缩小,就会变成椭圆:image

这个时候就要靠另一个属性了。

4、SizeConstraint

它的属性是一个下拉框,我们先来试试把这个属性改成RelativeXX,这个时候,我们的Ui终于变回圆形了:

窗口左右拉伸会改变Ui整体大小,而上下拉伸是不会改变Ui大小的

如果改为RelativeYY的话,上下拉伸会改变Ui整体大小,而左右拉伸不会改变。

5、最后用学到的东西,弄个固定在右上角,但是不会和窗口边缘贴在一起的正方形UI吧!
调整锚点:image

坐标调整:image

效果:

大小调整:image

这就是Ui适配的全部内容了,如果有什么更好的方法,欢迎补充。

3赞