Erstellen Sie einen schönen Codenamen One Schieber einen Prozentsatz benachrichtigen

stimmen
1

Hinweis für die Leser: Diese Frage ist spezifisch für Codenamen One, es geht nicht um CSS, HTML oder ähnliches.

Mein Anwendungsfall ist den Benutzer , wie viel sein / ihr Profil vollständig zu informieren. Ich brauche einen Schieber wie die folgenden implementieren, aber nach vielen Versuchen mit der Slider - Komponente habe ich nicht verstanden , wie es zu implementieren. (Ehrlich gesagt habe ich nicht einmal verstanden , wie es die Umsetzung zu beginnen , und ich weiß nicht , ob die Slider - Komponente geeignet ist.)

Die Breite dieses Schiebers sollte den contentPane des Elternformulars gleich sein. Im Grunde genommen ist es ein Rechteck mit einem kleinen Rande: ein Teil des Rechtecks ​​ist gefärbt, die andere weiß ist, entsprechend den Prozentsatz. Über das Rechteck muß ich den Prozentsatz und einen Text: Prozentsatz und Text in einer festen Position ist. Die Farbe des Textes ändert sich entsprechend der Hintergrundfarbe, wie es in dem zweiten Bild dargestellt wird.

Vielen Dank für jede Hilfe.

Geben Geben

Veröffentlicht am 20/10/2018 um 12:39
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Das ist ziemlich einfach, mit Ausnahme der Farbe zu ändern. Der Teil erfordert Hand Codierung der Grafik. Ich habe nicht diesen Code ausführen, aber es sollte ziemlich nah dran sein, wie das funktionieren soll:

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);
    }
}

Dies könnte ein paar Details wie das Zurücksetzen des Clipping-Bereich usw. fehlen, laufe ich es nicht, aber es sollte ziemlich dieses Ergebnis erzeugen, wenn sie richtig eingestellt. Der Text wird zweimal (zweites Mal mit Clipping) gezogen, um den Farbwechseleffekt zu replizieren.

Beantwortet am 20/10/2018 um 19:34
quelle vom benutzer

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