[Java swing] 자바 스윙 8 : 버튼 이미지 삽입 변환, 반응형 버튼 만들기

[Java swing] 자바 스윙 8 : 버튼 이미지 삽입 변환, 반응형 버튼 만들기

 

JButton 컴포넌트에 이미지를 삽입하는 방법과, 버튼에 마우스 포인터가 올려졌을때, 누르고 있을때, 누르고 난 후에 이미지가 바뀌도록 하는 방법에 대해서 알아보겠다.

 

지난 시간에는 일일이 코드로 다 작성해서 패널에 이미지를 넣는 방법에 대해 소개했으나, 버튼과 같은 컴포넌트에 이미지를 넣을 경우에는 윈도우 빌더를 사용해서 더 편하게 이미지를 넣을 수 있는 방법이 존재한다.

(그냥 패널에 넣는 경우에는 코드로 작성해야하는 것 같다.)

버튼에 이미지 넣기

 

먼저 프로젝트 경로에 소스 폴더를 만들고 이미지를 넣는다.

나같은 경우엔 각각의 이미지가 225x225 크기로 같은 것을 선택했다.

src폴더에 새 Application window파일을 생성하고 이름을 imgBtn.java로 지정했다.

그리고 Design버튼을 눌러 윈도우 빌더창으로 들어온다.

getContentPane() 패널에 Absolute layout을 적용하고 버튼을 225x225크기로 설정하겠다.

 

변수명을 btn으로 설정하고 Bounds값에서 가로, 세로 크기를 225x225로 맞췄다.

이 값은 setBounds 메소드와 같은 역할을 한다.(위치와 크기 지정)

버튼에 이미지를 씌워야하므로 text값은 비워두었다.

 

아까 저장한 이미지를 오른쪽 클릭해 Properties 속성창을 열어보자.

 

Location항목에 이 파일이 위치하는 경로가 적혀있다. 이 값을 복사한 후 창을 종료한다.

 

 

 

여기서 icon 항목 오른쪽에 있는 네모난 버튼을 눌러보자.

 

테스트를 하는 단계이기 때문에 우선 2번째 항목을 선택하고 필요한 이미지를 받아올 것이다.

parameters항목에 좀전에 복사한 경로를 붙여넣기하면 오른쪽 Preview창에 이미지가 나온다. ok를 누르자.

 

버튼에 이미지가 생성되었다. 이제 소스코드창으로 돌아오자.

 

반응형 버튼 만들기 - 마우스가 올라가면 이미지 변경

이미지를 올리는 방법은 이렇게 간단하지만, 마우스의 동작에 따라 이미지가 바뀌도록 하기위해서는 소스 코드를 입력하는 방법밖에 없다.

 

먼저 버튼위에 마우스가 올라갔을 경우 버튼의 이미지를 바꾸는 방법에 대해 소개하겠다.

import java.awt.EventQueue;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;

public class imgBtn {

	private JFrame frame;

	/**
	 * Launch the application.
	 */
	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					imgBtn window = new imgBtn();
					window.frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	/**
	 * Create the application.
	 */
	public imgBtn() {
		initialize();
	}

	/**
	 * Initialize the contents of the frame.
	 */
	private void initialize() {
		frame = new JFrame();
		frame.setBounds(100, 100, 726, 520);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.getContentPane().setLayout(null);
		
		JButton btn = new JButton("");
		btn.setIcon(new ImageIcon("C:\\Users\\astar\\eclipse-workspace\\SwingStudy\\images\\KFC.jpg"));
       
       // ----------[추가한 코드
		btn.setRolloverIcon(new ImageIcon("C:\\Users\\astar\\eclipse-workspace\\SwingStudy\\images\\KFC2.jpg"));
		-----------------]//
       
       btn.setBounds(257, 140, 225, 225);
		frame.getContentPane().add(btn);
		
	}
}

setIcon(new ImageIcon("경로"));는 해당 컴포넌트에 경로에 있는 이미지를 삽입해주는 코드이다.

 

setRolloverIcon(new ImageIcon("경로"));는 마우스가 컴포넌트 위에 올라가 있을 때 경로에 있는 이미지를 삽입한다.

마우스를 컴포넌트 바깥쪽으로 치우면 이전 이미지로 돌아간다.

 

다만, 경로값을 드라이브부터 찾아서 들어가는 경우에는 /(슬래시)가 아니라 \(역슬래시)를 두개씩 써야한다는 것을 확인하자.

 

		btn.setIcon(new ImageIcon("./images/KFC.jpg"));
		btn.setRolloverIcon(new ImageIcon("./images/KFC2.jpg"));

images파일이 프로젝트 하위경로에 있다면 이런식으로도 접근할 수 있다.

이 경우에는 역슬래시가 아니라 슬래시를 한번씩 적용했다.

 

결과를 확인해보자.

 

마우스가 컴포넌트 바깥에 있을때는 KFC.jpg 이미지가,

마우스가 위에 올려져 있을 때는 KFC2.jpg 이미지가 보여진다. 마우스를 때면 다시 KFC1.jpg로 돌아간다.

 

반응형 버튼 만들기 - 마우스가 버튼을 누르고 있을때 이미지 변경

btn.setPressedIcon(new ImageIcon("./images/KFC2.jpg"));

아까 코드를 지우고 위의 코드를 넣어보자. 결과를 확인해보면 버튼을 누를때만 이미지가 바뀌게 될 것이다.

 

그런데 지금까지 결과창을 보면 마우스가 버튼위로 올라갈 때 테두리가 생기는 것을 확인할 수 있다.

만약 이런 테두리를 지우고 싶다면 아래 코드를 추가하면 된다.

btn.setBorderPainted(false);

 

반응형 버튼 만들기 - 마우스를 클릭할 때 버튼 이미지 변경

import java.awt.EventQueue;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;

public class imgBtn {

	private JFrame frame;

	/**
	 * Launch the application.
	 */
	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					imgBtn window = new imgBtn();
					window.frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	/**
	 * Create the application.
	 */
	public imgBtn() {
		initialize();
	}
	public boolean btnFlag = false;    ///////////////////////   추가
	/**
	 * Initialize the contents of the frame.
	 */
	private void initialize() {
		frame = new JFrame();
		frame.setBounds(100, 100, 726, 520);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.getContentPane().setLayout(null);
		
		JButton btn = new JButton("");
		btn.setIcon(new ImageIcon("./images/KFC.jpg"));
		btn.setBounds(257, 140, 225, 225);
		frame.getContentPane().add(btn);
		
		/////////////////////////////////////////////////////[추가
		btn.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				// TODO Auto-generated method stub
				if (btnFlag) {
					btn.setIcon(new ImageIcon("./images/KFC.jpg"));
					btnFlag = false;
					return;
				}
				btn.setIcon(new ImageIcon("./images/KFC2.jpg"));
				btnFlag = true;
			}
		});
		//////////////////////////////////////////////////////////////]
	}
    
}

추가된 코드들을 살펴보자.

버튼을 한번 누르면 KFC2이미지로 바뀌고, 한번 더 누르면 KFC1이미지로 다시 바뀌게 만들 것이다.

 

public boolean btnFlag = false;

 

btnFlag는 버튼을 한번 눌렀을 때 true로 바꾸고, 다시 누르면 false로 바뀌도록 설정할 변수이다.

외부에서도 접근이 가능하도록 public으로 선언했다.

 

btn.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				// TODO Auto-generated method stub
				if (btnFlag) {
					btn.setIcon(new ImageIcon("./images/KFC.jpg"));
					btnFlag = false;
					return;
				}
				btn.setIcon(new ImageIcon("./images/KFC2.jpg"));
				btnFlag = true;
			}
		});

버튼을 눌렀을 때 동작하는 actionPerformed함수를 살펴보면 btnFlag가 true일때만 KFC이미지를 넣고 btnFlag를 false로 되돌려준 후 함수를 반환하고 나오는 동작을 한다.

만약 false상태에서 버튼을 누르면 KFC2로 이미지를 바꾸고 true값으로 돌리기 때문에 버튼을 누를때마다 KFC, KFC2이미지를 번갈아가면서 화면에 보이도록 하는 동작을 구현할 수 있다.

 

버튼에 테두리 넣기

		LineBorder tb = new LineBorder(Color.black);
		btn.setBorder(tb);

LineBorder 클래스는 컴포넌트 주위에 라인을 넣을 수 있도록 한다.

위의 코드를 넣으면 버튼 컴포넌트에 검은 실선이 생긴다.

 

		LineBorder tb = new LineBorder(Color.red, 3, true);
		btn.setBorder(tb);

이번엔 위의 코드를 적용해보자.

참고로 new LineBorder(색, 라인의 두께, true:모서리 둥글게, false:모서리 각지게); 이다.