TableView单元格使用整个屏幕高度

时间:2014-05-28 02:41:05

标签: css uitableview appcelerator

我通读了这个教程Appcelerator: Using JSON to Build a Twitter Client并试图创建我自己的简单应用程序来与我设置运行一些Spring代码的Jetty服务器进行交互。我基本上调用了一个获取http请求,它给了我一堆JSON格式的联系人。然后我用我的JSON数据填充几行并尝试构建一个TableView。

然而,所有这些都有效,我的tableView行占据了整个屏幕。每行是一个屏幕。我可以上下滚动查看我的所有数据,但是我想弄清楚我的造型有什么问题让细胞使用整个屏幕。我的CSS不是很好,所以任何帮助都表示赞赏。谢谢!

这是我的js文件正在加载tableView:

// create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;

// Function loadContacts() 
function loadContacts() {

    // empty array "rowData" for table view cells
    var rowData = [];

    // create http client
    var loader = Titanium.Network.createHTTPClient();
    // set http request method and url
    loader.setRequestHeader("Accept", "application/json");
    loader.open("GET", "http://localhost:8080/contactsample/contacts");
    // run the function when the data is ready for us to process
    loader.onload = function(){

        Ti.API.debug("JSON Data: " + this.responseText);

        // evaluate json
        var contacts = JSON.parse(this.responseText);

        for(var i=0; i < contacts.length; i++) {

            var id = contacts[i].id;
            Ti.API.info("JSON Data, Row[" + i + "], ID: " + contacts[i].id);
            var name = contacts[i].name;
            Ti.API.info("JSON Data, Row[" + i + "], Name: " + contacts[i].name);
            var phone = contacts[i].phone;
            Ti.API.info("JSON Data, Row[" + i + "], Phone: " + contacts[i].phone);
            var address = contacts[i].address;
            Ti.API.info("JSON Data, Row[" + i + "], Address: " + contacts[i].address);

            // create row
            var row = Titanium.UI.createTableViewRow({ height:'auto' });

            // create row's view
            var contactView = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 });
            var nameLbl = Titanium.UI.createLabel({
                text:name,
                left:5,
                height:24,
                width:236,
                textAlign:'left',
                color:'#444444',
                font:{
                    fontFamily:'Trebuchet MS', fontSize:16, fontWeight:'bold'
                }
            });
            var phoneLbl = Titanium.UI.createLabel({
                text: phone,
                top:0,
                bottom:2,
                height:'auto',
                width:236,
                textAlign:'right',
                font:{ fontSize:14}
            });
            var addressLbl = Titanium.UI.createLabel({
                text: address,
                top:0,
                bottom:2,
                height:'auto',
                width:236,
                textAlign:'right',
                font:{ fontSize:14}
            });
            contactView.add(nameLbl);
            contactView.add(phoneLbl);
            contactView.add(addressLbl);

            row.add(contactView);
            row.className = "item" + i;

            rowData.push(row);
        }

        Ti.API.info("RowData: " + rowData);

        // create table view
        var tableView = Titanium.UI.createTableView( { data: rowData });
        win.add(tableView);
    };

    // send request
    loader.send();

}

// get contacts
loadContacts();

这里有一些屏幕显示我的问题。我尝试使用顶部,底部,右侧,左侧像素,但似乎没有任何地方。非常感谢所有帮助。谢谢!

Single cell on iOS Simulator Showing two cells mid scroll on iOS Simulator

1 个答案:

答案 0 :(得分:0)

由于我在此处未收到回复,因此我向Titanium Appcelerator Q&amp; A网站发布了相同的问题。看来我以前学习Titanium的教程已经过时了。此后,auto标记已被弃用,现在建议使用Titanium API中包含的常量。非常感谢my other thread上的答案。

解决我的问题的答案:

  

auto已被弃用。而是使用FILLSIZE

     

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TableViewRow-property-height

     

在您的情况下,创建contactView时,请将其高度设置为   Ti.UI.SIZE。因此。视图的大小应该适合它   内容。