iOS - Appcelerator : Vertical layout issue

Question

SDK Version 6.0.1.GA

I have tried to simplify my situation

• View 1 , view parent

• View 2/3 , children of view 1

• View 3 must be auto-height, so i used Ti.UI.FILL. And always at bottom 0 (of view 1).

The problem is the size of view 2. Should occupy unused space by the view 3.

I have tried several solution (for example setting layout vertical to view 1, change the top of view 2-3, change the height of view 2 to Ti.UI.SIZE/Ti.UI.FILL) , but the placement of the view 2 does not appear as in the image. I think it is not possible do what i want without knowing the height of view 3. There is a solution?

Answer 1

In one line: It's not possible to do what you want because:

• View's height is increased in downwards direction whenever we add contents in them. So View 2 can never be of Ti.UI.SIZE height along with View 3. Either View should have a finite height and other one should have top/bottom according to that height.
• Top/Bottom properties only defines where to pivot view, but not defines the way height is changed (point no.1).

We can help you more if you can provide us a more clear idea by providing some UI screen or what type of UI you exactly want to create because I have never needed to create such type of view layout, so probably there can be other approaches to fulfil your requirements.

Answer 2

Basically, your View 2 should have a top = 0 and bottom=View3.height, but your main problem is that you don't have the exact height of View 3 as it is set to Ti.UI.SIZE.

In order to accomplish this, you'll have to listen for the postlayout event of the View3 and get its exact height through the rect property.

The rect property is a read-only dictionary with the properties x, y, width and height. It provides the rendered size and position of the view, and is only available once both it and its ancestors have been fully drawn.

Here s a working code for both android and iOS:

View XML :

<Alloy>
<Window class="container">
    <Button onClick="doClick" top="30">load new text</Button>
    <ScrollView id="scrollView" top="100">
        <View height="500" backgroundColor="red">
            <Label top="0" text="top label"/>
            <Label text="middle label"/>
            <Label bottom="0" text="bottom label"/>
        </View>
    </ScrollView>
    <View id="containerDynamic" onPostlayout="postlayoutB" height="Ti.UI.SIZE" layout="vertical">
        <Label id="label_2" text=""/>
    </View>
</Window>

Tss File

".container": {
    backgroundColor:"white"
}

"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

"#label": {
    font: {
        fontSize: 12
    }
}

"#containerDynamic": {
    bottom: 0,
    backgroundColor: "lightgray"
}

"#scrollView": {
    top: 0,
    backgroundColor: "green",
    showScrollbars: true
}

JS File

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
function doClick(e) {
    var random = getRandomArbitrary(1,lorem.length);
    var text = lorem.substring(lorem.length-random, random);
    $.label_2.text = text;
}


$.index.open();

function postlayoutB(e){
    $.scrollView.bottom = e.source.rect.height
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

run this code by copying it into a fresh project (index.js, index.xml, index.tss)

understand it and then apply it to your app accordingly

I hope I could have been of some help.