자바 GUI 찍먹해보기 키오스크 모양 만들기

말하는 감자·2025년 3월 12일

Java 자바

내일배움캠프

목록 보기

17/73

오늘 목표

오늘 만들어볼 키오스크의 생김새다ㅣ

메뉴 가져온 맘스터치가 이렇게 생겼기 때문이다...

전체 화면을 3개로 나누고 .................
비율은 1:8:4 이런식으로 지정 불가능하나??

아주 기본세팅

창을 만들자

import java.awt.*;
import javax.swing.*;

...

JFrame frame = new JFrame();

뭘 쓸지 모르겠으니 일단 죄다 임포트 해준다 (*)

프레임이 보여야 하는가?

frame.setVisible(true);
frame.setVisible(false);

창으 ㄹ여러개 쓰는거면 보였다 안보였다 하게 조절할 수도 있을 듯
setVisible의 기본 디폴트 값은 false 이므로 보여야하면 필수 기재다

사용자가 창 크기조절을 할 수 있는가?

frame.setResizable(false);
frame.setResizable(true);

직관적이게 알 수 있지만 true면 조절이 가능하고 false면 조절이 불가능하다.

화면의 크기/ 비율 설정

frame.setPreferredSize(new Dimension( 840/12*9 , 840));
frame.setSize(840/12*9, 840);

일단 위아래로긴 모양을 만들어주려고 이렇게 써놨음
12:9 비율로 생성할거다!!
여기서 setPreferredSize같은 경우는 사용자가 창 크기조절을 할 수 있는가? 에 따라서
사용자가 창을 조정할때도 12:9 비율을 유지해달라~~ 하는것이다.

프레임 실행창 [X] 를 누르면 프로그램 종료되기

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

필요하면 넣고 아님 안넣어도된다.
난 있으면 편할 것 같아서 넣었다. 뭔가 당연한 기능이라 생각하기 땜시롱

여기까지 적용해주면

이ㅓㅀ게 아무것도없는 크기가 지정된 화면이뜬다.

필요한 레이아웃

비율은 요런너낌
GridLayout사용을 잘해야할 것 같군

알겠지만 처음 색깔로 나뉘는 곳은 BorderLayout 으로 북쪽에 카테고리, 남쪽에 장바구니를 고정시켜줄 생각이다.

BorderLayout

BorderLayout 은 Panel의 위치를 깔삼하게 배치해주는 역할을 해준다.

        JPanel categoryPanel = new JPanel();
        JPanel cartPanel = new JPanel();
        JPanel menuListPanel = new JPanel();
        
        categoryPanel.setBackground(Color.red);
        cartPanel.setBackground(Color.green);
        menuListPanel.setBackground(Color.blue);

        add(menuPanel, BorderLayout.CENTER);
        add(categoryPanel, BorderLayout.NORTH);
        add(cartPanel, BorderLayout.SOUTH);

이런식으로 북, 중앙, 남쪽 지정해줘서 뽑아보면

북, 남쪽에 지정된 패널 내용이업성서 이렇게 크게 보인는것 같다.

아니 색깔 너무쨍해서 눈아프네

GridLayout

정해진 위치를 정해진 칸에 맞게 등분을 해서 영역을 지정해주는 역할이다.
뭔가 정렬되고 깔끔하게 보이려면 이 그리드 레이아웃 사용을 잘 해야할 것 같다.

        JPanel categoryPanel = new JPanel(new GridLayout(2,1,10,10));
        JPanel cartPanel = new JPanel(new GridLayout(2,1,10,10));
        JPanel menuListPanel = new JPanel(new GridLayout(0,2,10,10));
        
        List<Menu> menuList = new ArrayList<Menu>();
        String[] categoryArr=  {"버거", "치킨", "사이드"};
        int length = 3;
        
        
        JLabel title = new JLabel("맘 스 땃 쥐");
        JButton[] num = new JButton[length];

        JPanel catPanel = new JPanel(new GridLayout(1, length, 10, 10));
        for(int i = 0; i < num.length; i++) {
            num[i] = new JButton(categoryArr[i]);
            catPanel.add(num[i]);
        }

        categoryPanel.add(title);
        categoryPanel.add(catPanel);

이번에는 카테고리 영역을 세로로 2등분해서, 위에는 가게 제목을 출력하고 아래에는 메뉴 버튼을 만들어봤다.
나중에 키오스크 객체를 집어넣을 때 바로 사용할 수 있게하려고 menuList 선언만해줫다..

이런식으로 나온다.
카테고리를 그리드로 표현하는 판넬과 그저 라벨인 두개 요소들을 categoryPanel에 넣어주면
new에서 행과열을 지정해줬기 대문에 영역을 1:1 으로 나누어서 반반씩 가지게 된다.

여기까지 만들면서 느낀점은 html의 div역할을 여기선 JPanel이 하고있는 것 같다는 점..?

JPanel엄청나올 것 같다...

📌new GridLayout(0,2,10,10)
여기보면 "행" 파라미터에 0을 집어넣었다.
이 뜻은 행이 몇개가 들어올진 모르겠지만 "열"은 2개로 맞추고 알아서 행을 늘려달라 는 소리임.

아래 장바구니 형태로 비슷하게 나누면 될 것 같아서 만들어올게

        JPanel cartListPanel = new JPanel(new GridLayout(0,1,10,10));
        JScrollPane cartScrollPanel = new JScrollPane(menuListPanel);
        JPanel infoPanel = new JPanel(new GridLayout(1,4,10,10));


        JLabel totalCount = new JLabel("총  N 개");
        JLabel totalPrice = new JLabel("총  100000 원");
        JButton resetCart = new JButton("장바구니 초기화");
        JButton gotoPurchase = new JButton(" 결제하기 ");
        infoPanel.add(totalCount);
        infoPanel.add(totalPrice);
        infoPanel.add(resetCart);
        infoPanel.add(gotoPurchase);

        cartPanel.add(cartScrollPanel);
        cartPanel.add(infoPanel);

보면 패널안에 패널안에 패널 이렇게 되어있어서 색상 표시가 눈에 안보인다..ㅠㅠㅠ
그래도 영역이 나눠져있는 테두리가 조금보이고있고,
출력하고자 하는 것들이 다 보이고있으니 일단은 배치부터 끝낸 뒤에 나중에 패딩이랑 모양새를 좀 고쳐보겠다 ^^

스크롤 패널과 안의 요소들

여기에 보면 파란표시가 되어잇는 패널은 이제 목록이 많아지면 스크롤이 생겨서 위아래로 볼 수 잇어야 한다.

        JPanel menuListPanel = new JPanel(new GridLayout(0,2,10,10));
        JScrollPane menuPanel = new JScrollPane(menuListPanel);

        JPanel cartListPanel = new JPanel(new GridLayout(0,1,10,10));
        JScrollPane cartScrollPanel = new JScrollPane(menuListPanel);