如何为不同的android屏幕尺寸创建相对布局钛tableViewRow？

Question

我创建了简单的表格视图应用程序，在 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;
    }

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

但是如果我将我的模拟器屏幕更改为 QVGA，它就不能像以前那样显示，像这样：

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

Answer 1

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)
    });

Answer 2

迈克尔，看看下面的链接，它可能对你也有用

1. Titanium handling different resoutions
2. http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html
3. https://wiki.appcelerator.org/display/guides/Titanium+2.0+Layout+Changes

Answer 3

使用百分比肯定会有所帮助。但是您应该查看布局属性。 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 结合的布局属性（获取其父级的大小），布局变得更加容易:) 希望这会有所帮助！

Answer 4

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

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

我相信你会找到一些很好的技巧。

Answer 5

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

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%'
});

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