Titanium带Footer和Header的页面的开发

       

     Titanium实现Footer和Header 的方法，很简单将界面分为三部分，头部，内容，底部。分为三个View即可。

效果如下：

 

 

代码如下：

// this sets the background color of the master UIView (when there are no windows/tab groups on it)

Titanium.UI.setBackgroundColor('#000');

var win = Titanium.UI.createWindow({  

    title:'TableView的使用',

    backgroundColor:'#fff'

});

function createView()

{

    //Header

    var header = Titanium.UI.createView({

        height:'50dp',

        backgroundColor:'#000',

        top:'0dp'  //距离顶部的距离

    });

    var header_lbl = Titanium.UI.createLabel({

        text: 'Header',

        color: '#fff',

        font: {fontSize: 22, fontWeight: 'bold'},

        top:'5dp',

        height:'40dp'

    });

    header.add(header_lbl);

    win.add(header);

 

    // Table

    var data = [];

    for(var i=0; i<20; i++) {

        var row = Ti.UI.createTableViewRow({

            leftImage: '/images/KS_nav_ui.png'

        });

 

        var title = Ti.UI.createLabel({

            text: 'Row '+i,

        });

 

        row.add(title);

        row.className = 'row'+i;

 

        data.push(row);

    }

 

    var table = Ti.UI.createTableView({

        data: data,

        top:'50dp',

        bottom:'50dp',

        //This is what I used to do to include a header/footer

        // headerView: header,

        // footerView: footer

    });

     win.add(table);

 

    //Footer

    var footer = Titanium.UI.createView({

        height:'50dp',

        backgroundColor:'#000',

        bottom:'0dp'   //距离底部的距离

    });

    var footer_lbl = Titanium.UI.createLabel({

        text: 'Footer',

        color: '#fff',

        font: {fontSize: 22, fontWeight: 'bold'},

        top:'5dp',

        height:'40dp'

    });

    footer.add(footer_lbl);

    win.add(footer);

}

createView();

win.open();

 

注意红色的部分。