多端排版杂谈

要说排版技术，在这三个平台中我觉得最有话语权的应该就Web端了；主要因为web的发展历史更为悠久，而且伴随着Web端的应用场景越发广阔，内容排版越发复杂；这让排版技术在web端扮演着更加举足轻重的角色。下面我就先从web开始讲起：

       1990年，Berners-Lee发明了HTML，最开始仅仅支持文本排版以及一些超链接；

       1993年，网景公司推出了第一个支持image排版的浏览器 - Mosaic（马赛克浏览器），当时的web的排版技术的特点其实还是延续了文档的排版特性；

Mosaic（马赛克浏览器）

1996年是个分水岭，随着web中需要展示的内容越来越多样化，越来越多的控件迫切需要在web中得到很好的展示，以table为主架构的栅格化布局开始在各浏览器上得到支持；table中的单元格中允许排放各种的控件（输入框、按钮、图片、flash等），而且最早的table都是在一个固定的宽度内去布局；主要因为那个年代还是一个硬件不那么普及的年代，电脑显示器的分辨率还是比较有限的，好像就那么几种：960

• 600、1024 * 768、后来才逐渐有了1280 * 1024、1440 * 900这些；所以table在浏览器上的表现是非常稳定的。正因如此，也给后面div+css的普及带来不少的阻力。

以table为主架构的排版，可以放置各种控件

随着table的大量使用，更多的布局风格让table代码、结构臃肿的问题越来越突出；早在2000年，以div+css的排版方式已经开始进入开发者的视线；在现在看来，div+css的引入又是web排版技术的一个新起点，这是第一次提到了流体排版的概念；这种排版技术提倡是：所有的元素都可以当成流的一部分，遵循默认的从左到右、从上到下排版，从而减少开发者一些不必要的排版计算。另外div是结构更加简单，代码量更少，布局更加灵活。

更为灵活的div+css排版

后面很长的一段时间里，开发者一直徘徊在多浏览器间的排版渲染差异上面，为寻找更多的hack办法而坚持不懈，我相信如果针对该类问题去总结一本书，那必定是很受欢迎的在当时。随着时间的推移，低版本浏览器逐渐退出了用户的视线，开发者才得以逐步从排版的hack中解脱出来。

2008年，第一份HTML5正式草案发布，我想那时候大部分的开发者还陷在解决IE6的排版缺陷的泥潭中；当时HTML5带来很多新的东西，但在排版方面没有带来革命性的技术，而是在流体排版的基础上引入了FlexBox Layout（弹性盒子排版），弹性布局更多的注重是在对排版流的控制上；为常用的排版场景提供更加优雅的解决方案。如下图：在过去有很多常用的排版方式是需要开发者去计算才得到的，相当于说FlexBox直接内置更多排版方式给到开发者。

FlexBox 内置的水平方向控制属性justify-content

       今年5月份，最新的排版技术Grid Layout（栅格化排版）第二个CR版本又发布了，Grid Layout把每个容器都定义成了一张网格，具体每个格子的大小？子元素放置在哪个格子上？或者子元素占据几个格子等等都由开发者去指定，而且这种指定是不需要经过运算的，开发者大部分可以脱离了px这个单位；例如：

使用Grid Layout排版的表单

       这似乎跟table排版有些相似，起码网格式的排版思想是一样的，不过我想下面的意图应该才是定制该标准的意图：

1、页面扁平化，开发者以后的排版尽可能要从全局化考虑，如何制定最合适的格子，减少不必要的层级嵌套；

2、削弱元素与元素之间的相互依赖，过去由于流体排版的特性，当一个元素的排版发生变化，相关联的元素都会受牵连而导致重排，网格却可以减少元素与元素的依赖关系，从而减少不必要的重排；

3、推进页面模块化，我想这是最显而易见的作用了。

以上就是web排版技术的一些发展史，给我的感觉就是Web从没放弃折腾，但也确实在折腾中给我们带了很多借鉴；例如流体排版，一种默认遵循人们阅读方式：从左到右，从上到下的排版方式。

       下面来探探Android端的排版技术有哪些，据了解Android排版技术更为丰富，民间传的最多的主要有五大排版方式：

(1) LinearLayout(线性布局) (2) RelativeLayout(相对布局) (3) TableLayout(表格布局) (4) FrameLayout(框架布局) (5) AbsoluteLayout(绝对布局)

我们逐个来看一看

LinearLayout（线性布局）据说是开发者用的最常用的一种排版方式之一，它的思想跟流体排版有些相似：同行中遵循从左到右，行与行之间遵循从上到下；但是区别在于LinearLayout的每行都需要开发者指定，不能自动断行；相对来说应用场景就非常局限了，而且会造成元素的层级增加。有兴趣的可以自行搜索查看排版代码

最经典的LinearLayout Demo

RelativeLayout（相对布局），RelativeLayout在我第一眼看来，以为是Web中的流体排版relative属性，后来细看才发现完全不是一回事，RelativeLayout的方式其实跟iOS中的约束布局基本是一致的；通过一些属性去设置约束关系，例如：layout_toRightOf设置在某元素的右方；在通过layout_marginLeft设置相对偏移量；如果一个元素在没有任何位置指定的前提下，它默认放置在父元素左上角；可以说RelativeLayout是最灵活的一种排版方式，适用场景很广，但这种方式同样存在它的弊端：太过于灵活则意味离散，无法扮演起主架构的角色，而且当布局变得复杂，相互的依赖关系也会变得复杂，后续的代码维护也变得越来越不可维护。

RelativeLayout

TableLayout（表格布局）是LinearLayout的子类，在LinearLayout基础上抽象了单元格的设置方式，排版思想都是栅格化排版的思想，跟Web中的table以及最新的Grid Layout是相似的，只是在使用方式上有些区别。其实不管table layout 还是grid layout 思想都是栅格化，这类排版思想在我看来是能够在平时的排版当中扮演着主架构的角色，但要看系统对栅格化排版支持到什么层度，如果像早期的web table一样，结构臃肿，代码繁多，调整不灵活等问题也难以让栅格化布局成大器。

FrameLayout（帧布局）与AbsoluteLayout（绝对布局），在我看来这两个排版技术是一回事，都是相对于父元素左上角绝对排版，而且同级元素之间是没有任何依赖或者约束，都是通过margin或者layout_x来设置偏移；应用场景很小，而且完全可以由RelativeLayout（相对布局）去实现，这里就不累赘了。

未完待续…