第一个Xcode项目(4) - TableViewController② - 布局

[相关信息:Xcode7.2 ; Swift2.0]

之前我们已经把列表的数据显示出来,然后运行APP,横屏一下看看效果


列表页的横屏模式

可以看到我们的布局约束还没有做,所以接下来要把布局做起来


为Table View添加布局约束

为行的左边的View添加布局约束

为行的右边的View添加布局约束

为3个Label添加垂直居中的约束

为Label -> 天,添加约束

为Label -> Label,添加约束

为Label -> 87,添加约束

调整Label -> Label的宽度

调整Label -> Label的行数

调整Label -> Label自身宽度变大的优先级

调整Label -> 87自身宽度变大的优先级

大概的意思就是设置优先级的。

  • Hugging priority 确定view有多大的优先级阻止自己变大。
  • Compression Resistance priority确定有多大的优先级阻止自己变小。
    很抽象,其实content Hugging就是要维持当前view在它的optimal size(intrinsic content size),可以想象成给view添加了一个额外的width constraint,此constraint试图保持view的size不让其变大:
    view.width <= optimal size
    此constraint的优先级就是通过上面的方法得到和设置的,content Hugging默认为250.
    Content Compression Resistance就是要维持当前view在他的optimal size(intrinsic content size),可以想象成给view添加了一个额外的width constraint,此constraint试图保持view的size不让其变小:
    view.width >= optimal size
    此默认优先级为750.

    解释转自AutoLayout中的Content Hugging 和 Content Compression Resistance

这样设置好之后,当我们把87改为1187时,左边的内容label的宽度会缩小,多出来的宽度就让1187变宽。

好,我们来运行看下效果 (Command+R)


运行APP的效果 -> 竖屏

运行APP的效果 -> 横屏

👋👋👋

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容