精华 ionic之基本布局
发布于 6 年前 作者 2596887568 16043 次浏览 最后一次编辑是 4 年前 来自 分享

目录:

  1. 简介
    1. Hybrid vs. Others
    2. ionic
    3. CSS框架
  2. 基本布局
    1. 布局模式
    2. 定高条块:.bar
    3. .bar : 位置
    4. .bar : 嵌入子元素
    5. .bar : 嵌入input
    6. 内容:.content和.scroll-content

Hybrid vs. Others

要开发手机App,目前有三种方式:

原生/Native:使用原生SDK开发App。优点不用说,当你有足够的资源,这是最理想的方式;缺点是对不同的 平台要分别开发,成本高、周期长。 原生脚本/NativeScript:将原生API封装成JavaScript接口,这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大(据称只有10%左右),优点是开发语言统一使用JavaScript,缺点是 要针对不同的平台分别开发。 混合/Hybrid:使用web技术开发App,使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发, 避免了不同平台原生开发体系的学习,上手快、效率高;缺点是性能上有一定损失。 ionic属于hybrid开发模式,本质上是将移动web应用与浏览器打包,优点和缺点都很明显。 是否采用这种模式,需要根据具体情况综合考虑。

不过在大多数场景下,如果你已经具备一定的web开发经验,采用这种方式进入移动App开发领域,还是不错的一个选择。 毕竟,将产品低成本地开发出来并更快地推向市场,有时是最重要的事情。 0001.jpg

ionic

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:

0002.png

ionic主要包括三个部分:

CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。 JavaScript框架 - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发,因此 自然地遵循AngularJS的框架约束;此外,ionic使用AngularJS UI Router实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。 由于ionic使用了HTML5和CSS3的一些新规范,所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用,有时会发生莫名其妙的问题。

CSS框架

如果你对AngularJS这样的东西不感兴趣,可以只使用ionic的CSS框架:直接在HTML中引入 ionic.css就可以了。

ionic的CSS框架主要提供预定义的CSS类,来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分四个方面:

基本布局类 ionic将手机页面的布局模式基本抽象为三块:头、内容、尾。基本布局类提供了 这几个区域的CSS类。

颜色和图标类 ionic定义了几个配色方案CSS类,并使用ionicons提供的字体图标类。

界面组件类 ionic定义了丰富的界面组件CSS类,让HTML元素看起来像移动平台的UI组件。

栅格系统类 和Bootstrap一样,ionic也提供了栅格系统。不过ionic的实现是基于CSS3的FlexBox 模型,更为灵活。

布局模式

手机App开发实践中,用户界面通常划分为几个区域 - 标题/header、内容/content和页脚/footer。 微信采用的就是典型的三段布局:

0003.png

标题区总是位于屏幕顶部,页脚区总是位于屏幕底部,而内容区占据剩余的空间。 ionic使用以下CSS类声明区域性质:

.bar.bar-header- 声明元素为标题区 .bar.bar-footer - 声明元素为页脚区 .content- 声明元素为内容区

定高条块:.bar

样式.bar将元素声明为屏幕上绝对定位的块状区域,具有 固定的高度(44px):

<any class="bar">...</any>

一旦元素应用了.bar样式,就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观:

  1. 同级样式 - 同级样式与.bar应用在同一元素上,声明元素的位置、配色等。
  2. 下级样式 - 下级样式只能应用在.bar的子元素上,声明子元素的大小等特征。

004.png

.bar : 位置

ionic使用以下样式定义条块的位置:

.bar-header - 置顶 .bar-subheader - header之下置顶 .bar-footer - 置底 .bar-subfooter - footer之上置底 在腾讯新闻App中,你可以看到,使用了三个条块:标题、副标题、页脚:

0005.png

.bar : 嵌入子元素

ionic中,有三种.bar子元素的样式是预定义的:

标题文字 - 对包含标题文字的元素应用.title样式,通常使用h1元素: <any class=“bar”> <any class=“title”>…</any> </any> 按钮 - 对用作按钮的元素,应用.button样式,通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案: <any class=“bar”> <any class=“button”>…</any> </any> 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素,应用.button-bar样式,通常 使用div元素作为工具栏: <any class=“bar”> <any class=“button-bar”>…</any> </any>

.bar : 嵌入input

一种常见的UI模式是在标题栏中嵌入搜索栏,比如大众点评:

006.png

在.bar元素中嵌入input元素,需要注意两点:

  1. 在条块元素上应用**.item-input-inset**样式

  2. 将input包裹在应用**.item-input-wrapper样式的元素内 这是因为,在ionic的实现中,.bar中的.input** 样式定义如下:

    .bar.item-input-inset{
    	.item-input-wrapper{
    		.input{
    			...
    		}
    	}
    }
    

内容:.content和.scroll-content

ionic预定义了两个内容容器样式:

.content - 流式定位,内容元素在文档流中按顺序定位 .scroll-content - 绝对定位,内容元素占满整个屏幕 这两种样式都可以使用以下样式进一步确定位置及范围:

007png.png

参考资料: http://www.hubwiz.com/course/5507ca5be564e51314f544e4/
上面链接中还有一些实例。 ionic AngularJS

48 回复

商业公司有哪些产品是用ionic开发出来的呢?

+1 同时不知道可否邀请您在 ionichina社区 进行分享? @alsotang 请问我这种推广违反社区规定了么?如果是的话我会马上删除~

@vlover 没事没事,不是恶意的推广都欢迎:)

@vlover 自己复制过去加上原文链接就OK了。

@2596887568 嗯。。。我想要的其实是你的人,而不只是内容~~~

我们设计师给的设计ionic不能完全匹配,还要自己调节,如果自己构建产品就简单多了,可是不得不承认还是设计师设计的漂亮 自豪地采用 CNodeJS ionic

人还挺多的

有人在用这个开发了吗?

@violet- fjdjfklsdjf;sdjf;sdf

哈哈哈,好样的。看来ionic趋势大好啊

我使用ionic开发的产品已经上线了,现在感觉ngCordova是个坑! 各种坑爹BUG,准备把它去掉~

@vlover 我用他完成了产品开发,目前运行都正常!苹果审核一次过~

只用过 APICloud

@htzhanglong 视频却是不错,就是录制的时候为啥没选择保存成avi格式的呢,只能在windows上播放。。

@highsea 这都是晚辈了 phoengap 08年就开始了 sencha也很早

这个要Mark一下,一直在找关于APP布局的教程,可是一直找不到。

@mehunk 感谢支持!

┏ (゜ω゜)=☞ 必须要 Mark 了。

@imhered @sqrthree ,这么多人mk,感谢感谢。

@mehunk 你的app搞得如何了,能否再cnodejs上展示一下啊。

@2596887568 ,有是有了,特别初级,等稍微改改再来献丑哈

@mehunk 期待O(∩_∩)O哈!

@naruto900814 多谢!

@1340641314 谢谢小贝。

这文章写的很cool<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@shinygang 多谢,~(@^_^@)~。

@soliury 提额无忧 信用无忧 现在已经很多个产品了。目前运行良好!

+1

来自酷炫的 CNodeMD

回到顶部