共计 2419 个字符，预计需要花费 7 分钟才能阅读完成。
TabLayout 是在 APICloud 现有窗口系统基础上升级而来的高级窗口组件，符合 Material Design 规范，可通过简单的配置为窗口实现原生的导航栏和 TabBar，它将帮助您节省 30% 以上的重复编码工作量，同时为 APP 节省 50% 以上的系统资源开销，带来 APP 页面打开速度、应用性能上的整体提升，助您更快速的开发精美 APP。
使用 tabLayout 主要优点
1、减少代码，提升开发效率使用 tabLayout 只需要简单配置参数即可实现首页 tabBar+frameGroup 的整体布局，不用在 window 页面中书写 header、footer 标签和 css 样式来实现导航栏、标签栏，同时也不用考虑适配状态栏和虚拟 home 键。因此可以将更多时间花在具体业务的实现上面，从而提高开发效率。
2、加快打开页面速度，提升应用性能使用 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({
name: ‘navitembtn’
}, function(ret, err) {
if (ret.type == ‘right’) {
alert(‘ 点击了右边按钮 ’);
}
});
}
◆◆实现 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
}
});
}
