IOS开发之——屏幕适配-AutoLayout布局实现(02)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 关于AutoLayout的几个概念
  • 通过布局实现屏幕适配

二 关于AutoLayout的几个概念

2.1 什么是Autolayout

  • Autolayout是一种“自动布局”技术，专门用来布局UI界面的
  • 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
  • Autolayout能很轻松地解决屏幕适配的问题

2.2 为什么推出Autolayout

Autoresizing

  • 在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成
  • 相比之下，Autolayout的功能比Autoresizing强大很多

Autolayout的2个核心概念

  • 参照
  • 约束

2.3 Autolayout的警告和错误

警告

  • 控件的frame不匹配所添加的约束, 比如：约束控件的宽度为100, 而控件现在的宽度是110

错误

  • 缺乏必要的约束, 比如:只约束了宽度和高度, 没有约束具体的位置
  • 两个约束冲突, 比如:1个约束控件的宽度为100, 1个约束控件的宽度为110

三 通过布局实现屏幕适配

3.1 Autolayout说明

对其方式

说明：

  • Leading Edges：左对齐(选中多个View时有效)
  • Trailing Edges：右对齐(选中多个View时有效)
  • Top Edges：上对齐(选中多个View时有效)
  • Bottom Edges：下对齐(选中多个View时有效)
  • Horizontal Centers：水平居中对齐(选中多个View时有效)
  • Vertical Centers：垂直居中对齐(选中多个View时有效)
  • First Baselines：基准线对齐(选中多个View时有效)
  • Horizontally in Container：水平居中
  • Vertically in Container：垂直居中

约束方式设置

说明：

  • 上方的数字用于设置上下左右的边距(与临近的View)
  • Width,Height：分别设置View的宽度和高度
  • Equal Widths：等宽(多个View时生效)
  • Equal Heights：等高(多个View时生效)
  • Aspect Ration：宽高比

3.2 布局逻辑

蓝色View

说明：

  • 选中蓝色View，在Storyboard中选中约束，分别设置上左右边距及高度
  • 上边距相当于设置了y
  • 左边距相当于设置了x
  • 右边距，根据计算结果，相当于设置了宽度
  • Height:50，设置了高度

黄色View

说明：同时选择蓝、黄View，设置右对齐

说明：同时选中蓝、黄View，设置同宽、等高

说明：单独选中黄色View，设置上边距

说明：选中黄色View，将Mutiplier设置为0.5，意思为：黄色View的宽度=蓝色View的宽度*0.5+0