Создайте красивый слайдер Codename One, чтобы уведомить процент - PullRequest
Новая
       5

Создайте красивый слайдер Codename One, чтобы уведомить процент

0 голосов
/ 20 октября 2018

Примечание для читателей: этот вопрос специфичен для Codename One, он не касается css, html или аналогичного.

Мой пример использования - уведомить пользователя, сколько его / еепрофиль заполнен.Мне нужно реализовать слайдер, подобный следующему, но после многих испытаний с компонентом Slider я не понял, как его реализовать. (Честно говоря, я даже не понял, как начать его реализацию, и я не знаю, подходит ли компонент Slider.)

Ширина этого ползунка должна быть равна contentPane ofРодительская форма.По сути, это прямоугольник с небольшой рамкой: одна часть прямоугольника окрашена, а другая - белого цвета, в зависимости от процента.Над прямоугольником мне нужен процент и текст: процент и текст находятся в фиксированной позиции.Цвет текста меняется в зависимости от цвета фона, как показано на втором изображении.

Спасибо за любую помощь.

enter image description here enter image description here

1 Ответ

0 голосов
/ 20 октября 2018

Это довольно легко, за исключением смены цвета.Эта часть требует ручного кодирования графики.Я не запускал этот код, но он должен быть довольно близок к тому, как это должно работать: 

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

В нем могут отсутствовать некоторые детали, такие как сброс области отсечения и т. Д. Я не запускал его, но этодолжно привести к значительному результату при правильной настройке.Текст рисуется дважды (второй раз с обрезкой), чтобы воспроизвести эффект изменения цвета.

...