안녕하세요.




현재, 프레임에 버튼 두개와 라벨이 올라가 있는 상태인데요, 각각의 버튼 위에 슬라임 그림을 배치해볼까 합니다.


우선, 그림파일이 있어야겠죠? 아래의 압축파일을 적당한 곳에 풀어놓으시기 바랍니다.



슬라임.zip



다음으로, 스터디 패키지 아래에 그림파일을 저장할 폴더를 만들겠습니다.




스터디 패키지에서 우클릭하여 폴더를 눌러줍니다. (만약에 폴더가 안보이시면 맨 아래의 Other...를 눌러서 foler를 검색하시면 되겠습니다)





폴더이름은 이미지를 줄여서 img라고 하겠습니다.





그러면 study.img라는 폴더가 생긴걸 확인할 수 있습니다. 하얀색 패키지처럼 생겼네요.





압축을 푼 폴더로 가서 그림 파일을 하나 드래그 해서 이클립스의 study.img에다가 드롭합니다.





이런창이 뜨면 오케이를 클릭합니다.





나머지 하나도 똑같이 해주면 이처럼 img 폴더 속에 두 그림파일이 들어가 있는 걸 보실 수 있습니다.




자, 준비과정은 다 끝났네요. 다음시간에는 코딩을 해서 프레임에 그림을 표시해봅시다^^


감사합니다.



안녕하세요


프레임에 그림을 넣기 전에 '패키지'라는 개념을 알고 넘어가야 될 것 같아서 설명을 좀 드리겠습니다.





클래스를 만들때마다 맨윗줄에 자동으로 적히는 패키지명. study라고 적혀있네요.


여태까지는 무시하고 코딩했지만 어떤 녀석인지 알아봅시다.


이클립스 화면 왼쪽에 있는 패키지 익스플로러를 쳐다봅시다.




(여러분은 abc와 gui_game은 없으실 겁니다)


여태까지 만든 클래스 4개가 study라는 패키지에 속해 있음을 알 수 있습니다. 그림도 패키지스러운 그림이네요 ㅎㅎ


그리고 최상단에 보면 모든것을 포함하고 있는 study가 있죠? 이건 프로젝트명입니다. 프로젝트명과 패키지명을 서로 다르게 정할걸 그랬네요. 헷갈리지 않게.



낱개의 코드들이 모여서 함수를 이루고


함수들이 모여서 클래스를 이루고


클래스들이 모여서 패키지를 이루고


패키지들이 모여서 프로젝트를 이루는 것입니다.



다음 시간에는 그림을 넣을 수 있겠죠? ㅎ


감사합니다.


안녕하세요.


이번 시간에는 버튼을 눌렀을때 라벨의 글자가 바뀌도록 구현해보겠습니다. 이 때 필요한 함수와 사용방법은 아래와 같습니다.



버튼객체.addActionListener(event -> {

버튼이 눌러지면 실행할 내용


});



addActionListener는 의역하면 '행동 감지기 추가'입니다. 버튼을 클릭하는 행동을 감지하겠다는거죠. 잘 보시면 함수의 인수가 여러줄에 걸쳐 입력이 돼있는 모습입니다. 소괄호속에 중괄호가 있는 특이한 형태네요. addActionListener();에서 소괄호 속이 비대해져 있는 형태라고 보시면 닫는 소괄호와 세미콜론도 이해가 되실 것 같네요.


event도 있고 ->(화살표)도 있고 갑자기 난이도가 너무 높아졌다고 생각하실지 모르겠는데 그냥 수학공식처럼 받아들이시면 되겠습니다. 외워두셔도 좋고 어디다 복사해 놓으셔도 좋습니다.


자 그럼 실제로 적용해봅시다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// Study01.java
 
package study;
 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame();
 
        // 프레임 제목 설정
        frm.setTitle("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // 레이아웃 설정
        frm.getContentPane().setLayout(null);
 
        // 버튼 생성
        JButton btn1 = new JButton("슬라삐");
        JButton btn2 = new JButton("슬라디");
 
        // 버튼 위치와 크기 설정
        btn1.setBounds(3017012230);
        btn2.setBounds(18217012230);
 
        // 프레임에다가 버튼 추가
        frm.getContentPane().add(btn1);
        frm.getContentPane().add(btn2);
 
        // 라벨 설정
        JLabel lbl = new JLabel();
        lbl.setBounds(3020027450);
        lbl.setText("게임을 시작합니다");
        lbl.setHorizontalAlignment(JLabel.CENTER); // 수평 가운데 정렬
        frm.getContentPane().add(lbl);
 
        // ★ 버튼이 눌렸을때
        btn1.addActionListener(event -> {
            lbl.setText("나는 슬라삐");
        });
        
        btn2.addActionListener(event -> {
            lbl.setText("나는 슬라디");
        });
        
        // 프레임이 보이도록 설정
        frm.setVisible(true);
 
    }
 
}
 
cs




잘되죠? ㅎㅎ



다음 시간에는 버튼 위에다가 슬라임 그림을 넣어보겠습니다.


감사합니다.


안녕하세요.


지난시간에는 프레임에다가 버튼을 부착해보았습니다.


버튼 동작을 구현하기 전에, 버튼을 눌렀을때 나오는 텍스트를 표시할 라벨을 만들어보도록 하겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Study01.java
 
    public static void main(String[] args) {
 
        // ★ 프레임 생성
        JFrame frm = new JFrame();
        
        // ★ 프레임 제목 설정
        frm.setTitle("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 프로그램이 종료되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // 레이아웃 설정
        frm.getContentPane().setLayout(null);
 
        // 버튼 생성
        JButton btn1 = new JButton("슬라삐");
        JButton btn2 = new JButton("슬라디");
 
        // 버튼 위치와 크기 설정
        btn1.setBounds(3017012230);
        btn2.setBounds(18217012230);
 
        // 프레임에다가 버튼 추가
        frm.getContentPane().add(btn1);
        frm.getContentPane().add(btn2);
 
        // ★ 라벨 설정
        JLabel lbl = new JLabel();
        lbl.setBounds(3020027450);
        lbl.setText("게임을 시작합니다");
        frm.getContentPane().add(lbl);
 
        // 프레임이 보이도록 설정
        frm.setVisible(true);
 
    }
cs


(내용이 기니까 메인함수만 보겠습니다)


우선 6행과 9행을 보시면 프레임을 생성할때 생성자 인수는 비워놨다가 제목을 나중에 정해줄 수 있다는 걸 알 수 있습니다.


36~39행에서 라벨의 생성과 세팅을 해두었습니다. 한번 실행해봅시다.





글자가 표시는 잘되지만 왼쪽 정렬이 돼있는 점이 아쉽네요. 가운데정렬하는 함수를 추가해봅시다.



setHorizontalAlignment(정렬 위치);



함수의 이름이 긴데 해석하면 '수평 정렬 설정'입니다. 아래처럼 사용하면 되겠습니다.



1
2
3
4
5
6
7
        // ★ 라벨 설정
        JLabel lbl = new JLabel();
        lbl.setBounds(3020027450);
        lbl.setText("게임을 시작합니다");
        lbl.setHorizontalAlignment(JLabel.CENTER); // 수평 가운데 정렬
        frm.getContentPane().add(lbl);
 
cs



보기좋네요^^



다음 시간에는 버튼을 클릭하면 라벨의 텍스트가 바뀌도록 해보겠습니다.


감사합니다.


안녕하세요.


지난시간에는 구체적으로 치수를 기입하면서 프레임을 구상해 봤습니다.




이런 모습이었죠.


이제 구상한대로 버튼을 배치해보겠는데요, 이때 알아야 될 함수가 setBounds입니다. 사용방법은 아래와 같습니다.



setBounds(가로위치, 세로위치, 가로길이, 세로길이);



위치를 결정하는건 해당 구성요소의 왼쪽위 꼭지점의 좌표인데요, 왼쪽 버튼을 예로 들면 30, 170이 되겠죠. 그리고 버튼의 가로길이는 122고 세로길이는 30이니까 아래처럼 코딩하면 되겠습니다.



btn1.setBounds(30, 170, 122, 30);



오른쪽 버튼의 경우에는 가로위치값만 다르겠네요. 30+122+30 해서 182가 되겠습니다.


코드와 결과화면은 아래와 같습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Study01.java
 
package study;
 
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // 레이아웃 설정
        frm.getContentPane().setLayout(null);
 
        // 버튼 생성
        JButton btn1 = new JButton("슬라삐");
        JButton btn2 = new JButton("슬라디");
 
        // ★ 버튼 위치와 크기 설정
        btn1.setBounds(3017012230);
        btn2.setBounds(18217012230);
 
        // ★ 프레임에다가 버튼 추가
        frm.getContentPane().add(btn1);
        frm.getContentPane().add(btn2);
 
        // 프레임이 보이도록 설정
        frm.setVisible(true);
 
    }
 
}
 
cs




원하던대로 잘 나오네요^^


아직은 버튼을 눌러도 아무런 반응이 없는데 다음시간에는 버튼이 동작하도록 코딩을 해보겠습니다.


감사합니다.



안녕하세요.


지난시간에는 지정해준 레이아웃에 따라 버튼의 위치와 크기가 자동으로 정해진다는 점을 배웠습니다.


이제 버튼의 위치와 크기를 원하는대로 정해줄까 하는데요, 그러기 위해서는 레이아웃을 null로 지정해줄 필요가 있습니다. 레이아웃이 없다는 뜻이죠. 코드를 보겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Study01.java
 
package study;
 
import javax.swing.JFrame;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
        
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // ★ 레이아웃 설정
        frm.getContentPane().setLayout(null);
        
        // 프레임이 보이도록 설정
        frm.setVisible(true);
        
        // ★ 컨텐츠 영역의 크기 표시
        System.out.println(frm.getContentPane().getSize());
        
    }
 
}
 
cs


(기존의 버튼 코드는 싹 지웠습니다. 30행은 조금 있다가 설명 드릴게요)


이제 종이나 그림판 등을 꺼내어 프레임의 설계도를 그려봅시다(저는 파워포인트로 했습니다). 대략 아래와 같은 모습이 되겠죠.



프레임에다가 버튼 두개를 배치해 놓은 그림입니다. 아직 치수는 기입해놓지 않았는데요, 빨갛게 표시해놓은 전체 가로길이와 세로길이는 몇일까요?


350, 300으로 착각하기 쉽지만 이건 전체 프레임의 크기이며 컨텐츠 영역의 크기는 그보다 조금 작습니다.


아까 코드의 30행이 바로 컨텐츠 영역의 크기를 표시하는 코드입니다. 콘솔창을 한번 봐주세요.



java.awt.Dimension[width=334,height=261]



가로가 334, 세로가 261이군요. 제목표시줄 때문에 세로길이가 생각보다 작음을 알 수 있습니다.

자, 이제 치수를 기입해보겠습니다.



강좌가 진행되면서 치수가 바뀔 수도 있습니다만 일단 이렇게 구상하고 진행하도록 하겠습니다.


다음시간에는 이렇게 구상해놓은 것을 코드로 구현해보도록 하겠습니다.


감사합니다.




안녕하세요.


레이아웃에 대해 배워보기 전에 우선 프레임의 구조를 살펴보도록 하겠습니다.




이처럼 제목표시줄까지 포함한 부분을 프레임 영역, 내용이 들어가는 부분에 한정하여 컨텐츠 영역이라고 합니다.



frm.add(btn1);



지난 시간에 사용했던 위의 코드는 버튼을 프레임 영역에 붙이는 코드일까요, 컨텐츠 영역에 붙이는 코드일까요?


네, frm이 프레임 객체이기 때문에 프레임 영역에 붙이는 코드입니다. 프레임 영역에 붙여도 결과적으로는 잘 붙었습니다만 원래 컨텐츠 영역에 붙이는 것이 정석입니다. 그래서 코드를 조금 수정하겠습니다.



frm.getContentPane().add(btn1);



중간에 복잡한 영어가 끼었네요^^; 이름에도 알 수 있듯이 컨텐츠 영역을 가져오는 함수입니다. 프레임에서 컨텐츠 영역을 가져와서 거기다가 버튼을 붙이는 방식입니다. 앞으로 프레임에 구성요소를 붙일때 번거롭더라도 중간에 getContentPane()을 넣어주도록 합시다.




자, 이제 레이아웃을 배워봅시다. 레이아웃은 '배치'라는 뜻인데요, 컨텐츠 영역에 부착되는 구성요소들을 어떻게 배치할 건지 정해줄 필요가 있습니다.


이때 사용하는 함수가 바로 setLayout().



frm.setLayout() ....... 노노


frm.getContentPane().setLayout() ......... 이렇게 쓰면 되겠습니다^^



셋 레이아웃 함수의 괄호 속에는 사용하고자 하는 레이아웃의 이름을 적어주면 되는데요, 다양한 레이아웃 중에 '플로우 레이아웃'을 사용해보도록 하겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Study01.java
 
package study;
 
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // ★ 레이아웃 설정
        FlowLayout fLay = new FlowLayout();
        frm.getContentPane().setLayout(fLay);
 
        // 버튼 생성
        JButton btn1 = new JButton("슬라삐");
 
        // ★ 프레임에다가 버튼 추가
        frm.getContentPane().add(btn1);
 
        // 프레임이 보이도록 설정
        frm.setVisible(true);
    }
 
}
 
cs

(추가되거나 수정된 부분에는 별표가 붙어있습니다)

26행에서 플로우 레이아웃 객체를 생성하여 27행에서 그 레이아웃으로 설정해 주었습니다.

실행해봅시다~




이제 우리가 바라던 버튼의 모습이네요 ㅎㅎ 버튼을 하나 더 만들어봅시다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Study01.java
 
package study;
 
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // 레이아웃 설정
        FlowLayout fLay = new FlowLayout();
        frm.getContentPane().setLayout(fLay);
 
        // ★ 버튼 생성
        JButton btn1 = new JButton("슬라삐");
        JButton btn2 = new JButton("슬라디");
 
        // ★ 프레임에다가 버튼 추가
        frm.getContentPane().add(btn1);
        frm.getContentPane().add(btn2);
 
        // 프레임이 보이도록 설정
        frm.setVisible(true);
    }
 
}
 
cs


어떤가요? 잘 되죠?


버튼을 두개 배치해보니까 플로우 레이아웃의 특징을 알 수가 있네요. 컨텐츠 영역의 맨 위에 가운데 정렬이 되며, 추가되는 요소는 우측에 생성되네요.




그런데말입니다. 앞으로 우리는 레이아웃을 사용하지 않을 생각입니다. 레이아웃을 사용하면 구성요소의 크기와 위치를 자동으로 정해주기 때문에 자유도가 떨어지거든요. 그럼에도 레이아웃을 배운 이유는 레이아웃을 배워야 레이아웃을 사용하지 않는다는게 무슨 뜻인지 이해하기 쉬울 것 같아서입니다 ㅎㅎ


다음 시간에는 버튼의 위치와 크기를 자유롭게 정해보도록 하겠습니다.


감사합니다.


안녕하세요.


지난 시간에는 프레임을 만들어보았습니다.


이번 시간에는 프레임에다가 버튼을 추가시켜보도록 하겠습니다.


코드를 보시죠.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Study01.java
 
package study;
 
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class Study01 {
 
    public static void main(String[] args) {
 
        // 프레임 생성
        JFrame frm = new JFrame("슬라임 퇴치하기");
 
        // 프레임 크기 설정
        frm.setSize(350300);
 
        // 프레임을 화면 가운데에 배치
        frm.setLocationRelativeTo(null);
 
        // 프레임을 닫았을 때 메모리에서 제거되도록 설정
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        // ★ 버튼 생성
        JButton btn1 = new JButton("슬라삐");
 
        // ★ 프레임에다가 버튼 추가
        frm.add(btn1);
 
        // 프레임이 보이도록 설정
        frm.setVisible(true);
    }
 
}
 
cs

주석에 별표가 붙어있는 부분이 새로 추가한 부분입니다.


- 25행 : 버튼 생성은 프레임 생성과 동일한 방식입니다. JButton에 빨간줄이 그인다면 '컨트롤+시프트+오'

- 28행 : 버튼을 생성만 했다고 바로 보이지는 않습니다. 프레임에다가 추가를 해줘야 되죠. add함수는 추가대상을 인수로 받아서 추가해주는 역할을 합니다.

- 31행 : 프레임이 보이도록 설정하는 코드는 맨 마지막에 와야 된다는 점 명심하세요~


자, 실행해봅시다.




ㅎㅎㅎ 버튼은 만들어졌는데 창을 가득 메워버렸군요. 앞으로 추가할 요소들이 많은데 이녀석이 공간을 다 차지해버리면 난감한데요 ㅎㅎ


이런 사태가 벌어진 원인은 프레임에다가 '레이아웃'을 설정하지 않아서입니다.


다음 시간에는 레이아웃에 대해서 배워보겠습니다.


감사합니다.



+ Recent posts