7

所以我使用 Java Swing 为我的应用程序构建 UI，并使用自定义图像来替换丑陋的 Java 图像，自定义图像具有样式并且很容易集成到 Java Swing 中。

现在我的问题是我需要在应用程序中使用 aJScrollBar并且JScrollPane我真的不想使用默认的 Java 滚动条甚至本机 OS 滚动条。

我只想能够有一个自定义图像作为滚动条的背景和一个图像作为滚动条的拇指。

如何使用图像制作自定义 JScrollBar？

4

2 回答 2

10

我写了一个示例，展示了如何为滚动条的拇指和背景（称为轨道）设置自定义图像。您需要这两个文件thumb.png和track.png自定义图像，它们位于您的类文件所在的同一位置。我还对图像进行了一些缩放以适应滚动条。只需对这段代码进行一些试验。我更改了滚动条 ( setPreferredSize) 的宽度以更好地查看图像。

要点是您必须创建自己的类MyUi来扩展BasicScrollBarUI和覆盖paintThumband paintTrack，并使用以下内容个性化您的滚动条setUI(new MyUI)：

import java.awt.*;
import java.io.FileReader;
import java.io.IOException;
import javax.swing.*;
import javax.swing.plaf.metal.MetalScrollBarUI;
import javax.imageio.ImageIO;
import java.io.File;
import java.awt.geom.AffineTransform;


public class CustomScrollbarUIExample {
  public static void main(String[] args) {
    JScrollPane before = makeExamplePane();
    JScrollPane after = makeExamplePane();  

    JScrollBar sb=after.getVerticalScrollBar();
    sb.setPreferredSize(new Dimension(50, Integer.MAX_VALUE));
    sb.setUI(new MyScrollbarUI());

    JFrame f = new JFrame();
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    Container c = f.getContentPane();
    c.setLayout(new GridLayout(2, 1, 0, 1));
    c.add(before);
    c.add(after);
    f.setSize(450, 400);
    f.setVisible(true);
  }

  private static JScrollPane makeExamplePane() {
    String exampleText= "Lorem ipsum dolor sit amet,\n consetetur sadipscing elitr,\n sed diam nonumy eirmod \ntempor invidunt ut labore et dolore \nmagna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et \njusto duo dolores et ea rebum. Stet clita\n kasd gubergren, no sea\n takimata sanctus est Lorem ipsum dolor sit amet.\n Lorem ipsum dolor sit amet,\n consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt \nut labore et dolore\n magna aliquyam erat, sed diam voluptua.\n At vero eos et accusam et justo \nduo\n dolores et ea rebum. Stet clita kasd gubergren, no sea\n takimata sanctus est Lorem\n ipsum dolor sit amet. Lorem ipsum dolor\n sit amet, consetetur sadipscing elitr,\n sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\n et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est \nLorem ipsum dolor sit amet.Duis\n autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n illum dolore eu feugiat nulla facilisis at vero eros et \naccumsan et iusto odio \ndignissim qui blandit praesent luptatum zzril delenit augue\n duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer\n adipiscing elit, sed diam nonummy nibh euismod \ntincidunt ut laoreet\n dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,\n quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea\n commodo consequat. Duis autem vel eum iriure \ndolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla \nfacilisis at vero eros et accumsan et iusto odio dignissim qui blandit\n praesent luptatum zzril delenit augue duis dolore \nte feugait nulla facilisi.";
    JTextArea text = new JTextArea(exampleText);
    JScrollPane scroll = new JScrollPane(text);
    return scroll;
  }

  static class MyScrollbarUI extends MetalScrollBarUI {
    private Image imageThumb, imageTrack;
    MyScrollbarUI() {
        try {
            imageThumb = ImageIO.read(new File("thumb.png"));
            imageTrack = ImageIO.read(new File("track.png"));
        } catch (IOException e){}
    }

    @Override
    protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {        
        g.translate(thumbBounds.x, thumbBounds.y);
        g.setColor( Color.red );
        g.drawRect( 0, 0, thumbBounds.width - 2, thumbBounds.height - 1 );
        AffineTransform transform = AffineTransform.getScaleInstance((double)thumbBounds.width/imageThumb.getWidth(null),(double)thumbBounds.height/imageThumb.getHeight(null));
        ((Graphics2D)g).drawImage(imageThumb, transform, null);
        g.translate( -thumbBounds.x, -thumbBounds.y );
    }

    @Override
    protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {        
        g.translate(trackBounds.x, trackBounds.y);
        ((Graphics2D)g).drawImage(imageTrack,AffineTransform.getScaleInstance(1,(double)trackBounds.height/imageTrack.getHeight(null)),null);
        g.translate( -trackBounds.x, -trackBounds.y );
    }

  }
}

有关更多信息，请参阅源文件MetalScrollBarUI.java。

于 2012-09-04T16:32:25.993 回答
9

按钮所在的位置仍然是一个小的灰色区域，但我不知道如何删除它。

这是@halex 示例的变体，它删除了按钮并让图形上下文进行缩放。我添加了一个人造图像以使示例独立。

在此处输入图像描述

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.plaf.metal.MetalScrollBarUI;

/** @see http://stackoverflow.com/a/12270067/230513 */
public class CustomScrollbarUIExample {

    public static void main(String[] args) {
        JScrollPane before = makeExamplePane();
        JScrollPane after = makeExamplePane();
        JScrollBar sb = after.getVerticalScrollBar();
        sb.setUI(new MyScrollbarUI());
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLayout(new GridLayout(0,1));
        f.add(before);
        f.add(after);
        f.pack();
        f.setSize(320, 240);
        f.setVisible(true);
    }

    private static JScrollPane makeExamplePane() {
        JTextArea text = new JTextArea(16, 16);
        text.append("Lorem ipsum dolor sit amet…");
        JScrollPane scroll = new JScrollPane(text);
        return scroll;
    }

    static class MyScrollbarUI extends MetalScrollBarUI {

        private Image imageThumb, imageTrack;
        private JButton b = new JButton() {

            @Override
            public Dimension getPreferredSize() {
                return new Dimension(0, 0);
            }

        };

        MyScrollbarUI() {
            imageThumb = FauxImage.create(32, 32, Color.blue.darker());
            imageTrack = FauxImage.create(32, 32, Color.lightGray);
        }

        @Override
        protected void paintThumb(Graphics g, JComponent c, Rectangle r) {
            g.setColor(Color.blue);
            ((Graphics2D) g).drawImage(imageThumb,
                r.x, r.y, r.width, r.height, null);
        }

        @Override
        protected void paintTrack(Graphics g, JComponent c, Rectangle r) {
            ((Graphics2D) g).drawImage(imageTrack,
                r.x, r.y, r.width, r.height, null);
        }

        @Override
        protected JButton createDecreaseButton(int orientation) {
            return b;
        }

        @Override
        protected JButton createIncreaseButton(int orientation) {
            return b;
        }
    }

    private static class FauxImage {

        static public Image create(int w, int h, Color c) {
            BufferedImage bi = new BufferedImage(
                w, h, BufferedImage.TYPE_INT_ARGB);
            Graphics2D g2d = bi.createGraphics();
            g2d.setPaint(c);
            g2d.fillRect(0, 0, w, h);
            g2d.dispose();
            return bi;
        }
    }
}
于 2012-09-04T19:26:30.063 回答