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

在更大的屏幕中，它可以完美地显示如下： HVGA layout

但如果我将我的模拟器屏幕更改为QVGA，则无法像以前一样显示，如下所示： QVGA layout

有谁知道如何创建相对布局，所以它可以在小屏幕和大屏幕上完美显示？谢谢你..

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

迈克尔，看看以下链接，它可能对你有用

Answer 3

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

您可以添加布局：'水平'属性到行

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

设置此属性后，对象将从左到右紧挨着堆叠。

然后将三个标签放在一个带有布局的容器中：'vertical'和一个较小的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%'
});

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

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

5 个答案: