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
}
});
}