跟着项目学iOS应用开发:基于Swift 4
上QQ阅读APP看书,第一时间看更新

2.3 如何定位用户界面元素

在上一节我们创建了UILabel控件,并在Size Inspector中设置了它的大小和位置。本节会对设计界面时的定位做一个简单的解释,这样可以便于我们在将来为自己的应用设计用户界面。

可以想象一下,我们将iPhone的屏幕划分为细小的网格,如图2-9所示。而屏幕的左上角就是这张“坐标纸”的原点(0,0),往右是水平方向的正值,往下是垂直方向的正值。在垂直方向上与我们平时使用的真正坐标值正好相反。

图2-9 被划分后的屏幕坐标

对于iPhone 6来说,它水平方向是375个点,垂直方向是667个点。通过苹果的官网我们可以找到所有不同屏幕尺寸iPhone设备的分辨率,如图2-10所示。

图2-10 iPhone手机分辨率指南

当你在屏幕上定位像UILabel这样的用户界面元素的时候,所指定的位置是UILabel控件左上角的那个点,不管是按钮、开关或图像视图都是如此。这样,不管用户界面元素是正方形还是长方形,这个点是可以确定的。

另外,我们还会通过width和height确定界面元素的宽和高。所以要想在视图中确定一个界面元素的位置与大小,我们只需要设置好四个属性即可,即x、y、width和height的值。这与我们之前在Size Inspector中设置的四个属性一致,如图2-11所示。如果你愿意,可以随意修改这四个值来了解每个属性所实现的功能。

图2-11 设置UILabel控件的位置和大小