自己关于布局的一点点思考。

布局

客户端开发都会遇到布局的问题，无论是web、iOS还是Android，只要涉及到用户界面的，都会和布局打交道。web、iOS和Android现在都有一套自己的布局方式，那他们之间有什么共同之处，布局是不是应该具有某种意义上的共通呢？

web

web端布局主要依赖CSS，下面就简单看看web是如何布局的。 CSS Positioning 學習 CSS 版面配置

  • 正常布局
p.static {
	position: static;
}

照着浏览器预设的配置，自动排版在页面上

  • 固定布局
p.pos_fixed {
	position: fixed;
	top: 30px;
	right: 5px;
}

相对于浏览器视窗来定位

  • 相对布局
p.pos_relative {
	position: relative;
	left: -20px
}

和static表现一样，但可以添加额外的属性，top、right、bottom、left来相对的调整其本该出现的位置，但不会影响其他元素的位置。

  • 绝对布局
p.pos_absolute {
	position: absolute;
	left: 100px;
	top: 150px;
}

该元素的位置相对于其第一个父元素的位置，如果没有的话，就是<html>

Android

android的通用布局主要是以下三种。Common Layouts

  • 线性布局 以单一横向或者纵向组织子元素的方式。

  • 相对布局 允许自定义子元素之间位置的方式，例如：子元素A在子元素B的左边，子元素A和父元素顶部对齐等

  • Web View 展示web页面

iOS

iOS的出身比较奇怪，因为其早期机型确定，不存在很多适配的问题，随着iPhone 6以及iPhone 6 Plus的出现，适配也变成了一个项目的必要考量。iOS 6以后，适配主要依赖Auto Layout。Auto Layout类似于相对布局，设置元素之间的关系，后面的章节会对Auto Layout有比较详细的介绍。下面就将各个平台相对布局的属性进行简单的比较。

FlexBox

为什么这里要放FlexBox，因为大家都说好，其旨在更有效的进行布局。A Complete Guide to Flexbox According to Chris Coyier: “The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space…”

对比

通过比较Web、Android以及iOS的布局可以发现，其实最主要的布局就只有一种方式：相对布局。其他的布局方式或者基于相对布局，或者不具备通用性。而且相对布局非常符合人类常规思维。一般人类在描述布局的时候都会使用相对布局的方法，比如，该物品左边30cm等。 下面我们进行简单的对比。

Auto Layout

Auto Layout Guide

Auto Layout的基本构造块是constraint（约束）。可以将约束认为是人类表达布局的数学表达。举个例子：该按钮的左边缘在其容器左边缘20points <=> button.left = container.left + 20.

属性可以有：left、right、top、bottom、leading、trailing、width、height、centerX、centerY以及baseline

约束有其他属性：Constant value、Relation、Priority level

Intrinsic Content Size

Auto Layout负责控制器、视图之间的布局。