📐 ConstraintLayout

Tworzenie ConstraintLayout

let constraint = createView("constraint", {
    width: "match",
    height: "match"
});
        

Constraints

// Podstawowe constrainty
constrainToParent(viewId, "top", 16);      // Góra do rodzica
constrainToParent(viewId, "bottom", 16);   // Dół do rodzica
constrainToParent(viewId, "start", 16);    // Lewo do rodzica
constrainToParent(viewId, "end", 16);      // Prawo do rodzica

// Centrowanie
constrainCenterHorizontally(viewId);
constrainCenterVertically(viewId);
constrainCenter(viewId);

// Między widokami
constrainBelow(viewId, otherViewId, 8);    // Pod innym widokiem
constrainAbove(viewId, otherViewId, 8);    // Nad innym widokiem
constrainStartToEnd(viewId, otherId, 8);  // Obok
constrainEndToStart(viewId, otherId, 8);  // Przed
        

Łańcuchy (chains)

// Poziomy łańcuch
createHorizontalChain([btn1, btn2, btn3], "spread");

// Pionowy łańcuch
createVerticalChain([text1, text2, text3], "packed");

// Style: "spread", "spread_inside", "packed"
        

Guidelines

// Pozioma guideline w 50% wysokości
let guideline = createGuideline(constraintId, "horizontal", 0.5);

// Pionowa guideline 100dp od lewej
let guide2 = createGuidelineAbsolute(constraintId, "vertical", 100);

// Constraint do guideline
constrainToGuidelineTop(viewId, guideline, 8);
        

Barrier

// Bariera na dole grupy widoków
let barrier = createBarrier(constraintId, "bottom", [view1, view2, view3]);

// Constraint do bariery
constrainBelow(button, barrier, 16);
        

Przykład

let container = createView("constraint", {width: "match", height: "match"});
addViewTo(root, container);

let title = createView("text", {text: "Nagłówek", textSize: 24});
let input = createView("input", {hint: "Email"});
let button = createView("button", {text: "Submit"});

addViewTo(container, title);
addViewTo(container, input);
addViewTo(container, button);

constrainCenterHorizontally(title);
constrainToParent(title, "top", 32);

constrainBelow(input, title, 16);
constrainToParent(input, "start", 16);
constrainToParent(input, "end", 16);

constrainBelow(button, input, 24);
constrainCenterHorizontally(button);
        