계산기_GUI 구현_1차 시도

오늘은 계산기에 쓰일 GUI를 구상하고 초안을 만들어 봤다.

GUI를 다루는 게 처음이라 한참 걸렸다 ㅠㅠ 그래도 큰 틀은 짰고, 이제 디테일만 남았다.

 

GUI를 아이폰 기본계산기와 최대한 비슷하게 구현하는 것이 목표이다.

아이폰 기본 계산기 모습

 

옆의 아이폰 계산기의 모습에서 가장 눈에 띄는 특징은 다음과 같다

 

1. 배경화면은 검은색

2. 버튼의 다양한 컬러

3. 0버튼의 경우 다른 버튼보다 크기가 클 것

4. 버튼이 라운드 모양일 것

5. 입력하는 숫자가 텍스트 필드 오른쪽 아래 나타날 것

5. 숫자의 컬러는 하얀색/검은색

6. 숫자는 1000 단위로 ,로 구분할 것

 

 

 

 

 

1. 1차 시도 코드

package calculator;

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

public class InterfaceDemo1 extends JFrame {
	JTextField inputText;
	String names[] = { "AC", "C", "%", "/", "7", "8", "9", "*", "4", "5", "6", "-", "1", "2", "3", "+", ".", "0", "+/-",
			"=" };

	public InterfaceDemo1() {
		super("Cal_Demo_Try2");

		BorderLayout layout = new BorderLayout(2, 2);
		setLayout(layout);

		inputText = new JTextField("", SwingConstants.CENTER);
		inputText.setHorizontalAlignment(JTextField.RIGHT);
		inputText.setFont(new Font(Font.SANS_SERIF, Font.ITALIC, 50));
		inputText.setBounds(0, 0, 450, 50);
		inputText.setBackground(Color.black);
		inputText.setForeground(Color.white);

		JPanel pad = new JPanel(new GridLayout(5, 4));
		pad.setBackground(Color.black);
		JButton buttons[] = new JButton[names.length];

		for (int count = 0; count < names.length; count++) {
			buttons[count] = new JButton(names[count]);
			buttons[count].setBackground(Color.orange);
			buttons[count].setForeground(Color.white);
			pad.add(buttons[count]);
		}


		add(inputText, BorderLayout.NORTH);
		add(pad, BorderLayout.CENTER);

	}

	public static void main(String[] args) {
		InterfaceDemo1 cal = new InterfaceDemo1();

		cal.setSize(350, 450);
		cal.setLocationRelativeTo(null); // 창이 가운데 뜨도록 정렬
		cal.setResizable(true);
		cal.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		cal.setVisible(true);
	}

}

공부를 하면서 코드를 짜보긴 했는데 여기서 인풋 값을 바꿔도 결과 값이 안 바뀌는 부분들이 있다.

		inputText = new JTextField("", SwingConstants.CENTER);
		inputText.setHorizontalAlignment(JTextField.RIGHT);
		inputText.setBounds(0, 0, 450, 50);

이 것들인데 무엇을 의미하고 지시하는 코드인지 알아 볼 필요가 있을 듯... 

 

2. 1차시도 결과값

아직까지는 허접한 계산기 모형이지만,,, 아직 1차 시도니깐 이정도면 만족스럽다.

 

3. 개선점

• 버튼을 라운드로 만들 것
• 버튼의 백그라운드컬러와 포그라운드 컬러를 커스텀 컬러를 통해 조정
• 키패드를 우선 5*4에 맞게 해 놨는데, 0버튼을 아이폰 계산기처럼 바꾸게 된다면 레이아웃 수정 필요
• 텍스트필드의 크기를 중 높이를 크게 하고 숫자가 입력되는 위치를 아랫쪽으로 조정
• 숫자 입력 시, 자동으로 1000 단위마다 ,가 나오게 하기

개선해야 할 점이 많은데 저 중에서 어디까지 내가 스스로 가능할 지 모르겠다.

하지만 내가 만들고 싶은 건 GUI가 아니라 진짜 계산이 동작하는 계산기이기 때문에 

정교하고 세련되게 GUI를 못 만든다고 하더라도 넘어가고 내일은 계산기에 실제 계산 동작 코드를 연결하는 것까지 하는 것이 목표이다.