文档章节

推荐imag.js移动开发平台十大常用的原生UI控件

勤奋的小菜鸟
 勤奋的小菜鸟
发布于 2016/07/06 18:57
字数 1695
阅读 50
收藏 6

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 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 使用示例:

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

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>

© 著作权归作者所有

勤奋的小菜鸟
粉丝 4
博文 19
码字总数 13680
作品 0
普陀
程序员
私信 提问
JS延伸到移动端,原生app开发的春天来了(程序员须知)

本文来自爱码哥CTO邱杨(Terry)同学,微信公众号“爱码哥”(微信公众号:iMAG_app) 随着HTML5和Node.js的流行,Javascript这门在互联网初期就已诞生的语言正迸发出勃勃生机,Javascript将前端...

很高兴遇见你
2016/03/08
1
0
Xamarin.Forms探索--使用 Xamarin.Forms 来创建跨平台的用户界面

Xamarin.Forms 是一个跨平台的、基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面。与HTML 5 不同的时,Xamarin.Forms 通过使用平台的原生...

葡萄城控件技术团队
2015/03/05
1K
0
十大技巧快速提升原生APP开发性能

移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点。现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何...

wojiu9712
2016/02/26
410
0
十大技巧快速提升原生APP开发性能

移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点。现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何...

wojiu9712
2016/02/25
0
0
你必须要知道的10款APP开发框架

  对于大部分Web开发人员,HTML、CSS和 Java是他们最熟练的开发技能。然而,开发一个原生的移动App,对他们来说却是完全陌生的领域。因为开发Android,iOS 或 Windows Phone上的原生App,需...

程序员客栈
2016/06/20
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 开发语言和语言开发的能一样么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌:#今日歌曲推荐# 分享The Score的单曲《Revolution》 《Revolution》- The Score 手机党少年们想听歌,请使劲儿戳(这里) @批判派...

小小编辑
今天
1K
15
oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
3
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
2
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部