推荐爱码哥移动开发平台十大常用的原生UI控件

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>

推荐爱码哥移动开发平台十大常用的原生UI控件

猜你喜欢