auto.js app tabbar

/*
 * @Author: jackbon
 * @QQ: [email protected]
 */
"ui";

//tabs 資料
var tabs_data = {
    //tabs 背景
    bg: "#ffffff",
    selectColor: {
        //目前頁面選中顔色
        on: "#00ffff",
        //目前頁面未選中顔色
        off: "#999999"
    },
    //圖示大小
    srcSize: 24,
    //字型大小
    textSize: 12,
    //動畫縮放比例 未加入動畫效果
    zoom: 1.2,
    //是否顯示訓示器小橫條
    tabs_h: true,
    //tabs 按鈕資料
    data: [
        ["第一頁", "@drawable/ic_clear_black_48dp"],
        ["第二頁", "@drawable/ic_perm_identity_black_48dp"],
        ["第三頁", "@drawable/ic_assignment_black_48dp"],
        ["第四頁", "@drawable/ic_settings_black_48dp"],
    ],
}

//tabs按鈕 布局視圖資訊
var tabs_view = []
//tabs按鈕 目前選中按鈕
var selectView = 0;

//自定義控件 tabs按鈕
var Tabs_btn_layout = function () {
    //繼承ui.Widget
    util.extend(Tabs_btn_layout, ui.Widget);
    function Tabs_btn_layout() {
        //調用父類構造函數
        ui.Widget.call(this);
        //自定義屬性data ,定義控件的每個參數 傳入值為整數
        this.defineAttr("data", (view, attr, value, defineSetter) => {
            //擷取目前控件的參數值 tabs_data.data[value] 指派到arr數組
            arr = tabs_data.data[value]
            //設定 _text控件文本
            view._text.setText(arr[0])
            //設定 _src控件圖檔
            view._src.attr("src", arr[1])
            //把目前控件資訊集合到tabs_view數組裡面
            tabs_view[tabs_view.length] = view
            //如果目前控件為初始值 則設定控件顔色為選中顔色 selectView==value==0 
            if (value == selectView) {
                view._src.attr("tint", tabs_data.selectColor.on)
                view._text.setTextColor(colors.parseColor(tabs_data.selectColor.on))
            }
        });
    }
    Tabs_btn_layout.prototype.render = function () {
        return (
            <vertical id="_bg" w="{{device.width/tabs_data.data.length}}px" bg="{{tabs_data.bg}}" padding="0 10" gravity="center" >
                <img w="{{tabs_data.srcSize}}" id="_src" tint="{{tabs_data.selectColor.off}}" />
                <text w="auto" id="_text" textSize="{{tabs_data.textSize}}" textColor="{{tabs_data.selectColor.off}}" />
            </vertical>
        )
    }
    ui.registerWidget("tabs_btn-layout", Tabs_btn_layout);
    return Tabs_btn_layout;
}()

//自定義控件 tabs
var Tabs_layout = function () {
    util.extend(Tabs_layout, ui.Widget);
    function Tabs_layout() {
        ui.Widget.call(this);
        this.defineAttr("data", (view, attr, value, defineSetter) => {
            //周遊 tabs_data.data數組 
            for (var i = 0; i < tabs_data.data.length; i++) {
                time = i
                ui.inflate(<tabs_btn-layout data="{{time}}" />, view._tabs, true)
            }
            //根據tabs_h值設定 _color顔色
            tabs_data.tabs_h ? _color = tabs_data.selectColor.on : _color = "#00000000";
            view.tabs.selectedTabIndicatorColor = colors.parseColor(_color);//設定tabs訓示器顔色
        });
    }
    Tabs_layout.prototype.render = function () {
        return (
            <card w="*" h="auto" cardElevation="5" foreground="?selectableItemBackground">
                <horizontal id="_tabs" />
                <tabs id="tabs" />
            </card>
        )
    }
    ui.registerWidget("tabs-layout", Tabs_layout);
    return Tabs_layout;
}()

ui.layout(
    <frame>
        <vertical>
            <appbar w="*" h="auto">
                <toolbar id="toolbar" title="{{tabs_data.data[0][0]}}" />
            </appbar>
            <viewpager w="*" id="viewpager" layout_alignParentBottom="true" >
                <frame >
                    <text text="第一頁内容" textColor="black" textSize="16sp" />
                </frame>
                <frame>
                    <text text="第二頁内容" textColor="red" textSize="16sp" />
                </frame>
                <frame>
                    <text text="第三頁内容" textColor="green" textSize="16sp" />
                </frame>
                <frame>
                    <text text="第四頁内容" textColor="green" textSize="16sp" />
                </frame>
            </viewpager>
        </vertical>
        <tabs-layout data="" layout_gravity="bottom" />
    </frame>
)

ui.tabs.setupWithViewPager(ui.viewpager);//綁定ViewPager到訓示器

//頁面更改偵聽器
ui.viewpager.setOnPageChangeListener({
    //已標明頁面發生改變時觸發
    onPageSelected: function (index) {
        log("上次選中" + tabs_view[selectView]._text.text())
        //設定selectView上次頁面 圖案和字型顔色為未選中顔色 tabs_data.selectColor.off
        tabs_view[selectView]._src.attr("tint", tabs_data.selectColor.off)
        tabs_view[selectView]._text.setTextColor(colors.parseColor(tabs_data.selectColor.off))
        //設定目前頁面 圖案和字型顔色為選中顔色 tabs_data.selectColor.on
        tabs_view[index]._src.attr("tint", tabs_data.selectColor.on)
        tabs_view[index]._text.setTextColor(colors.parseColor(tabs_data.selectColor.on))
        //更改标題 title 内容
        ui.toolbar.setTitle(tabs_view[index]._text.text())
        //設定目前頁面為 index
        selectView = index
    }
})


           

效果圖