storyboard中的自动布局

自动布局界面介绍

目标

• 熟悉自动布局界面
• 理解为什么是头尾布局而不是左右对齐
• 理解基线对齐含义
• 在使用代码布局时，头尾布局和左右布局不能混用

自动布局工具

• 在 Interface Builder 的编辑区域底部有一个工具条，提供了界面布局的相关工具

• 按钮介绍
  • align：设置对齐
  • pin：设置位置
  • align：解决自动布局问题

基线对齐示意图

AutoLayout

知识点掌握

• 自动布局的核心概念

  • 参照

    • 通过参照 其他控件（包括父控件）来设置当前控件的位置和大小

  • 约束(Constraint) 规则

    • 通过添加约束限制控件的位置和大小

• 掌握 Interface Builder 中的自动布局使用
• 
  

概念

• Autolayout 是一种“自动布局”技术，专门用来布局UI界面的
• Autolayout 自 iOS 6 开始引入，由于 Xcode 4 的不给力，当时并没有得到很大推广
• 自iOS 7（Xcode 5）开始，Autolayout 的开发效率得到很大的提升
• 苹果官方也推荐开发者尽量使用 Autolayout 来布局 UI 界面
• Autolayout 能很轻松地解决屏幕适配的问题

知识点学习

• 自动布局快速体验
• Interface 中的 自动布局界面

自动布局快速体验

目的：体会自动布局的设置过程

要求

1. 在控制器的 view 上放置一个 280 * 100 的蓝色视图
2. 在不同尺寸的屏幕下都显示在屏幕的中心位置

步骤

• 点击 pin 按钮设置宽高
• 点击 align 按钮设置水平对齐和垂直对齐