ConstraintSet JSON5 syntax

ConstraintSets have the from

  ConstraintSets :{ 
    constraintset1: {
         id_of_view_1: {
            width: {....},
            height: {....},
            top: { },
            bottom: { },
            baseline: {...}
            start: {....},
            end: {...},
            *left: {...}
            *right: {...},
            circular: {...},
            centerHorizontally: {...},
            centerVertically: {...},
            center: {...}
            *vBias: 'float'
            *hBias: 'float' 
            translationX: 'float',
            translationY: 'float',
            translationZ: 'float',
            elevation: 'float',
            alpha: '1.0',
            rotationX: '0.0'
            rotationY: '0.0'
            rotationZ: '0.0'
            scaleX: '1.0',
            scaleY: '1.0'
            visibility: 'visible/invisible/gone'
         },
        *id_of_chain: {type:'hChain', ids:['id1','id2','id3'],  style: 'packed/spread/spread_inside'}
        *id_of_chain: {type:'vChain', ids:['id1','id2','id3'],  style: 'packed/spread/spread_inside'}
        *id_of_guide: {type:'hGuideline', }
        *id_of_guide: {type:'vGuideline', }

    }

* not implemented yet

ConstraintSets section holds 1 or more ConstraintSets each labeled with a name. Each constraintset contains 1 or Constraint objects labeled with the id of the Composable.

width/height

• 'wrap' - wrap content
• 'preferWrap' - wrap content if meeting constraints
• 'spread' - fill the space define by the constraints
• 'parent' - size of parents
• percent (e.g. '25%') - percentage of the parents size
• Ratio (e.g. '16:9') - constrain this side to be the enforce the aspect ratio

top/bottom/baseline

This will constrain that side to the named id or the parent on the top, bottom, or baseline. With optional margin and gone_margin (margin to use when the id is gone.

• top: {'id/parent' , 'top/bottom/baseline'}
• top: {'id/parent' , 'top/bottom/baseline', margin}
• top: {'id/parent' , 'top/bottom/baseline', margin, gone_margin}

left/right

This is currently not implemented but this documents the intent\

This will constrain that side to the named id on the left , right. With optional margin and gone_margin (margin to use when the id is gone.

• left: {'id/parent' , 'left/right'}
• left: {'id/parent , 'left/right', margin}
• left: {'id/parent' , 'left/right', margin, gone_margin}

start/end

This will constrain that side to the named id on the start or end. With optional margin and gone_margin (margin to use when the id is gone.

• start: {'id/parent' , 'start/end'}
• start: {'id/parent' , 'start/end', margin}
• start: {'id/parent' , 'start/end', margin, gone_margin}

centerHorizontally/centerVertically

• centerHorizontally:{'id/parent'}

circular

This constrains the position of the center of this widget relative to the center of the id or parent ConstraintLayout The position will be at the angle and distance from the id/parent.

• circular: {'id/parent' , 'angle', 'distance'}

hChain

This is currently not implemented but this documents the intent

horizontal chains. arguments

• id_c: {type:'hChain',ids:['id1','id2',...]} - chain in this sequence connecting ends to parent
• id_c: {type:'hChain',ids:['id1','id2',...], { start/end :['id', 'start/end'] } } - attaching to a specific
• id_c: {type:'hChain',ids:['id1','id2',...], { style: 'packed/spread/spread_inside' } } - layout behavior of the chain

vChain

This is currently not implemented but this documents the intent

Vertical chains. arguments

• id_c: {type:'vChain',ids:['id1','id2',...]} - chain in this sequence connecting ends to parent
• id_c: {type:'vChain',ids:['id1','id2',...], { start/end :['id', 'top/bottom'] } } - attaching to a specific widget
• id_c: {type:'vChain',ids:['id1','id2',...], { style: 'packed/spread/spread_inside' } } - layout behavior of the chain

hGuideline/vGuideline

This is currently not implemented but this documents the intent

horizontal and Vertical guidelines.

• id_c: {type:'hGuideline', percent: 0.25 } - 25 percent from the top
• id_c: {type:'hGuideline', top: 32 } 32dip from the top
• id_c: {type:'vGuideline', start: 44 } - 44 dip percent from the start