🎨 Budowanie UI

Przykłady budowania interfejsów użytkownika z AndroidModule.

Kalkulator BMI

use "android";

let root = getRootView();

let title = createView("text", {
    text: "📊 Kalkulator BMI",
    textSize: 24,
    bold: true,
    gravity: "center"
});

let weightInput = createView("input", {
    hint: "Waga (kg)",
    inputType: "number"
});

let heightInput = createView("input", {
    hint: "Wzrost (cm)",
    inputType: "number"
});

let resultText = createView("text", {
    text: "",
    textSize: 20,
    gravity: "center"
});

let calcBtn = createView("button", {
    text: "Oblicz BMI",
    onClick: fn() {
        let weight = toNumber(getText(weightInput));
        let height = toNumber(getText(heightInput)) / 100;

        if (height > 0 && weight > 0) {
            let bmi = weight / (height * height);
            let category = when bmi {
                n if n < 18.5 -> "Niedowaga",
                n if n < 25 -> "Norma",
                n if n < 30 -> "Nadwaga",
                _ -> "Otyłość"
            };
            setText(resultText, `BMI: ${round(bmi * 10) / 10}\n${category}`);
            animate(resultText, "pulse", 300);
        }
    }
});

addViewTo(root, title);
addViewTo(root, createView("spacer", {size: 20}));
addViewTo(root, weightInput);
addViewTo(root, heightInput);
addViewTo(root, calcBtn);
addViewTo(root, createView("spacer", {size: 16}));
addViewTo(root, resultText);
        

Lista zakupów

use "android";

let root = getRootView();
let items = [];

let input = createView("input", {hint: "Dodaj produkt..."});
let list = createView("column", {});

fn addItem() {
    let text = getText(input);
    if (size(text) == 0) return;

    let row = createView("row", {gravity: "center_vertical"});

    let checkbox = createView("checkbox", {});
    let label = createView("text", {text: text});
    let delBtn = createView("button", {
        text: "❌",
        onClick: fn() { removeView(row); }
    });

    onCheckedChanged(checkbox, fn(checked) {
        setAlpha(label, checked ? 0.4 : 1);
    });

    addViewTo(row, checkbox);
    addViewTo(row, label);
    addViewTo(row, delBtn);
    addViewTo(list, row);
    animate(row, "slideInLeft", 200);
    setText(input, "");
}

let addBtn = createView("button", {text: "➕ Dodaj", onClick: addItem});

addViewTo(root, createView("text", {text: "🛒 Lista zakupów", textSize: 22}));
addViewTo(root, input);
addViewTo(root, addBtn);
addViewTo(root, list);
        

Kolorowy timer

use "android";
use "async";
use "color";

let root = getRootView();
let seconds = 0;
let running = false;
let timerId = null;

let display = createView("text", {
    text: "00:00",
    textSize: 64,
    gravity: "center",
    textColor: "#6200EE"
});

fn updateDisplay() {
    let mins = floor(seconds / 60);
    let secs = seconds % 60;
    let text = padStart(toString(mins), 2, "0") + ":" +
               padStart(toString(secs), 2, "0");
    setText(display, text);

    // Zmiana koloru co 10 sekund
    let hue = (seconds * 6) % 360;
    setTextColor(display, hsl(hue, 70, 50));
}

let startBtn = createView("button", {
    text: "▶️ Start",
    onClick: fn() {
        if (!running) {
            running = true;
            setText(startBtn, "⏸️ Pauza");
            timerId = setInterval(fn() {
                seconds = seconds + 1;
                updateDisplay();
            }, 1000);
        } else {
            running = false;
            setText(startBtn, "▶️ Start");
            clearInterval(timerId);
        }
    }
});

let resetBtn = createView("button", {
    text: "🔄 Reset",
    onClick: fn() {
        seconds = 0;
        updateDisplay();
        animate(display, "bounce", 300);
    }
});

addViewTo(root, display);
let buttons = createView("row", {gravity: "center"});
addViewTo(buttons, startBtn);
addViewTo(buttons, resetBtn);
addViewTo(root, buttons);
        