读书人

Titanium带Footer跟Header的页面的开发

发布时间: 2012-06-27 14:20:09 作者: rapoo

Titanium带Footer和Header的页面的开发

? ? ? ?

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

效果如下:

Titanium带Footer跟Header的页面的开发

?

?

代码如下:

// 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();
?

注意红色的部分。



读书人网 >移动开发

热点推荐