Własne malunki w LWUIT
2009-06-04 08:30
W aplikacji, którą opisałem ostatnio środkowy licznik (malejący, odliczający czas) jest wyświetlany takim samym fontem, jak cała reszta, przez co odbiegał od pierwotnego projektu. Doświadczenie z użytkowaniem pokazało, że taka czcionka jest za mała. Szczególnie jak już brakuje siły F. Rozwiązania są dwa - albo w zasobach zdefiniować nowy, większy font (i wtedy będzie tak jak początkowo chciałem), albo zmienić projekt i samemu coś tam rysować. Wybrałem to drugie rozwiązanie.
Rozwiązanie okazało się być banalne, tak jak każdy inny komponent, który można zaimplementować w javie - wystarczy przeciążyć metodę paint(Graphics) i po krzyku.
Zmodyfikowany projekt zakłada zatem, że graficzna reprezentacja upływającego czasu to zapełniające się koło, z komentarzem (upływający pozostały czas lub komunikat) pośrodku.
Całość komponentu umieściłem w nowej klasie CounterComponent, dziedziczącej z com.sun.lwuit.Component. Implementacja najważniejszej części, czyli metody paint() jest niezwykle krótka:
public void paint(Graphics g) {
super.paint(g);
final int value = maxValue - currentValue; // aktualna wartość (rosnąca)
final int clipX = g.getClipX();
final int clipY = g.getClipY();
final int x = getWidth(); // szerokość komponentu
final int y = getHeight(); // wysokość komponentu
// wybierzmy mniejszy wymiar, ale taki sam, żeby było koło
final int w = (x <= y ? x : y);
// ustalmy przesunięcie względem góry/boku, aby kółko było na środku
final int offsetX = (x-w) / 2;
final int offsetY = (y-w) / 2;
// narysujmy część koła reprezentującą upływający czas
final int arc = (value <=0 ? 360 : (value * stepArc));
g.setColor(0xEB0101);
g.fillArc(clipX+offsetX,clipY+offsetY,w, w, 90, -arc);
// oraz okręg dookoła
g.drawArc(clipX+offsetX,clipY+offsetY,w, w, 0, 360);
// a w środku komunikat lub wartość licznika
final String stringValue = text != null ? text : String.valueOf(currentValue);
Font f = g.getFont();
final int sWidth = f.stringWidth(stringValue);
final int sHeight = f.getHeight();
g.setColor(0xFFFFFF);
g.fillRoundRect(clipX + offsetX + w/2 - sWidth/2 -5,clipY +offsetY + w/2 -sHeight/2 - 5,sWidth+10,sHeight+10, 5, 5);
g.setColor(0x000000);
g.drawString(stringValue, clipX + offsetX +w/2 - sWidth/2, clipY + offsetY +w/2 - sHeight/2);
}
W ten prosty sposób aplikacja zyskała lepszy wygląd, w każdym razie dużo czytelniejszy od poprzedniego. Wystarczy jeden, krótki rzut okiem i wiadomo ile męczarni pozostało. Całość kodu źródłowego można pobrać: src.zip. Można też pobrać bezpośrednio na komórkę gotową aplikację: - TrainingAssistant.jad - TrainingAssistant.jar (uwaga: plik jest nadal duży, około 440KB)
Rozwiązanie okazało się być banalne, tak jak każdy inny komponent, który można zaimplementować w javie - wystarczy przeciążyć metodę paint(Graphics) i po krzyku.
Zmodyfikowany projekt zakłada zatem, że graficzna reprezentacja upływającego czasu to zapełniające się koło, z komentarzem (upływający pozostały czas lub komunikat) pośrodku.
Całość komponentu umieściłem w nowej klasie CounterComponent, dziedziczącej z com.sun.lwuit.Component. Implementacja najważniejszej części, czyli metody paint() jest niezwykle krótka:
public void paint(Graphics g) {
super.paint(g);
final int value = maxValue - currentValue; // aktualna wartość (rosnąca)
final int clipX = g.getClipX();
final int clipY = g.getClipY();
final int x = getWidth(); // szerokość komponentu
final int y = getHeight(); // wysokość komponentu
// wybierzmy mniejszy wymiar, ale taki sam, żeby było koło
final int w = (x <= y ? x : y);
// ustalmy przesunięcie względem góry/boku, aby kółko było na środku
final int offsetX = (x-w) / 2;
final int offsetY = (y-w) / 2;
// narysujmy część koła reprezentującą upływający czas
final int arc = (value <=0 ? 360 : (value * stepArc));
g.setColor(0xEB0101);
g.fillArc(clipX+offsetX,clipY+offsetY,w, w, 90, -arc);
// oraz okręg dookoła
g.drawArc(clipX+offsetX,clipY+offsetY,w, w, 0, 360);
// a w środku komunikat lub wartość licznika
final String stringValue = text != null ? text : String.valueOf(currentValue);
Font f = g.getFont();
final int sWidth = f.stringWidth(stringValue);
final int sHeight = f.getHeight();
g.setColor(0xFFFFFF);
g.fillRoundRect(clipX + offsetX + w/2 - sWidth/2 -5,clipY +offsetY + w/2 -sHeight/2 - 5,sWidth+10,sHeight+10, 5, 5);
g.setColor(0x000000);
g.drawString(stringValue, clipX + offsetX +w/2 - sWidth/2, clipY + offsetY +w/2 - sHeight/2);
}
W ten prosty sposób aplikacja zyskała lepszy wygląd, w każdym razie dużo czytelniejszy od poprzedniego. Wystarczy jeden, krótki rzut okiem i wiadomo ile męczarni pozostało. Całość kodu źródłowego można pobrać: src.zip. Można też pobrać bezpośrednio na komórkę gotową aplikację: - TrainingAssistant.jad - TrainingAssistant.jar (uwaga: plik jest nadal duży, około 440KB)
blog comments powered by Disqus