[JAVA] BasicScrollBarUI를 활용한 JScrollBar 커스터마이징

Java에서 제공하는 기본 JScrollPane은 기능적으로는 충분하지만 디자인적으로는 아쉬운 경우가 많습니다. 특히 커스텀 UI가 필요한 프로젝트에서는 스크롤바도 스타일에 맞게 변경해야 하는데 기본 스크롤바는 단순한 회색 톤과 얇은 두께로 되어 있어 앱이나 프로그램의 전체적인 분위기와 어울리지 않는 경우가 많습니다.

이번 포스트에서는 BasicScrollBarUI를 상속받아 스크롤바의 색상, 두께, 버튼 제거, Thumb 이미지 적용까지 전반적으로 커스터마이징하는 방법을 소개하며 이를 통해 프로그램의 일관된 디자인을 유지하고 사용자 경험(UX)을 향상시킬 수 있는 스크롤바를 직접 구현해 보겠습니다.

1

코드 예제

 

 

 

 

JAVA

public class CustomScrollBarUI extends BasicScrollBarUI {
    private BufferedImage thumbImage;

    public CustomScrollBarUI(BufferedImage thumbImage) {
        this.thumbImage = thumbImage;
    }

    @Override
    protected void configureScrollBarColors() {
        this.trackColor = Color.WHITE;
    }

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

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

    private JButton createZeroButton() {
        JButton button = new JButton();
        button.setPreferredSize(new Dimension(width, height));
        return button;
    }

    @Override
    protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
        if (thumbImage != null) {
            g.drawImage(thumbImage, thumbBounds.x, thumbBounds.y, thumbBounds.width, thumbBounds.height, null);
        } else {
            g.setColor(Color.GRAY);
            g.fillRoundRect(thumbBounds.x, thumbBounds.y, thumbBounds.width, thumbBounds.height, width, height);
        }
    }

    @Override
    protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {
        g.setColor(trackColor);
        g.fillRect(trackBounds.x, trackBounds.y, trackBounds.width, trackBounds.height);
    }

    @Override
    public Dimension getPreferredSize(JComponent c) {
        return new Dimension(width, height);
    }
}

1-1 스크롤바 구조

1-1-1 가로 스크롤바

 

• 증가 버튼(Increment) : 스크롤바의 우측에 위치한 버튼으로 클릭 시 콘텐츠를 오른쪽으로 스크롤합니다.
• 감소 버튼(Decrement) : 스크롤바의 좌측에 위치한 버튼으로 클릭 시 콘텐츠를 왼쪽으로 스크롤합니다.

1-1-2 세로 스크롤바

• 증가 버튼(Increment) : 스크롤바의 하단에 위치한 버튼으로 클릭 시 콘텐츠가 아래쪽으로 스크롤됩니다.
• 감소 버튼(Decrement) : 스크롤바의 상단에 위치한 버튼으로 클릭 시 콘텐츠가 위쪽으로 스크롤됩니다.

스크롤바의 감소/증가 버튼은 트랙 안에 포함되지 않고 바깥쪽에 따로 붙어 있는 구조로 배치됩니다.

1-2 코드 설명

 

 

 

JAVA

public class CustomScrollBarUI extends BasicScrollBarUI

CustomScrollBarUI 클래스는 BasicScrollBarUI를 상속받아 스크롤바의 thumb(스크롤 핸들), track(스크롤 경로), 버튼을 각 메서드를 통해 커스터마이즈합니다.

---

 

 

 

JAVA

private BufferedImage thumbImage;

스크롤바의 thumb(스크롤을 조작하는 부분)에 사용할 이미지를 저장하는 변수로 외부에서 전달받은 이미지를 보관합니다.

---

 

 

 

JAVA

public CustomScrollBarUI(BufferedImage thumbImage) {
    this.thumbImage = thumbImage;
}

CustomScrollBarUI 생성자는 외부에서 전달된 thumbImage를 받아 해당 이미지를 클래스의 필드에 저장합니다. 이 이미지는 이후 스크롤바의 thumb(스크롤 핸들)을 그릴 때 사용됩니다.

---

 

 

 

JAVA

@Override
protected void configureScrollBarColors() {
    this.trackColor = Color.WHITE;
}

/*
 * 필요에 따라 다양한 색상 속성을 설정할 수 있습니다.
 *
 * @Override
 * protected void configureScrollBarColors() {
 *     this.trackColor = Color.WHITE;                      // 스크롤바 트랙(배경 영역)의 색상
 *     this.thumbColor = Color.GRAY;                       // 스크롤 핸들(thumb)의 기본 색상
 *     this.thumbHighlightColor = Color.LIGHT_GRAY;        // 스크롤 핸들의 하이라이트(빛이 닿는 부분) 색상
 *     this.thumbDarkShadowColor = Color.DARK_GRAY;        // 스크롤 핸들의 어두운 그림자 색상
 *     this.thumbLightShadowColor = Color.GRAY.brighter(); // 스크롤 핸들의 밝은 그림자 색상
 * }
 */

configureScrollBarColors 메서드는 스크롤바의 색상을 설정하는 역할을 하며 trackColor(트랙 배경색), thumbColor(스크롤 핸들 색상) 등 다양한 시각적 속성을 초기화하거나 변경할 수 있습니다. 현재는 trackColor만 설정되어 있지만 필요에 따라 다른 속성들도 추가 설정할 수 있습니다.

---

 

 

 

JAVA

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

스크롤바의 감소 버튼을 생성하는 메서드로 createZeroButton()을 호출해 반환합니다.

---

 

 

 

JAVA

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

스크롤바의 증가 버튼을 생성하는 메서드로 createZeroButton()을 호출해 반환합니다.

---

 

 

 

JAVA

private JButton createZeroButton() {
    JButton button = new JButton();
    button.setPreferredSize(new Dimension(width, height));
    return button;
}

스크롤바의 증가/감소 버튼을 커스터마이징할 때 사용하는 메서드로 기본 버튼을 비워 버튼이 보이지 않도록 하거나 필요에 따라 이미지나 스타일을 적용해 원하는 디자인으로 구성할 수 있도록 유연하게 설계되어 있습니다.

---

 

 

 

JAVA

@Override
protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
    if (thumbImage != null) {
        g.drawImage(thumbImage, thumbBounds.x, thumbBounds.y, thumbBounds.width, thumbBounds.height, null);
    } else {
        g.setColor(Color.GRAY);
        g.fillRoundRect(thumbBounds.x, thumbBounds.y, thumbBounds.width, thumbBounds.height, 10, 10);
    }
}

paintThumb() 메서드는 스크롤바의 thumb(스크롤 핸들) 부분을 그리는 역할을 합니다. thumbImage가 설정되어 있는 경우에는 g.drawImage() 메서드를 사용하여 thumbBounds로 전달된 위치와 크기에 맞춰 이미지를 그립니다. 반대로 thumbImage가 설정되어 있지 않으면 기본 회색(Color.GRAY)의 thumb을 그리고 fillRoundRect() 메서드를 사용하여 모서리가 둥근 사각형 형태로 표현합니다.

• drawImage() 메서드의 마지막 인자인 null은 이미지 로딩 상태를 추적할 필요가 없다는 의미입니다. 이 값은 ImageObserver 객체를 통해 이미지를 비동기적으로 로드할 때 사용되지만 여기서는 이미지가 이미 준비된 상태이므로 null을 전달하여 별도의 추적을 생략합니다.
• fillRoundRect() 메서드의 마지막 두 인자인 10, 10은 모서리의 둥글기 정도를 설정하는 값으로 이를 통해 thumb의 모서리가 부드럽고 둥글게 표현됩니다. 

---

 

 

 

JAVA

@Override
protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {
    g.setColor(trackColor);
    g.fillRect(trackBounds.x, trackBounds.y, trackBounds.width, trackBounds.height);
}

paintTrack() 메서드는 스크롤바의 트랙(스크롤바가 이동하는 배경 영역)을 그리는 역할을 합니다. 이 메서드에서는 trackBounds로부터 트랙의 위치와 크기를 가져와 fillRect()로 영역을 만든 뒤 trackColor 색상으로 해당 영역을 채워 트랙의 배경을 시각적으로 표현합니다.

---

 

 

 

JAVA

@Override
public Dimension getPreferredSize(JComponent c) {
    return new Dimension(width, height);
}

getPreferredSize() 메서드는 스크롤바의 선호 크기를 설정합니다. 이 메서드는 지정된 width와 height 값을 반환하여 스크롤바의 기본적인 크기를 결정합니다.

• 세로 스크롤바 (Vertical ScrollBar) : width는 스크롤바의 두께로 적용되지만 height는 컨테이너의 레이아웃에 따라 자동으로 결정되므로 직접 지정해도 무시되는 경우가 많습니다.
• 가로 스크롤바 (Horizontal ScrollBar) : height가 스크롤바의 두께로 사용되며 width는 마찬가지로 레이아웃 매니저가 실제 크기를 제어합니다.