예. 조금 늦었습니다. 제가 지금까지 동영상녹화를 무조건 떠서 부담감이 좀 많았는데,
앞으로는 그냥 설명과 짤방을 친절하게 적으면서 소스를 적는 방법을 취하려고 합니다. ㅠ
개념을 설명하는게 아니라 단순 코딩이라 그게 더 맞다는 생각입니다.
자, 지금 보시는 화면안에 좌석이 대략 50 개 정도가 들어가야 합니다. 먼저 해야될일이 어떤 일일까요?
가장 먼저 좌석의 이미지를 넣어보도록 하겠습니다. 아마 순서를 미리 구상해보자면 이런 구상일 것입니다.
1. 좌석의 이미지가 들어갈 패널을 하나 만든다.
2. 그 패널을 50개를 넣을 큰 패널을 하나 만든다.
3. 패널을 저 사진의 이곳에 알맞게 붙인다.
이런 순서가 될 것입니다. 그러면 순서대로 한번 진행해 보도록 하겠습니다.
1. 좌석의 이미지 한개 들어갈 패널 만들어보기
먼저 좌석의 이미지는 제가 드리도록 하겠습니다. 다음의 깃허브 주소를 참고해주세요
https://github.com/arahansa/pcbang/blob/master/img/gameOn.png
(깃헙은 클릭을 누르셔야 하네요; ) 음 아무튼 /src 폴더의 view패키지에
PanSeat라는 클래스를 만들어 주도록 하겠습니다.
PanSeat를 만들어주시고 다음과 같이 작성해주세요.
package view;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class PanSeat extends JPanel {
private BufferedImage img = null;
private int numSeat;
public PanSeat(int numSeat) {
this.numSeat = numSeat;
img("gameOff");
setLayout(null);
JPanel panImg = new InnerPanel();
panImg.setBounds(0, 0, 99, 99);
panImg.setOpaque(false);
add(panImg);
setVisible(true);
setOpaque(false);
setFocusable(true);
}
public static void main(String[] args) {
JFrame frameTest = new JFrame();
frameTest.setTitle("시트패널");
frameTest.add(new PanSeat(1));
frameTest.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameTest.setSize(99, 144);
frameTest.setVisible(true);
}
class InnerPanel extends JPanel {
private static final long serialVersionUID = 1547128190348749556L;
public void paint(Graphics g) {
super.paint(g);
g.drawImage(img, 0, 0, null);
}
}
public void img(String filename) {
// 이미지 받아오기 - gameOn, gameOff (로그인, 로그오프)
try {
img = ImageIO.read(new File("img/" + filename + ".png"));
} catch (IOException e) {
System.out.println("이미지 불러오기 실패!");
System.exit(0);
}
repaint();
}
}
소스에 대해서 잠시 적어보자면
17번의 생성자
가 있습니다. 좌석시트가 처음 시작될 때 생성자 파라미터로 좌석번호를 받습니다.
setLayout으로 레이아웃을 null처리를 해주고
이미지를 넣을 내부클래스 JPanel을 만들어서 add합니다.
배경들을 투명처리해야했기 때문에 setVisible(true)를 하면서 setOpaque(false)를 하였습니다.
layout이 null이므로 수동으로 직접 위치를 지정해줘야 하는 것을 알아둡시다
main메소드
이 메인메소드에서는 JFrame을 하나 만들어서 좌석시트만 따로 보여질 수 있도록 합니다.
좌석프레임의 사이즈를 setSize로 가로 99 세로 144를 만들어주고 좌석번호를 1로 넣어준 것을 보실 수 있습니다.
다음으로 보실 화면은 이미지를 그려주는 InnerPanel과 img메서드 입니다.
InnerPanel은 img를 그려주기 위해 내부클래스 만들어 준 것이고 img메서드는 앞으로 그림이 바뀔 수도 있어서(사용자가 로그인한 경우) 그림을 바꾸기 편하게 메서드를 따로 빼내준 것입니다.
소스를 적고, 이미지파일을 프로젝트폴더 바로 안의 img폴더를 만들어주신 후 돌려보시면 다음과 같은 화면이 나올 것입니다.
자....이 사진은 단지 그냥 이미지를 갖다 붙인 것에 불과합니다.
때문에 여기서 인제, 각종 시스템의 상태를 나타낼 수 있는 정보를 넣을 수 있는 새로운 패널을 넣어보도록 하겠습니다. 그리고 패널간의 겹치는 문제가 발생할 수 있으므로 패널간의 순서를 정해줄 수 있는 JLayeredPanel에 먼저 넣은 다음 마지막에 JLayeredPanel을 넣어보도록 하겠습니다 !
시스템 정보 글씨 표현하기
그리고 생성자 안에 다음과 같이 적어주도록 합시다.
//상태정보 패널
JPanel panContent = new JPanel();
panContent.setLayout(null);
panContent.setBounds(0, 0, 99, 99);
JLabel[] label = new JLabel[4];
int posLabel = 15;
for (int i = 0; i < 4; i++) {
if (i == 0)
label[i] = new JLabel((numSeat + 1) + ". 빈자리");
else
label[i] = new JLabel("");
label[i].setBounds(20, posLabel, 80, 15);
posLabel += 16;
label[i].setForeground(new Color(36, 205, 198));
label[i].setFont(new Font("배달의민족 한나", 1, 12));
panContent.add(label[i]);
}
panContent.setOpaque(false);
//제이레이어패널
JLayeredPane panLayered = new JLayeredPane();
panLayered.setBounds(0, 0, 1600, 900);
panLayered.setLayout(null);
panLayered.setOpaque(false);
panLayered.add(panImg, new Integer(0), 0);
panLayered.add(panContent, new Integer(1), 0);
add(panLayered);
두번째 패널은 시스템의 정보들을 JLabel으로 표시할 패널을 만들어주고 정보를 만들어줍니다.
3번째와 4번째 JLabel은 추후 사용자가 로그인 할 시에, 나타날 정보를 보여줍니다.
for문을 돌려서 4개의 Label을 만들고 위치를 정해주며, panContent이름을 가진 Jpanel에 정보를 업데이트 합니다.
//제이레이어드패널 이 붙은 곳은 위의 정보패널과 이미지 패널을 이 제이레이어 패널에 모아서 붙이기 위하여 만들어졌습니다.
레이아웃은 Null값이고, 위치를 수동으로 정해주게 됩니다.
panLayered.add해서 순서를 new Integer로 지정해주는 것을 볼 수가 있습니다.
이렇게 해서 최종소스는 다음과 같습니다 (앞으로의 편의를 위해 JLabel배열은 생성자를 벗어나, 클래스 바로 밑에 필드로 적어두도록 하겠습니다.
package view;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JLayeredPane;
import javax.swing.JPanel;
public class PanSeat extends JPanel {
private BufferedImage img = null;
JLabel[] label = new JLabel[4];
private int numSeat;
public PanSeat(int numSeat) {
this.numSeat = numSeat;
img("gameOff");
setLayout(null);
JPanel panImg = new InnerPanel();
panImg.setBounds(0, 0, 99, 99);
panImg.setOpaque(false);
//상태정보 패널
JPanel panContent = new JPanel();
panContent.setLayout(null);
panContent.setBounds(0, 0, 99, 99);
int posLabel = 15;
for (int i = 0; i < 4; i++) {
if (i == 0)
label[i] = new JLabel((numSeat + 1) + ". 빈자리");
else
label[i] = new JLabel("");
label[i].setBounds(20, posLabel, 80, 15);
posLabel += 16;
label[i].setForeground(new Color(36, 205, 198));
label[i].setFont(new Font("배달의민족 한나", 1, 12));
panContent.add(label[i]);
}
panContent.setOpaque(false);
//제이레이어패널
JLayeredPane panLayered = new JLayeredPane();
panLayered.setBounds(0, 0, 1600, 900);
panLayered.setLayout(null);
panLayered.setOpaque(false);
panLayered.add(panImg, new Integer(0), 0);
panLayered.add(panContent, new Integer(1), 0);
add(panLayered);
setVisible(true);
setOpaque(false);
setFocusable(true);
}
public static void main(String[] args) {
JFrame frameTest = new JFrame();
frameTest.setTitle("시트패널");
frameTest.add(new PanSeat(1));
frameTest.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameTest.setSize(99, 144);
frameTest.setVisible(true);
}
class InnerPanel extends JPanel {
private static final long serialVersionUID = 1547128190348749556L;
public void paint(Graphics g) {
super.paint(g);
g.drawImage(img, 0, 0, null);
}
}
public void img(String filename) {
// 이미지 받아오기 - gameOn, gameOff (로그인, 로그오프)
try {
img = ImageIO.read(new File("img/" + filename + ".png"));
} catch (IOException e) {
System.out.println("이미지 불러오기 실패!");
System.exit(0);
}
repaint();
}
}
최종 화면
일단 어느정도 기초적인 이미지를 띄웠으니, 다음번에는 바로 관리화면에 50개를 띄워보도록 하겠습니다~
다음편으로 To be Continued~
