推薦imag.js移動開發平臺十個常用的原生UI控件

imag.js是一種NativeScript形式的框架，它兼具 Web 應用的靈活和 Native 應用的高性能，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用Native抽象操作系統原生的 UI 組件，並內置一體化框架，結合 Java、.Net、php和HTML5等主流開發語言／開發環境來寫XML語法。敲一次代碼，能夠運行在多個平臺上，平臺同時融合第三方原生SDK以及模板服務。
本文推薦10個常用的原生控件，希望能給移動應用開發者提供幫助。
[b]1.文本控件label[/b]
[url=http://www.imagapp.com/doc/label]label[/url]區別於HTML，愛碼哥中文本內容必須包含在label標籤之內。雖然簡單，卻是最常用的。同時label標籤內可以嵌入簡單的HTML，實現圖文混排的效果。
使用示例：

<label>
    <![CDATA[[url=http://baike.baidu.com/view/1168245.htm]移動互聯網[/url]，
        就是將移動通信和互聯網二者結合起來，成爲一體。
        <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>

效果圖：
[img]http://chuantu.biz/t5/16/1467949594x3738746559.png[/img]
[b]2.圖標控件icon [/b]
[url=http://www.imagapp.com/doc/icon]icon[/url]顯示資源圖片或手機本地圖片（注意：Icon只用來顯示資源圖片，顯示網絡圖片用Image控件。）
使用示例：

<icon src="icon_tv.png" style="width:100;height:50"/>

[b]3.標題欄控件title[/b]
[url=http://www.imagapp.com/doc/title]title[/url]控件有且只有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>

效果圖：
[img]http://chuantu.biz/t5/16/1467949972x3738746523.jpg[/img]
[b]4.頁面內容控件[/b][url=http://www.imagapp.com/doc/content]content[/url]
App的頁面所有的內容使用的控件幾乎都放在content控件裏
使用示例：

<content draggable="true">
    <button style="width:120">按鈕</button>
</content>

[b]5.列表佈局控件list[/b]
[url=http://www.imagapp.com/doc/list]List[/url]控件的子標籤是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>

[b]6.標籤頁控件[/b][url=http://www.imagapp.com/doc/tabs]tabs[/url]
使用示例：

<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>

效果圖：
[img]http://chuantu.biz/t5/16/1467950234x3738746523.jpg[/img]
[b]7.網格佈局控件[/b][url=http://www.imagapp.com/doc/grid]grid[/url]
使用示例：

<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>

效果圖：
[img]http://chuantu.biz/t5/16/1467950345x3738746523.png[/img]
[b]8.彈出菜單控件PopupMenu [/b]
[url=http://www.imagapp.com/doc/popupmenu]popupmenu[/url]類似於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>

效果圖：
[img]http://chuantu.biz/t5/16/1467950542x3738746523.jpg[/img]
[b]9.按鈕控件[/b][url=http://www.imagapp.com/doc/button]button[/url]
使用示例：

<button style="background:#3E86D7,#2873C2;padding:10;corner-radius:8;width:120;color:white;font-size:14" onclick="hint('自繪按鈕')">自繪按鈕</button>

效果圖：
[img]http://chuantu.biz/t5/16/1467950738x3738746523.jpg[/img]
[b]10.側滑菜單欄SlidingMenu [/b]
[url=http://www.imagapp.com/doc/slidingmenu]SlidingMenu[/url] 用來顯示側滑菜單，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>