search

androidx / constraintlayout

ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
Apache License 2.0
1.06k stars 177 forks source link

Constraint layout swing: multiple Guidelines not working properly #765

Closed gbenroscience closed 1 year ago

gbenroscience commented 1 year ago

I am creating a desktop app in Swing and I am using constraintlayout-swing to do my layouts. When I use a single guideline in my layout code, it works. But as soon as I use multiple guidelines, it breaks... as in it does not work at all.

I set the DEBUG variable to true, and I discovered that the code that parses the layout string(JSON5) seems to be buggy.

When it prints out the guidelines, some of them come out only with their width and height attributes, all set to wrap, while the type and the percent attributes are missing altogether; whereas they were specified in the layout string.

Also, some weird nulls were printed out in place of guideline or other component names. Your help would be appreciated, greatly.

gbenroscience commented 1 year ago

If a little bit of perspective is needed, this layout string:

{
    Header: {
        exportAs: 'Desktop App Authentication Page'
    },
    vguide_frame: {
        type: 'vGuideline',
        percent: 0.624
    },
    vguide_one_pct: {
        type: 'vGuideline',
        percent: 0.01
    },
    vguide_half: {
        type: 'vGuideline',
        percent: 0.50
    },
    vguide_quarter: {
        type: 'vGuideline',
        percent: 0.25
    },
    frame_left: {
        width: 'spread',
        height: 'parent',
        start: ['parent', 'start', 0],
        end: ['vguide_frame', 'start', 0],
        top: ['parent', 'top', 0],
        translationZ: 10
    },
    frame_right: {
        width: 'spread',
        height: 'parent',
        start: ['vguide_frame', 'end', 0],
        end: ['parent', 'end', 0],
        top: ['parent', 'top', 0],
        translationZ: 11
    },

    top_left_logo: {
        width: 48,
        height: 48,
        start: ['vguide_one_pct', 'start',0],
        top: ["parent", "top", 8]

    },
    top_left_logo_img_text: {
        width: 142,
        height: 24,
        start: ["top_left_logo", "end", 8],
        centerVertically: "top_left_logo"

    },
    text_banner_left: {
        width: 'spread',
        height: 'wrap',
        start: ["vguide_quarter", "start", 0],
        end: ["vguide_half", "start", 0]
    }
}

gives the following DEBUG output:

state:
vguide_frame: { type: 'vGuideline', percent: 0.62},
vguide_one_pct: ,
vguide_half: { type: 'vGuideline', percent: 0.01},
vguide_quarter: ,
null: { },
parent: { },
frame_left: { width: 'spread', height: 'parent', start: ['parent','start'], end: ['vguide_frame','start'], top: ['parent','top'], },
vguide_frame: { width: 'wrap', height: 'wrap', },
frame_right: { width: 'spread', height: 'parent', start: ['vguide_frame','end'], end: ['parent','end'], top: ['parent','top'], },
top_left_logo: { width: 48, height: 48, start: ['vguide_one_pct','start'], top: ['parent','top', 8], },
vguide_one_pct: { width: 'wrap', height: 'wrap', },
top_left_logo_img_text: { width: 142, height: 24, start: ['top_left_logo','end', 8], centerVertically: 'top_left_logo',},
text_banner_left: { width: 'spread', height: 'wrap', start: ['vguide_quarter','start'], end: ['vguide_half','start'], },
vguide_quarter: { width: 'wrap', height: 'wrap', },
vguide_half: { width: 'wrap', height: 'wrap', },

.(ConstraintLayout.java:145) layoutContainer   Current system is:
vguide_frame: { type: 'vGuideline', percent: 0.62},
vguide_one_pct: ,
vguide_half: { type: 'vGuideline', percent: 0.01},
vguide_quarter: ,
null: { },
parent: { },
frame_left: { width: 'spread', height: 'parent', start: ['parent','start'], end: ['vguide_frame','start'], top: ['parent','top'], },
vguide_frame: { width: 'wrap', height: 'wrap', },
frame_right: { width: 'spread', height: 'parent', start: ['vguide_frame','end'], end: ['parent','end'], top: ['parent','top'], },
top_left_logo: { width: 48, height: 48, start: ['vguide_one_pct','start'], top: ['parent','top', 8], },
vguide_one_pct: { width: 'wrap', height: 'wrap', },
top_left_logo_img_text: { width: 142, height: 24, start: ['top_left_logo','end', 8], centerVertically: 'top_left_logo',},
text_banner_left: { width: 'spread', height: 'wrap', start: ['vguide_quarter','start'], end: ['vguide_half','start'], },
vguide_quarter: { width: 'wrap', height: 'wrap', },
vguide_half: { width: 'wrap', height: 'wrap', },

.(ConstraintLayout.java:157) layoutContainer   applying frame_right
.(ConstraintLayout.java:157) layoutContainer   applying frame_left
.(ConstraintLayout.java:157) layoutContainer   applying top_left_logo
.(ConstraintLayout.java:157) layoutContainer   applying top_left_logo_img_text
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 0
.(ConstraintLayout.java:190) innerMeasure       measure 638 0
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 1022
.(ConstraintLayout.java:190) innerMeasure       measure 638 1022
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 1022
.(ConstraintLayout.java:190) innerMeasure       measure 638 1022
.(ConstraintLayout.java:173) layoutContainer   applying 1042 1022
.(ConstraintLayout.java:173) layoutContainer   applying 638 1022
.(ConstraintLayout.java:173) layoutContainer   applying 48 48
.(ConstraintLayout.java:173) layoutContainer   applying 142 24
.(ConstraintLayout.java:145) layoutContainer   Current system is:
vguide_frame: { type: 'vGuideline', percent: 0.62},
vguide_one_pct: ,
vguide_half: { type: 'vGuideline', percent: 0.01},
vguide_quarter: ,
null: { },
parent: { },
frame_left: { width: 'spread', height: 'parent', start: ['parent','start'], end: ['vguide_frame','start'], top: ['parent','top'], },
vguide_frame: { width: 'wrap', height: 'wrap', },
frame_right: { width: 'spread', height: 'parent', start: ['vguide_frame','end'], end: ['parent','end'], top: ['parent','top'], },
top_left_logo: { width: 48, height: 48, start: ['vguide_one_pct','start'], top: ['parent','top', 8], },
vguide_one_pct: { width: 'wrap', height: 'wrap', },
top_left_logo_img_text: { width: 142, height: 24, start: ['top_left_logo','end', 8], centerVertically: 'top_left_logo',},
text_banner_left: { width: 'spread', height: 'wrap', start: ['vguide_quarter','start'], end: ['vguide_half','start'], },
vguide_quarter: { width: 'wrap', height: 'wrap', },
vguide_half: { width: 'wrap', height: 'wrap', },

.(ConstraintLayout.java:157) layoutContainer   applying frame_right
.(ConstraintLayout.java:157) layoutContainer   applying frame_left
.(ConstraintLayout.java:157) layoutContainer   applying top_left_logo
.(ConstraintLayout.java:157) layoutContainer   applying top_left_logo_img_text
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 1022
.(ConstraintLayout.java:190) innerMeasure       measure 638 1022
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 958
.(ConstraintLayout.java:190) innerMeasure       measure 638 958
.(ConstraintLayout.java:190) innerMeasure       measure 48 48
.(ConstraintLayout.java:190) innerMeasure       measure 142 24
.(ConstraintLayout.java:190) innerMeasure       measure 1042 958
.(ConstraintLayout.java:190) innerMeasure       measure 638 958
.(ConstraintLayout.java:173) layoutContainer   applying 1042 958
.(ConstraintLayout.java:173) layoutContainer   applying 638 958
.(ConstraintLayout.java:173) layoutContainer   applying 48 48
.(ConstraintLayout.java:173) layoutContainer   applying 142 24

Thanks

gbenroscience commented 1 year ago

I took off some time to look at it today and I think I found the bug. Here it is.

The line:

          applyGuideline(mapIdsToIdx.get(id), g);

needs to be changed to:

          applyGuideline(2*mapIdsToIdx.get(id), g);

Thanks

gbenroscience commented 1 year ago

I have submitted a PR for this fix here