Vytvářejí příjemné Codename Jeden jezdec informovat procenta

hlasů
1

Poznámka pro čtenáře: Tato otázka je specifická pro Codename One, to není o CSS, HTML nebo podobně.

Můj případ užití je upozornit uživatele, kolik jeho / její profil je kompletní. Musím zavést jezdec jako následující jeden, ale po mnoha pokusech s komponentou Slider jsem nepochopil, jak to provést. (Upřímně řečeno jsem ani nepochopil, jak se začít provádět ji a já nevím, jestli komponenta Slider je vhodné).

Šířka tohoto jezdce by měla být rovna contentPane nadřazeného formuláře. V podstatě se jedná o obdélník s malou hranice: jedna část obdélníku je barevná, druhá je bílá, v závislosti na procentu. Přes obdélníku musím procenta a text: procento a textu jsou v pevné poloze. Barva textu se mění podle barvy pozadí, jak je to uvedeno v druhém obrázku.

Děkuji za jakoukoliv pomoc.

zadejte zadejte

Položena 20/10/2018 v 12:39
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
1

To je docela snadné, s výjimkou změny barvy. Tato část vyžaduje ruční kódování grafiky. Nechtěl jsem spustit tento kód, ale to by mělo být dost blízko na to, jak by to mělo fungovat:

class ProgressSlider extends Component {
    protected Dimension calcPreferredSize() {
        return new Dimension(convert(getDisplayWidth(), 6));
    }

    public void paint(Graphics g) {
         g.setColor(0xffffff);
         g.fillRect(getX(), getY(), getWidth(), getHeight());
         g.setColor(0);
         Font f = getStyle().getFont();
         g.drawString(progressPercetage, convert(4) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.drawString(progressText, convert(10) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.setColor(RED);
         g.fillRect(getX(), getY(), getWidth() / 100 * progressPercentage, getHeight());
         g.setColor(0xcccccc);
         g.drawRect(getX(), getY(), getWidth() - 1, getHeight() - 1);
         g.clipRect(getX(), getY(), getWidth() / 100 * progressPercentage, getHeight());
         g.setColor(0xffffff);             
         g.drawString(progressPercetage, convert(4) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.drawString(progressText, convert(10) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
    }
}

To může chybět několik detailů, jako je resetování oblast oříznutí atd jsem to spustit, ale to by mělo produkovat značné míry tento výsledek, když správně naladěn. Text je vypracován dvakrát (podruhé výstřižek), který zajistí změny barvy účinek.

Odpovězeno 20/10/2018 v 19:34
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more