Relative Layout

API Doc

You are here : > > > >

Relative Layout

layout:{
    type: 'relative'
}

Demo

In the demo below, the individual views, seekbars, form inputs etc are positioned and sized relative to each other and to its parent view.

SAMPLE

CODE

<div id="relative-container" style="position:relative;height:460px"></div>

<script type="text/javascript">
var w = new ludo.FramedView({
        title: 'Relative Layout',
        renderTo:'#relative-container',
        layout: {
            width: 400, height: 400,
            minWidth: 300, minHeight: 300,
            type: 'relative'
        },
        css:{
            margin:2,
            border: '1px solid #aaa'
        },
        id: 'relativeView',
        // This is the view for the demo
        form: {
            listeners: {
                'change': function () {
                    this.view.updatePreviews();
                }
            }
        },

        listeners: {
            'render': function () {
                this.updatePreviews();
            }
        },

        updatePreviews: function () {
            var color = this.getColorCode();
            if (this.currentColor != color) {
                ludo.get('colorPreview').getBody().css('background-color', color);
                ludo.get('colorCode').html(color);
                this.currentColor = color;

                var complementary = this.colorUtil.offsetHue(color, 180);
                ludo.get('colorPreviewComplementary').getBody().css('background-color', complementary);
                ludo.get('colorCodeComplementary').html(complementary);
            }
        },
        /* Custom function which can be called using this.getColorCode() */
        getColorCode: function () {
            if (this.colorUtil == undefined) {
                this.colorUtil = new ludo.color.Color();
            }

            return this.colorUtil.rgbCode(
                ludo.get('redSlider').val(),
                ludo.get('greenSlider').val(),
                ludo.get('blueSlider').val()
            );
        },

        children: [

            {
                id: 'greenValue',
                type: 'form.Number',
                layout: {
                    centerHorizontal: true,

                    alignParentBottom: true,
                    width: 50
                },

                linkWith: 'greenSlider'
            },
            {
                id: 'greenSlider',
                type: 'form.Seekbar',
                orientation: 'vertical',
                layout: {
                    alignLeft: 'greenValue',
                    above: 'greenValue',
                    fillUp: true,
                    width: 50

                },
                value: 144,
                minValue: 0, maxValue: 255,
                increments: 1,
                thumbColor: '#388E3C',
                negativeColor: '#388E3C'
            },
            /** Red */
            {
                id: 'redValue',
                type: 'form.Number',
                layout: {
                    leftOf: 'greenValue',
                    alignParentBottom: true,
                    width: 50,
                    height:20
                },
                linkWith: 'redSlider'
            },
            {
                id: 'redSlider',
                type: 'form.Seekbar',
                orientation: 'vertical',
                layout: {
                    alignLeft: 'redValue',
                    above: 'redValue',
                    fillUp: true,
                    width: 50

                },
                minValue: 0, maxValue: 255,
                thumbColor: '#D32F2F',
                negativeColor: '#D32F2F',
                increments: 1,
                value: 33
            },
            /** Blue */
            {
                id: 'blueValue',
                type: 'form.Number',
                layout: {
                    rightOf: 'greenValue',
                    alignParentBottom: true,
                    width: 50
                },
                linkWith: 'blueSlider'
            },
            {
                id: 'blueSlider',
                increments: 1,
                type: 'form.Seekbar',
                orientation: 'vertical',
                layout: {
                    alignLeft: 'blueValue',
                    above: 'blueValue',
                    fillUp: true,
                    width: 50

                },
                value: 22,
                thumbColor: '#1976D2',
                negativeColor: '#1976D2',
                minValue: 0, maxValue: 255,

            },
            {
                id: 'colorPreview',
                layout: {
                    type: 'relative',
                    alignParentTop: true,
                    leftOf: 'redValue',
                    fillLeft: true,
                    fillDown: true
                },
                children: [
                    {
                        id: 'colorCode',
                        elCss: {
                            border: '1px solid #EEE',
                            'border-radius': '10px'
                        },

                        css: {
                            'line-height': '20px',
                            'text-align': 'center'
                        },
                        layout: {
                            centerInParent: true,
                            width: 70,
                            height: 20
                        }

                    }
                ]
            },
            {
                id: 'colorPreviewComplementary',
                                layout: {
                                    type: 'relative',
                                    alignParentTop: true,
                                    rightOf: 'blueValue',
                                    fillRight: true,
                                    fillDown: true
                                },

                children: [
                    {
                        id: 'colorCodeComplementary',
                        elCss: {
                            border: '1px solid #EEE',
                            'border-radius': '10px'
                        },

                        css: {
                            'line-height': '20px',
                            'text-align': 'center'
                        },
                        layout: {
                            centerInParent: true,
                            width: 70,
                            height: 20
                        }

                    },
                    {
                        layout: {
                            centerHorizontal: true,
                            width: 100,
                            alignParentTop: true,
                            offsetY: 20,
                            height:20

                        },
                        elCss: {
                            border: '1px solid #EEE',
                            'border-radius': '10px',
                            'background-color': '#333',
                            color: '#EEE'

                        },
                        css: {
                            'font-size': '0.8em',
                            'text-align': 'center',
                            'line-height': '17px'
                        },
                        html: 'Complementary'

                    }
                ]
            }
        ]
    });
</script>

The relative layout is inspired by the Android relative layout. It arranges child views relative to each other. It encouraged you to use a shallow view hierarchy which can be important for performance.

To use the relative layout set layout.type to "relative"

layout: {
    type:'relative'
}

Arranging child views

type:relative is set on the parent view. The other properties of the relative layout should be set on child views.

Example: use layout.centerInParent to center a view inside it's parent view.

SAMPLE

CODE

<div style="height:250px" id="relative2"></div>
<script type="text/javascript">

var v = new ludo.FramedView({
    renderTo:'#relative2',
    title:'Relative',
    layout:{
        type:'relative',
        height:'matchParent', width:300
    },
    children:[
        {
            type:'FramedView',
            title:'Centered',
            layout:{
                width:150, height:150, centerInParent:true
            },
            html:'I am centered'
        }
    ]

});
</script>

Position attributes

Positional attributes are used to set the left, top and/or bottom right css attributes of the views.

The available attributes are listed below.

centerInParent {Boolean} - Center vertically and horizontally inside parent view.
centerHorizontal {Boolean} - Center horizontally inside parent view.
centerVertical {Boolean} - Center vertically inside parent view.
alignParentTop {Boolean} - Align at top edge of parent view.
alignParentBottom {Boolean} - Align bottom of this view with the bottom of parent view.
alignParentLeft {Boolean} - Align left in parent view.
alignParentRight {Boolean} - Right align inside parent view.
alignLeft {String} - Same left position as sibling with this id.
alignRight {String} - Same right position as sibling with this id.
alignTop {String} - Same top position as sibling with this id.
alignBottom {String} - Same bottom edge as sibling with this id.
leftOf {String} - Left of sibling view with this id.
rightOf {String} - Left of sibling view with this id.
above {String} - Above sibling view with this id.
below {String} - Below sibling view with this id.
absLeft {Number} - Absolute left position.
absRight {Number} - Absolute right position.
absTop {Number} - Absolute top position.
absBottom {Number} - Absolute bottom position.
offsetX {Number} - After positioning the view, offset left position with these number of pixels.
offsetY {Number} - After positioning the view, offset top position with these number of pixels.

Demo

SAMPLE

CODE

<div id="relative3" style="height:360px"></div>
<script type="text/javascript">
var v = new ludo.FramedView({
    renderTo:'#relative3',
    layout:{
        type:'relative',
        height:350,
        width:350
    },
    children:[
        { 
            type:'FramedView', 
            id:'child1', 
            title: 'Child 1', 
            html:"layout: { centerVertical: true, width: '30%', height:'50%' }",
            layout: { centerVertical: true, width: '30%', height:'50%' }
        },
        { 
            type:'FramedView', 
            id:'child2', 
            title: 'Child 2', 
            html:"layout: { alignParentTop: true, width: '30%', height:'50%', rightOf:'child1' }",
            layout: { alignParentTop: true, width: '30%', height:'50%', rightOf:'child1' }
        },
        { 
            type:'FramedView', 
            id:'child3', 
            title: 'Child 3', 
            html: "layout: { below: 'child2', width: '30%', height:'50%', rightOf:'child1' }",
            layout: { below: 'child2', width: '30%', height:'50%', rightOf:'child1' }
        },
        {
            type:'FramedView',
            id:'child4',
            title: 'Child 4',
            html: "layout:{ rightOf:'child3', fillRight:true, alignParentTop:true, height:'matchParent' }",
            layout:{ rightOf:'child3', fillRight:true, alignParentTop:true, height:'matchParent' }
        }

    ]

});
</script>

Size attributes

The size attributes are used to set width and height of the view.

width (Number|String) Pixel width, percentage size(example: width:"30%"), or "matchParent".
height (Number|String) Pixel height, percentage size or "matchParent".
sameWidthAs (String) Same width as sibling view with this id.
sameHeightAs (String) Same height as sibling view with this id.
fillRight (String) Span to the right edge of parent view.
fillDown (String) Span to the bottom edge of parent view.
fillUp (String) Span to top edge of parent view.
fillLeft (String) Span to left edge of parent view.
resize (Array) Make the view resizable in these directions(left|right|above|below).
minWidth (Number|String) Minimum width when resizable in pixels or percentage.
maxWidth (Number|String) Maximum width when resizable in pixels or percentage.
minHeight (Number|String) Minimum height when resizable in pixels or percentage.
maxHeight (Number|String) Maximum height when resizable in pixels or percentage.

Resize demo

SAMPLE

CODE

<div id="relative4" style="height:360px"></div>
<script type="text/javascript">
var v = new ludo.FramedView({
    renderTo:'#relative4',
    layout:{
        type:'relative',
        height:350,
        width:350
    },
    children:[
        { 
            type:'FramedView', 
            id:'child1', 
            css:{padding:4},
            title: 'Child 1', 
            html:"layout: { maxWidth:235, minWidth: 100, centerVertical: true, width: 100, height:'100%', resize:['right'] }",
            layout: { maxWidth:235, minWidth: 100, centerVertical: true, width: 100, height:'100%', resize:['right'] }
        },
        { 
            type:'FramedView', 
            id:'child2', 
            css:{padding:4},
            title: 'Child 2', 
            html:"layout: { alignParentTop: true, width: '30%', height:'100%', rightOf:'child1' }",
            layout: { alignParentTop: true, width: '30%', height:'100%', rightOf:'child1' }
        }

    ]

});
</script>

Avoid circular references

A Circular reference occurs when you have code like:

children:[
    {  id:'firstView', layout: { rightOf:'secondView' } },
    {  id:'secondView', layout: { leftOf:'firstView' } }
]

As you can see in this example, "firstView" want to be positioned relative to "secondView" while "secondView" wants to be positioned relative to "firstView". This is an error, and you will be warned in the browsers developer console when this occurs.

Back to Navigation Bar Layout

Next: Fill Layout

Generated 2016-12-02 19:27:14