0

我创建了简单的表格视图应用程序，在 tableViewRow 中显示一些数据.. 目前，我只使用固定测量这是我的代码：

    function addTableView(){
        var tableData = [];
        
        for (var i = 0; i<10; i++){
            var row = Ti.UI.createTableViewRow({
                className:'forumEvent', // used to improve table performance
                rowIndex:i, // custom property, useful for determining the row during events
                selectionStyle:0,
            });
            
            var checkBox = Ti.UI.createSwitch({
                style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
                value:false,
                left:5
            }); 
            
            var lblField = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:5,
                left:80
            });
            
            var lblField2 = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:35,
                left:80
            });
            
            var lblField3 = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:65,
                left:80
            });
            
            row.add(checkBox);
            row.add(lblField);
            row.add(lblField2);
            row.add(lblField3);
            
            checkBox.addEventListener('click',function(e){
                alert(checkBox.toImage().width);
            });
            
            tableData.push(row);
        }
        
        var tempTable =  Titanium.UI.createTableView({
            data:tableData,
            editable: Titanium.Platform.osname === 'iphone' ? true : false,
            name:'Picking table'
        });
                
        return tempTable;
    }

在更大的屏幕上，它可以完美显示如下： HVGA 布局

但是如果我把我的模拟器屏幕改成QVGA，它就不能像以前那样显示了，像这样： QVGA 布局

有谁知道如何创建相对布局，以便在小屏幕和大屏幕上都能完美显示？先谢谢了。。

4

5 回答 5

2 
var _p = function(densityPixels) {
        return densityPixels * Ti.Platform.displayCaps.dpi / 160;
    }

var logoView = Ti.UI.createView({
        backgroundImage : '/images/logo.png',
        top : _p(100),
        width : _p(200),
        height : _p(360)
    });
于 2013-05-07T05:55:12.577 回答
1

使用百分比肯定会有所帮助。但是您应该查看布局属性。 http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.View-property-layout

您可以将 layout:'horizo​​ntal' 属性添加到行

        var row = Ti.UI.createTableViewRow({
            className:'forumEvent', // used to improve table performance
            rowIndex:i, // custom property, useful for determining the row during events
            selectionStyle:0,
            layout:'horizontal'
        });

使用此属性集，对象将立即从左到右彼此相邻堆叠。

然后将三个标签放置在一个容器中，其中包含 layout:'vertical' 和一个较小的 left 属性以用于填充。此外，从标签中删除 left 属性（这将由父容器处理）

        var labelContainer = Ti.UI.createView({
            layout:'vertical',
            height:Ti.UI.SIZE,
            width:Ti.UI.SIZE,
            left:5 //adjust this accordingly
        })

        var lblField = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        var lblField2 = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        var lblField3 = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        labelContainer.add()

        row.add(checkBox);
        labelContainer.add(lblField);
        labelContainer.add(lblField2);
        labelContainer.add(lblField3);
        row.add(labelContainer);

该行将直接在复选框旁边添加整个标签容器（将标签从上到下直接堆叠在彼此下方）。TI.UI.SIZE 的 width 和 height 属性强制对象具有其子对象的宽度和高度。

一旦我开始使用与 TI.UI.SIZE/Ti.UI.FILL 结合的布局属性（取其父级的大小），布局就变得容易多了:) 希望这会有所帮助！

于 2012-11-28T06:13:05.060 回答
0

不确定您正在使用什么，但是您可以使用响应式设计技术很好地更改布局。

看看这个链接： http ://www.html5rocks.com/en/mobile/responsivedesign/

我相信你会发现一些好的和漂亮的技巧。

于 2012-11-12T10:41:09.630 回答
0

您可以使用百分比值来声明控件的宽度和高度。就像

var checkBox = Ti.UI.createSwitch({
    style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
    value:false,
    left:'2%'
}); 

var lblField = Ti.UI.createLabel({
    realValue: 'Value',
    text:'Field : Value',
    font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
    color:'#222',
    top:5,
    left:'40%',
    width :'80%'
});

以百分比进行测量对所有屏幕尺寸都有效，它会根据屏幕尺寸自动调整

于 2012-11-12T11:34:01.130 回答