Stuck on 1.9 - HELP

You must Login before you can answer or comment on any questions.

Hi guys, I'm unable to switch to 2.x SDK because I can't figure out how to convert my working 1.9 code. Here's what I'm doing:

I have a tableview with transparent rows of variable height based on content.

  • I have a tableview with background set to "transparent".
  • The tableviewrow has no background and no height defined which defaults to 'auto'
  • I add a haze view to the tableviewrow which stretches to the edge - 10 and has opacity set to .5.
  • I add labels to the tableviewrow. labels are stacked with top of the bottom label set to height+top of the previous label.

All this works well in 1.9 before the Ti.UI.SIZE and Ti.UI.FILL changes. I have not found a way to do this in 2.0.

I've tried - using vertical layout: no good. Can't get the haze to work. - using toImage().height: YIYES. Sounds awful. - using .rect and .size but they don't populate until after the layout - using postlayout callback. no good. can't add a haze post layout since I'll go into an infinite loop.

The way I see it, this is not possible in 2.x and I'm force to give up all updates because I want a variable height tableviewrow with opacity. Seems like any SDK updates should add functionality and not remove things. Or at least have a backdoor for backward compatibility.

Here's my code in summary: 

tv = new stvMod.StreamTableView({
            height : 480 - 20 - 44 - 49,
            top : 0,
            backgroundColor : 'transparent',
            separatorStyle : Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
        });
in a loop I add a bunch of rows: 
//---------------------
// add a bunch of rows 
//---------------------
 
row = Ti.UI.createTableViewRow({
        height : 'auto',
        post_id : args.id,
        post : args,
        selectedBackgroundColor : '#CCCCCC',
    });
 
row.add(Ti.UI.createView({
        opacity : .5,
        backgroundColor : 'white',
        top : 5,
        bottom : 5,
        left : 5,
        right : 5,
        borderRadius : 5,
    }));
 
content = Ti.UI.createLabel({
        width : 230,
        height : 'auto',
        top : 35,
        left : 70,
        text : args.content,
        textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
        font : __styles.fonts.M,
        color : __styles.colors.window
        // ,
        // borderColor : 'black'
    })
row.add(content);
 
var photo_top = content.top + content.height + 5;
 
photo = Ti.UI.createImageView({
            height : '200', 
            width : '200',
            left : 70,
            hires : true,
            top : photo_top,
            image : args.photo.urls.profile,
            backgroundColor : __styles.colors.imageBackground,
            borderWidth : 3,
            borderColor : __styles.colors.imageBorder,
            shadowColor : __styles.colors.imageShadow,
        });
row.add(photo);

— asked 10 months ago by Ben Dehghan
1 Comment

  • Here's how it looks like in 1.9 http://d.pr/i/ilnT

    — commented 10 months ago by Ben Dehghan

2 Answers

Accepted Answer

Hi Ben

Can you post an image of what it should look like; use something like droplr.com.

I like these sort of puzzles, especially trying to avoid all calculations, I will be on it first thing in the morning unless someone else has resolved it.

— answered 10 months ago by Malcolm Hollingsworth
answer permalink
4 Comments

  • Here's how it looks like in 1.9 http://d.pr/i/ilnT

    — commented 10 months ago by Ben Dehghan

  • Hi Ben

    I have created sample code for you that will show you how you can achieve the same results as your image (providing the blue and green parts are simply a background image).

    There are no manual calculations anywhere here, everything uses the new Ti.UI.SIZE and Ti.UI.FILL constants in combination with the property layout.

    I have left in the backgroundColor properties I use when laying out these views - so I remain sane. But I have rem'ed them out. You will need to tweak as you see fit, but hopefully you will see the merit in my efforts. 

    //Ti.UI.setBackgroundColor('#fff');
Ti.UI.setBackgroundImage('color.jpg');
 
var win = Titanium.UI.createWindow({
    title: 'PGA'
});
 
var tab1 = Titanium.UI.createTab({
    icon: 'KS_nav_ui.png',
    title: 'Events',
    window: win
});
 
var data = [
    { title: 'Ben Dehghan 1', subtitle: 'This might be the one!', time: '13h', photo: 'logo.png' },
    { title: 'Ben Dehghan 2', subtitle: 'Go Tiger!', time: '12h', photo: 'logo.png' },
    { title: 'Ben Dehghan 3 - long name 1 2 3 goes here', subtitle: 'This is the really long subtitle to 1 2 3 see what happens here', time: '12h', photo: 'logo.png' }
];
var intRow = 0, intRows = data.length, row, rows = [], intPadding = 5;
var imgPhoto, lblTitle, lblSubtitle, lblTime, viewBack, viewPanel;
for (intRow = 0; intRow < intRows; intRow = intRow + 1) {
    row = Ti.UI.createTableViewRow({
        backgroundColor: 'transparent',
        height: Ti.UI.SIZE,
        width: Ti.UI.FILL
    });
    viewBack = Ti.UI.createView({
        //backgroundColor: 'orange',
        backgroundColor: '#88ffffff',
        borderRadius: intPadding,
        bottom: intPadding,
        height: Ti.UI.SIZE,
        layout: 'horizontal',
        left: intPadding,
        right: intPadding,
        top: intPadding,
        width: Ti.UI.FILL
    });
    row.add(viewBack);
    imgPhoto = Ti.UI.createImageView({
        bottom: intPadding,
        borderRadius: intPadding,
        height: Ti.UI.SIZE,
        image: data[intRow].photo,
        left: intPadding,
        top: intPadding,
        width: Ti.UI.SIZE
    });
    viewBack.add(imgPhoto);
    viewPanel = Ti.UI.createView({
        //backgroundColor: 'pink',
        bottom: intPadding,
        height: Ti.UI.SIZE,
        left: intPadding,
        top: intPadding,
        width: Ti.UI.FILL
    });
    viewBack.add(viewPanel);
    viewTitles = Ti.UI.createView({
        //backgroundColor: 'silver',
        bottom: intPadding,
        height: Ti.UI.SIZE,
        layout: 'vertical',
        left: intPadding,
        right: 35,
        top: 0,
        width: Ti.UI.SIZE
    });
    viewPanel.add(viewTitles);
    lblTitle = Ti.UI.createLabel({
        //backgroundColor: 'yellow',
        font: {
            fontSize: 14,
            fontWeight: 'bold'
        },
        height: Ti.UI.SIZE,
        left: 0,
        text: data[intRow].title,
        top: 0,
        width: Ti.UI.SIZE
    });
    viewTitles.add(lblTitle);
    lblSubtitle = Ti.UI.createLabel({
        //backgroundColor: 'yellow',
        font: {
            fontSize: 14,
            fontWeight: 'normal'
        },
        height: Ti.UI.SIZE,
        left: 0,
        text: data[intRow].subtitle,
        top: intPadding,
        width: Ti.UI.SIZE
    });
    viewTitles.add(lblSubtitle);
    viewSide = Ti.UI.createView({
        //backgroundColor: 'green',
        height: Ti.UI.SIZE,
        right: intPadding,
        top: intPadding,
        width: Ti.UI.SIZE
    });
    viewPanel.add(viewSide);
    lblTime = Ti.UI.createLabel({
        //backgroundColor: 'purple',
        color: '#666',
        font: {
            fontSize: 14,
            fontWeight: 'normal'
        },
        height: Ti.UI.SIZE,
        text: data[intRow].time,
        top: 0,
        width: Ti.UI.SIZE
    });
    viewSide.add(lblTime);
    rows.push(row);
}
 
var tbl = Ti.UI.createTableView({
    backgroundColor: 'transparent',
    data: rows,
    height: Ti.UI.FILL,
    separatorStyle : Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
    width: Ti.UI.FILL
});
win.add(tbl);
 
var tabGroup = Titanium.UI.createTabGroup();
tabGroup.addTab(tab1);
tabGroup.open();

    — commented 10 months ago by Malcolm Hollingsworth

  • Sir Malcolm, I bow to your superior skill and your generosity with your time. That worked beautifully :)

    — commented 10 months ago by Ben Dehghan

  • Show 1 more comment

Ti.UI.SIZE ist the equivalent for 'auto', did you try that?

— answered 10 months ago by Alexander Bauer
answer permalink
3 Comments

  • I've tried

    • using vertical layout: no good. Can't get the haze to work.
    • using toImage().height: YIYES. Sounds awful.
    • using .rect and .size but they don't populate until after the layout
    • using postlayout callback. no good. can't add a haze post layout since I'll go into an infinite loop.

    — commented 10 months ago by Ben Dehghan

  • I read that... if SIZE wont help then use the postLayout Event and once you got your values put a flag on the particular object like obj._gotSize = true and evaluate it with if to preven infinite Loop.

    — commented 10 months ago by Alexander Bauer

  • There has to be a better way than to run through 2 callbacks for each row. Also that will make the screen flash as you change the layout in post layout.

    This is why I stayed on 1.9 because the solution on 2.x seems like a major hack.

    — commented 10 months ago by Ben Dehghan

Your Answer

Think you can help? Login to answer this question!