• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

研究Grid Layout在原生客户端中运用 CSS实例demo

CSS3 web前端中文站 2年前 (2017-06-05) 947次浏览 已收录 0个评论

CSS3 Grid LayoutGridLayout

CSS Grid Layout 是 W3C 规范中专门为Web 布局提供的一个特性。CSS Grid Layout 将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了 CSS Grid Layout 之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。虽然 CSS Grid Layout 给 Web 布局带了革命性的变化,那么他在原生客户端(也就是 APP)开发中,其运用是否也能像 Web 一样呢?接下来我们就一起来探讨。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

CSS Grid Layout 发展

CSS Grid Layout 是微软于 2010 年提出的一个布局模块,最早在 IE10 实施。2011 年 4 月首次公开 W3C 规范草案,2015 年 3 月 2 日 Chrome 也开始支持这个模块。在 2016 年 9 月 29 日成为 W3C 候选标准。值得庆幸的是,2017 年 3 月,Chrome 和 Firefox 将开始默认支持Grid布局。其中,Mozilla 将在 3 月 7 日发布的 Firefox 52 版本上开始支持。由于要先在 Chrome Canary 中支持Grid,所以,谷歌将在 3 月 14 号的 Chrome 57 版本上开始默认支持 Grid.一旦在公开版本中默认得到了支持,那么当前在开发版本中的所有 Grid 功能都将在公开版本中出现。Grid 时代就此开始。

CSS Grid Layout 能得到众多现代主流浏览器的支持,需要特别感谢@Rachel Andrew 和@Jen Simmonsg 两位女士。她们不断的在完善 CSS Grid Layout 模块,并且向社区推广。特别是@Rachel Andrew,CSS Grid Layout 能这么早进入 Web 开发者的世界中,她功不可没。

有关于 CSS Grid Layout 的支持情况,可以通过 Caniuse.com 查阅:

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

在我们大天朝,还需要考虑 UC 和 QQ 两大浏览器,据个人了解,在不久的版本,这两款也将支持 CSS Grid Layout 模块。虽然,CSS Grid Layout 得到了众多浏览器的默认支持,但每个浏览器对模块中的所有属性支持力度略有偏差,不过一些常见的特性已经可以使用。

如果你从未接触过 CSS Grid Layout,或者说想感受一下其强大的布局特性,建议你点击这里进行了解。因为这里有 CSS Grid Layout 的最全面教程。

客户端

前面说的都是 CSS Grid Layout 的发展,从而也得知他在现代浏览器中得到了一定程度的支持。但这篇文章并不是探讨其在浏览器的支持情况,主要想聊聊他在客户端布局中的发展以及使用情况。

首先要说明一下,这里的客户端指的是我们的移动端开发,常见的移动端开发有 Native APP、Hybrid APP 和 H5(移动端 Web 页)。为了能更好的节约开发成本,现在有一些优秀的 Web 运用,只需要在一套程序上开发,就能支持三端(Android、iOS 和 H5)。最常见的有:

  • ReactNative
  • WEEX
  • NativeScript
  • Ionic

“一次构建,多处运行”,跨平台 APP 带着这股风潮把火烧到了前端,为开发者带来无尽的遐想。现有的流行跨平台框架有以下:

  • 基于单 WebView 的开发框架。开发者可以使用现有的最新 web 技术,开发出单页面 web 应用。同时利用 JSBridge ,又能获取原生的 API ,从而使 web 应用具有了原生应用的功能。Cordova+IONIC 可以说是这个潮流的代表,也是跨平台 APP 的先锋。然而这类跨平台应用的缺点是不流畅,在安卓手机上体验较差。
  • Hybrid 方向。也就是原生应用配合 HTML5 技术,让 APP 具有了部分跨平台的功能。Hybrid 也是现在各大互联网企业采用较多的跨平台开发方式。这类 APP 在体验上优于单 WebView 的 APP ,并且能够极大提高开发效率。然而这种方式离“一次构建,多处运行”的设想还是有很大距离,毕竟依然需要针对不同的移动平台进行原生开发。
  • 使用 JavaScript 开发纯原生应用。既然单 WebView 性能有缺憾,Hybrid 技术栈又比较高,那么 JavaScript 开发纯原生应用就孕育而生。这个方向的代表有 ReactNative, Weex 和我们今天的主角–NativeScript。

不过我们要讨论的不是这些运用程序怎么使用,只是借机探讨一下,这些运用对 CSS Grid Layout 模块支持力度。

布局

基本的概念是我们有不同的布局视图(Layout Views),也有人称之为布局容器(Layout Containers),容器里可以有一个或多个子容器。每个布局容器都有自己的逻辑,用于指定子容器在自身内部的布局方式。

常见的布局方式有:

Absolute Layout

<AbsoluteLayout>     
<Button text="Left: 10, Top: 5" left="10" top="5" height="42" width="230" 
backgroundColor="#0099CC"></Button>     
<Button text="Left: 15, Top: 50" left="15" top="50" height="190" width="160" 
backgroundColor="#C3C3E5"></Button>     
<Button text="Left: 185, Top: 50" left="185" top="50" height="90" width="170" 
backgroundColor="#CCFFFF"></Button>     
<Button text="Left: 70, Top: 200" left="70" top="200" height="50" width="230" 
backgroundColor="#8C489F"></Button> 
</AbsoluteLayout> 

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

Dock Layout

<DockLayout stretchLastChild="true">     
<Button dock="left" text="left" style="background-color: #0099CC; 
margin: 5;"></Button>     
<Button dock="right" text="right" style="background-color: #8C489F; 
margin: 5;"></Button>     
<Button dock="bottom" text="bottom" style="background-color: #AA0078;
margin: 5;"></Button>     
<Button dock="top" text="top" style="background-color: #B3B3D7; 
margin: 5;"></Button>     
<Button text="fill" style="background-color: #CCFFFF; 
margin: 5;"></Button> 
</DockLayout> 

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

Grid Layout

<GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton>     
<Button text="1" style="background-color: #0099CC; margin: 5;"></Button>     
<Button text="2" col="1" style="background-color: #FFFF66; 
margin: 5;"></Button>     
<Button text="3" col="2" rowSpan="2" style="background-color: #AA0078; 
margin: 5;"></Button>     
<Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: #8C489F; 
margin: 5;"></Button>     
<Button text="5" row="2" col="2" style="background-color: #CCFFFF; 
margin: 5;"></Button>     
<Button text="6" row="3" colSpan="3" style="background-color: #0099CC; 
margin: 5;"></Button> 
</GridLayout> 

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

Stack Layout

<StackLayout orientation="horizontal">     
<Button text="Button 1" backgroundColor="#0099CC" width="100" margin="2">
</Button>     
<Button text="Button 2" backgroundColor="#CCFFFF" width="100" margin="2">
</Button>     
<Button text="Button 3" backgroundColor="#8C489F" width="100" margin="2">
</Button> 
</StackLayout> 

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

Wrap Layout

<WrapLayout>     
<Button text="1" width="150" height="100" style="background-color: #0099CC; 
margin: 5;"></Button>     
<Button text="2" width="100" height="150" style="background-color: #FFFF66; 
margin: 5;"></Button>     
<Button text="3" width="200" height="120" style="background-color: #8C489F; 
margin: 5;"></Button>     
<Button text="4" width="100" height="50" style="background-color: #CCFFFF; 
margin: 5;"></Button>     
<Button text="5" width="250" height="100" style="background-color: #AA0078; 
margin: 5;"></Button> 
</WrapLayout> 

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

实际上,在使用的时候可以将多种布局结合起来,比如制作一个计算器,我们可以看看它用到的布局方式:

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

布局方式有多种,但在这里只来说说 CSS Grid Layout 布局。

首先来看 Ionic,它里面也有 Grid 布局一说,但这里所说的 Grid 并不是原生的 CSS Grid Layout 模块。实际实现方法依旧是通过早期float的和 12 列网格规则计算出来的一种模拟网格。随着 Flexbox 的出现,采用 flexbox 替代浮动布局。从这种角度来说,可以使用 CSS Grid Layout,但在构建出 Android 和 iOS 平台的布局时,就得看底层是否支持这样的转换。到目前为止还未看到相关的介绍。

另外就是来看 ReactNative 和 WEEX 两个运用程序。在他们各自的官网都说支持 Grid 布局。

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

但事实上,他们所说的 Grid 也是使用 Flexbox 来模拟的 Grid 布局:

<Grid>     <Col style={{ width: 40 }}> Fixed width </Col>     <Col> <Text> Fluid width </Text> </Col> </Grid> 

最后再来看 NativeScript 运用程序。在 NativeScript 中有一个布局方式Grid Layaout

<GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton>     
<Button text="1" style="background-color: #0099CC; 
margin: 5;"></Button>     
<Button text="2" col="1" style="background-color: #FFFF66; margin: 5;">
</Button>     
<Button text="3" col="2" rowSpan="2" style="background-color: #AA0078; 
margin: 5;"></Button>     
<Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: #8C489F; 
margin: 5;"></Button>     
<Button text="5" row="2" col="2" style="background-color: #CCFFFF; 
margin: 5;"></Button>     
<Button text="6" row="3" colSpan="3" style="background-color: #0099CC; 
margin: 5;"></Button> 
</GridLayout> 

其采用的是 CSS Grid Layout 布局原理。到写这篇文章的时候,对行、列已经得到很好的支持。而且 NativeScript 是原生的 JavaScript 开发,言外之意,可以在原基础上对 CSS Grid Layout 功能特性进行扩展。

事实上,CSS Grid Layout 功能特性非常的多,如果要把整个 Web 功能移植到 Native 布局中,应该会具有较大的工作量,成本也不会太低。但对于支持 CSS Grid Layout 下面的一些特性应该还是不难:

  • grid-template-rows/grid-template-columns 定义行和列
  • grid-row/grid-column 来指定网格项目位置

其实有上面这两个特性,你就能很好的实现一些网格布局,比如下面的计算器:

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

如果在底层能实现frrepeat()等特性,那还可以自动化计算出网格的布局,而且灵活性也非常的强大。

相比之下,目前也就只有 NativeScript 支持真正的 CSS Grid Layout 模块,虽然也只支持部分特性。但对于 APP 中的一些布局也足够使用。特别是面对一些二维的九宫格布局,显得更为简便。

手淘可以采用 Grid 布局?

其实一直在思考,手淘首页可以采用 Grid 布局?

研究 Grid Layout 在原生客户端中运用 CSS 实例 demo

首先来说 iOS,采用的是 Safari 浏览器内核,目前 Safari10+开始对 CSS Grid Layout 模块支持;对于 Android 而言,采用的是 UC 的内核,据相关消息,UC 在下一个版本将会对 CSS Grid Layout 支持。这样一来就 H5 而言,不久就可以尝试采用 CSS Grid Layout 来布局。

对于 Native 而言,如果 Weex 能像 NativeScript 一样从底层解决 CSS Grid Layout 的渲染,那么整个淘系的页面,使用 Grid 布局将不再只是梦想。或许,不久的某一天,你看到的手淘布局,很多都有可能采用了 CSS Grid Layout 模块中的特性来实现的。

总结

不管是 Web 布局,还是 Native APP 上的布局,在当今终端多样化的情况之下,布局都不是件易事。特别在一维布局环境之下,要实现二维布局(常说的九宫格布局)更不是易事。我相信,不久的将来,这一现象将会得到改变的,因为 Web 和 Native 两者之间的特性都是在不断的借鉴,不断的相互学习。像 CSS Grid Layout 这么优秀的 Web 布局特性,总有一天也会在 Native 中现实。只不过是时间的问题。让我们一起来期待他的到来吧。

web 前端中文站点评:

关于 Grid 的学习,这篇文章只是初步介绍了 Grid 的布局问题,接下来大家可以继续学习阅读《如何使用 CSS GRID 布局实现限宽容器全屏效果》、《CSS GRID 布局这样玩》、《CSS Grid 和 Flexbox 解决实际的布局问题》和《深入理解 FLEX 布局以及计算》,形成对比学习。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:研究 Grid Layout 在原生客户端中运用 CSS 实例 demo
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址