重磅推出TabLayout高级窗口组件

TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件，符合Material Design规范，可经过简单的配置为窗口实现原生的导航栏和TabBar，它将帮助您节省30%以上的重复编码工做量，同时为APP节省50%以上的系统资源开销，带来APP页面打开速度、应用性能上的总体提高，助您更快速的开发精美APP。

使用tabLayout主要优势

一、减小代码，提高开发效率
使用tabLayout只须要简单配置参数便可实现首页tabBar+frameGroup的总体布局，不用在window页面中书写header、footer标签和css样式来实现导航栏、标签栏，同时也不用考虑适配状态栏和虚拟home键。所以能够将更多时间花在具体业务的实现上面，从而提升开发效率。

二、加快打开页面速度，提高应用性能
使用tabLayout来实现导航栏时，因为导航栏是原生实现的，那么只须要打开一个window页面来实现内容页，相较于以前window+frame的结构，减小了一个webView的开销，所以大大提升了页面打开速度，而且减小了应用的内存占用。

tabLayout相关的方法请参考API文档，下面介绍tabLayout的基本使用：

◆◆实现导航栏navigationBar效果◆◆

tabLayout封装了原生的导航栏，能够方便地实现头部效果，导航栏会自动适配屏幕状态栏和沉浸式。

实现的代码只须要简单的几行：

function openNavWin(){
var param = {
name: 'nav',
url: './main_content.html',
bgColor: '#fff',
title: 'navigationBar',
navigationBar: {
rightButtons: [{
iconPath: "widget://image/more.png"
}]
}
}
api.openTabLayout(param);
}

对于导航栏上面按钮的点击事件，则能够在打开的页面中经过监听事件进行处理：

function apiready(){
api.addEventListener({
name: 'navbackbtn'
}, function(ret, err) {
alert('点击了返回按钮');
api.closeWin();
});

api.addEventListener({

}, function(ret, err) {

});
}

◆◆实现tabBar效果◆◆

tabLayout将tabBar控件和frameGroup结合到了一块儿，tabLayout会自动管理tabBar项和对应的页面，同时tabBar会自动适配底部虚拟home键。

实现的代码以下：

function openNavTabWin(){
var param = {
name: 'nav-tab',
title:'nav-tab',
bgColor:'#fff',
slidBackEnabled: false,
navigationBar: {
hideBackButton: true
},
tabBar: {
animated: true,
list: [
{
text: "微信",
iconPath: "widget://image/nav_tab_1.png",
selectedIconPath: "widget://image/nav_tab_1_on.png"
}, {
text: "通信录",
iconPath: "widget://image/nav_tab_2.png",
selectedIconPath: "widget://image/nav_tab_2_on.png"
}, {
text: "发现",
iconPath: "widget://image/nav_tab_3.png",
selectedIconPath: "widget://image/nav_tab_3_on.png"
}, {
text: "我",
iconPath: "widget://image/nav_tab_4.png",
selectedIconPath: "widget://image/nav_tab_4_on.png"
}
],
frames: [
{
title: "微信",
name: "tab_frm_1",
url: "widget://html/tab_content_1.html"
}, {
title: "通信录",
name: "tab_frm_2",
url: "widget://html/tab_content_2.html"
}, {
title: "发现",
name: "tab_frm_3",
url: "widget://html/tab_content_3.html"
}, {
title: "我",
name: "tab_frm_4",
url: "widget://html/tab_content_4.html"
}
]
}
}
api.openTabLayout(param);
}

若是须要在点击tabBar项后作其它的处理，能够监听tabitembtn事件进行处理，监听点击事件后tabBar将不会自动切换页面，须要调用setTabBarAttr方法进行切换。

function apiready(){
api.addEventListener({
name:'tabitembtn'
}, function(ret) {
console.log('点击了第'+(ret.index+1)+'项');
api.setTabBarAttr({
index: ret.index
});
});
}

打开tabBar后，能够为tabBar上面的各项设置角标，如：

function setTabBarItemDot(){ api.setTabBarItemAttr({ index: 2, badge: { text: '', radius: 5, x: 8 } }); }