多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS

要说排版技术,在这三个平台中我觉得最有话语权的应该就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(相对布局)去实现,这里就不累赘了。

未完待续…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏产品成长日志

学会这4点人人都是设计师,赠10G PPT模板

提高信息传播效率是人类一直以来的追求,原始人在石壁上绘制图画记录信息,到文字与纸张的发明,今天大数据是最热门的话题,而数据可视化是其重要一环。所谓一图胜千言,一...

762
来自专栏服务端技术杂谈

双管齐下:同时设计 iOS 和 Anroid

不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和...

3175
来自专栏web前端

JavaScript基础学习--03图片翻转

一、利用纯js编写,兼容IE9以及IE9以上       1、两张图片重合排放,并且背面的图片display(none)。         2、点击事件中让正面...

1725
来自专栏CDA数据分析师

【图表大师一】如何让Excel图表更具“商务气质”?

如何让Excel图表更具“商务气质”? 文/ExcelPro的图表博客 这是去年底的时候,应《电脑爱好者》杂志约稿写的一篇小文,内容大致是《图表之道》第1章的略...

2118
来自专栏无原型不设计

网页设计排版中哪些元素最重要?

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能...

3174
来自专栏hightopo

WebGL 3D on iOS8 正式版

801
来自专栏数据小魔方

图表案例|中国保险行业资产状况调查(经济学人)

今天要跟大家分享的是一个经济学人风格图表——中国保险行业资产状况调查! 本案例图表的核心技巧主要包含两大部分: 符合图表的制作; 经典的配色排版风格。 以下是原...

3555
来自专栏前端架构

滑屏 H5 开发实践九问

滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传、广告、招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大。如今滑屏...

581
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

1752
来自专栏姬小光

普通程序员如何培养设计感?

你好,我是姬小光。如果你订阅这个号比较早,可能会看过我的《像素眼是怎样炼成的》。那篇文章主要是教你如何“找茬”,即如何发现设计稿或者网页上的不足之处。那么何为不...

441

扫码关注云+社区