imag.js是一种NativeScript形式的框架,它兼具 Web 应用的灵活和 Native 应用的高性能,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用Native抽象操作系统原生的 UI 组件,并内置一体化框架,结合 Java、.Net、php和HTML5等主流开发语言/开发环境来写XML语法。敲一次代码,能够运行在多个平台上,平台同时融合第三方原生SDK以及模板服务。
本文推荐10个常用的原生控件,希望能给移动应用开发者提供帮助。
1.文本控件label
label区别于HTML,爱码哥中文本内容必须包含在label标签之内。虽然简单,却是最常用的。同时label标签内可以嵌入简单的HTML,实现图文混排的效果。
使用示例:
<label> <![CDATA[<a href="http://baike.baidu.com/view/1168245.htm">移动互联网</a>, 就是将移动通信和互联网二者结合起来,成为一体。 <img src="emoticon_ye.png"/><br/> 在最近几年里,<font color="red">移动通信和互联网</font> 成为当今世界发展最快、市场潜力最大、前景最诱人的两大业务,它们的增长速度都是 <font color="#ABABAB"><i>任何预测家未曾预料到的</i></font>, 所以<font color="green"><u>移动互联网</u></font> 可以预见将会创造怎样的经济神话。 <img src="emoticon_geili.png"/>]]> </label>
效果图:
2.图标控件icon
icon显示资源图片或手机本地图片(注意:Icon只用来显示资源图片,显示网络图片用Image控件。)
使用示例:
<icon src="icon_tv.png" style="width:100;height:50"/>
3.标题栏控件title
title控件有且只有left、center、right这三个控件。
使用示例:
<title style="background:purple;tint-color:green"> <left> <button role="back">返回</button> </left> <center> <label>设置按钮颜色</label> </center> <right> <button>按钮</button> </right> </title>
效果图:
4.页面内容控件content
App的页面所有的内容使用的控件几乎都放在content控件里
使用示例:
<content draggable="true"> <button style="width:120">按钮</button> </content>
5.列表布局控件list
list控件的子标签是item,item的子控件是col.
list有plain, group, transparent, toolbar四种类型。
其中plain是默认的扁平风格的列表,group是分组列表。
transparent是透明风格的列表,plain和group类型的列表都有默认的边线和背景,而transparent则是把这些边线和背景去掉了的,这样可以在transparent类型的列表上设置新的背景。
toolbar类型的列表主要用于定制工具栏,toolbar类型的列表也是透明的,toolbar和transparent的区别是transparent列表内部有默认的边距,而toolbar列表则把item里默认的margin和padding也去掉了。
使用示例:
<list type="group"> <item accessory="indicator" style="col-width:*,100;"> <col> <row> <label>标题</label> </row> <row> <label style="color:gray">副标题</label> </row> </col> <col> <row> <label style="color:blue;align:right;font-size:14">2012-05-01</label> </row> </col> </item> </list>
*复用列表
复用列表(resue list)是不同于普通列表的另外一种列表,使用复用列表是为了优化性能,在大数据的情况下(上千个item)避免因内存占用过多而导致系统崩溃。这是因为在移动应用中view(视图)是很耗费系统资源的一个对象,过多的view(几千个,view所占内存大小取决于view的面积)可能会引起内存不足而崩溃,同时一次性加载这么多view也会花费很长的时间。
对此相应的解决方案是使用reuse list,reuse list的原理是只创建一屏幕显示的view对象,当view被滚动超出屏幕之后就会被用来复用,因此始终只会占用一屏幕view的内存, 有效地解决了内存不足而引起崩溃的问题, 同时因为实际创建的view个数较少,具有很快的加载速度。
使用示例:
<?xml version="1.0" encoding="utf-8"?> <imag> <script> <![CDATA[ function initList() { var listJson = {items:[]}; for (var i = 0; i < 1000; i++) { var itemJson = { template:0, onclick:'alert("item' + i + '")', widgets:{ title:{text:'标题' + i}, subtitle:{text: '副标题' + i} } } listJson.items.push(itemJson); } $('resuelist').update(listJson); } $page.onload = function() { initList(); } ]]> </script> <page> <title> <center> <label>reuse list</label> </center> </title> <content> <list id="resuelist" reuse="true"> <item accessory="indicator"> <label reusekey="title"></label> <label style="color:gray" reusekey="subtitle"></label> </item> </list> </content> </page> </imag>
6.标签页控件tabs
使用示例:
<?xml version="1.0" encoding="utf-8"?> <imag> <page> <tabs> <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="label-color:#999999,#46c01b"> <title> <center> <label>微信</label> </center> </title> <content draggable="true"> <list type="group"> <item> <label>微信</label> </item> </list> </content> </tab> <tab label="通信录" icon="tab_category_normal.png,tab_category_selected.png" style="label-color:#999999,#46c01b"> <title> <center> <label>通信录</label> </center> </title> <content draggable="true"> <list type="group"> <item> <label>通信录</label> </item> </list> </content> </tab> <tab label="发现" icon="tab_service_normal.png,tab_service_selected.png" style="label-color:#999999,#46c01b"> <title> <center> <label>发现</label> </center> </title> <content draggable="true"> <list type="group"> <item> <label>发现</label> </item> </list> </content> </tab> <tab label="我" icon="tab_mine_normal.png,tab_mine_selected.png" style="label-color:#999999,#46c01b"> <title> <center> <label>我</label> </center> </title> <content draggable="true"> <list type="group"> <item> <label>我</label> </item> </list> </content> </tab> </tabs> </page> </imag>
效果图:
7.网格布局控件grid
使用示例:
<grid> <item icon="tab_weixin_normal.png"><label>微信</label></item> <item icon="tab_address_normal.png"><label>通信录</label></item> <item icon="tab_find_frd_normal.png"><label>找朋友</label></item> <item icon="tab_settings_normal.png"><label>设置</label></item> </grid>
效果图:
8.弹出菜单控件PopupMenu
popupmenu类似于content控件,可以在里面添加list,grid,screens等其他控件,不过一开始是隐藏的,要通过open()方法显示,弹出菜单可以显示在多个不同位置。
使用示例:
<?xml version="1.0" encoding="utf-8"?> <imag> <script> <![CDATA[ function openPopupMenu() { $('test_popupmenu').open(); } ]]> </script> <page> <title> <center> <label>弹出菜单居中</label> </center> </title> <popupmenu id="test_popupmenu" position="center" onclose="hint('onclose');"> <list> <item onclick="$('test_popupmenu').close();hint('复制')"> <label>复制</label> </item> <item onclick="$('test_popupmenu').close();hint('收藏')"> <label>收藏</label> </item> <item onclick="$('test_popupmenu').close();hint('翻译')"> <label>翻译</label> </item> <item onclick="$('test_popupmenu').close();hint('举报')"> <label>举报</label> </item> </list> </popupmenu> <content> <button onclick="openPopupMenu();">弹出菜单</button> </content> </page> </imag>
效果图:
9.按钮控件button
使用示例:
<button style="background:#3E86D7,#2873C2;padding:10;corner-radius:8;width:120;color:white;font-size:14" onclick="hint('自绘按钮')">自绘按钮</button>
效果图:
10.侧滑菜单栏SlidingMenu
slidingmenu用来显示侧滑菜单,SlidingMenu包括两个item,第一个item是左边的菜单项,第二个item是右边的内容。
左边的菜单项一开始是隐藏的,可以调用open()方法打开。
使用示例:
<slidingmenu id="slidingmenu"> <item> <content style="background:#666666"> <list> <item style="background:#333333"> <label style="color:white">头条</label> </item> <item style="background:#333333"> <label style="color:white">体育</label> </item> <item style="background:#333333"> <label style="color:white">娱乐</label> </item> <item style="background:#333333"> <label style="color:white">财经</label> </item> <item style="background:#333333"> <label style="color:white">科技</label> </item> </list> </content> </item> <item> <title> <left> <button onclick="$('slidingmenu').open()">打开</button> </left> <center> <label>SlidingMenu</label> </center> </title> <content style="background:white"> <label>内容</label> </content> </item> </slidingmenu>