重磅推出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({
    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
    }
});

}