CODEWITHSUNDEEP
javascripttitaniumtitanium-mobile
Michael Frans
Michael Frans

Reputation: 623

How to create relative layout titanium tableViewRow for different android screen size?

i create simple table view application that display some data in tableViewRow.. for now, i only use fixed measurement here's my code :

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

in bigger screen, it can display perfectly like this: HVGA layout

but if i change my emulator screen into QVGA, it can't display like before, like this: QVGA layout

has anyone know how to create relative layout, so it can display perfectly in both small and large screen? thanks before..

Upvotes: 0

Views: 4417

Answers (5)

harsha.kuruwita
harsha.kuruwita

Reputation: 1331

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

Upvotes: 2

Alex Naspo
Alex Naspo

Reputation: 2092

Using percents will definitely help. But you should look into the layout property. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.View-property-layout

You can add a layout:'horizontal' property to the row

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

With this property set, objects will stack immediately next to each other from left to right.

Then place the three labels in a container with layout:'vertical' and a smaller left property to account for padding. Also, remove the left property from the labels (this will be taken care of for all by the parent container)

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

The row will add the entire label container (which stacks the labels directly below each other from top to bottom) directly next to the checkbox. The width and height property of TI.UI.SIZE force the object to have the width and height of it's children.

Once I began utilizing the layout property coupled with TI.UI.SIZE/Ti.UI.FILL (takes the size of it's parents) layouts became much easier :) hope this helps!

Upvotes: 1

Anand
Anand

Reputation: 5332

Michael, Take a look at the following links, it might also be useful for you

  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

Upvotes: 1

Anand
Anand

Reputation: 5332

You can use percentage value to declare the control's width and height. Just like

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

making the measurement in percentage will be effective for all screen size, it'll automatically adjust with the screen size

Upvotes: 0

HerrWalter
HerrWalter

Reputation: 632

Not sure what you are working with, but you can change the layout very nice with the responsive design technique.

Take a look at this link: http://www.html5rocks.com/en/mobile/responsivedesign/

I'm sure you'll find some good and nifty tricks.

Upvotes: 0

Related Questions