首页 文章

创建一个很好的Codename One滑块来通知百分比

提问于
浏览 次
1

读者注意：这个问题特定于Codename One，它不是关于css，html或类似的 .

我的用例是通知用户他/她的 Profiles 完成了多少 . 我需要实现一个类似下面的滑块，但经过Slider component的大量试验后，我不明白如何实现它 . （老实说，我甚至不知道如何开始实现它，我不知道Slider组件是否合适 . ）

此滑块的宽度应等于父窗体的contentPane . 基本上它是一个边框很小的矩形：根据百分比，矩形的一部分是彩色的，另一部分是白色的 . 在矩形上我需要百分比和文本：百分比和文本处于固定位置 . 文本的颜色根据背景颜色而变化，如第二张图片中所示 .

感谢您的任何帮助 .

enter image description here

enter image description here

codenameone

1 回答

  • 1

    除颜色变化外，这很容易 . 该部分需要手工编码图形 . 我没有运行此代码，但它应该非常接近这应该如何工作：

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

    这可能会遗漏一些细节，比如重置裁剪区域等 . 我没有运行它但是如果正确调整它会产生相当多的结果 . 文本被绘制两次（第二次剪切）以复制颜色更改效果 .

    回复于

相关问题