자바로 PC방 프로그램만들기

3초식. [뷰]로그인 화면 만들기

로그인 화면 만들기..

여기서는 View단을 구성해보려합니다.

 

동영상이 화질이 안 좋으실 시, 수동으로 동영상 품질을 설정에서 올려주시면 됩니다. 

준비물 : http://adunhansa.tistory.com/156 이미지 파일

오늘 배우는 것 :

JLayered를 통해서 psd를 자바에서 구현하기

컴포넌트 커스터마이징

해야할일 순서

  1. JFrame상속해서, 세팅
  2. 레이아웃 잡기 ( JLayeredPane )
  3. 각각의 패널과 컴포넌트 설정( 이미지패널, 텍스트필드, 버튼)
  4. 세팅

1.JFrame세팅

public class LoginFrame extends JFrame {
    // 메인
	public static void main(String[] args) {
		new LoginFrame();
	}

	// 생성자
	public LoginFrame() {
		setTitle("로그인 테스트");
		setSize(1600, 900);
		setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		//안에 들어갈 내용물들, 레이아웃, 패널설정, 컴포넌트들
		setVisible(true);
	}
}

 

2. 레이아웃 잡기

여기서는  각각의 컴포넌트들을 순서대로 넣어주는 JLayerdPanel을 이용하기로 한다.

 

// 레이아웃 설정
    	setLayout(null);
		JLayeredPane layeredPane = new JLayeredPane();
		layeredPane.setBounds(0, 0, 1600, 900);
		layeredPane.setLayout(null);
        
        
        //마지막 setvisible(true) 바로 위에..
        add(layeredPane);

setLayout은 현재 JFrame의 레이아웃설정이다. 여기서 설명을 하자면 상대레이아웃, 보더레이아웃, 카드레이아웃등 많은 레이아웃 형태를 자바에서는 지원하고 있다. 하지만 본 프로그램에서는 이미 PSD로 디자인시안을 잡았기 때문에 절대경로 레이아웃setLayout(null);을 사용하였다. 

절대경로에서는 보는바와 같이 안의 컴포넌트들의 가로세로위치, 가로세로길이를 일일이 정해줘야 한다.

패널의 경우는 자신안의 구성물들의 레이아웃을 다시 정할 수 있다. 

마지막에는 ADD를 해줘야 한다. 

 

3. 각각의 컴포넌트 설정

전역변수로 이러한 변수들을 설정해준다.

(추후 생성자가 아닌 다른 메소드에서 접근해서 이벤트 처리를 해야 하기 때문)

BufferedImage img = null;
JTextField loginTextField;
JPasswordField passwordField;
JButton bt;

각각 이미지, 텍스트필드, 비밀번호필드, 버튼이다.

 

이미지 패널 설정

    	// 패널1
		// 이미지 받아오기
		try {
			img = ImageIO.read(new File("img/login.png"));
		} catch (IOException e) {
			System.out.println("이미지 불러오기 실패");
			System.exit(0);
		}
		
		MyPanel panel = new MyPanel();
		panel.setBounds(0, 0, 1600, 900);
        
        // 마지막 추가들.
        //반드시 layeredPane의 제일 마지막에 add해줘야함.
    	layeredPane.add(panel);
 //생성자 바깥으로 다음과 같은 내부클래스를 하나 만들어준다.
        class MyPanel extends JPanel {
    	public void paint(Graphics g) {
			g.drawImage(img, 0, 0, null);
		}
	    }

책에 나온 기초 샘플대로 내부클래스로 작업했지만.. 한번만 쓰고 말 경우에는 무명클래스로 내부에서 작업해줘도 됩니다. 

텍스트 필드들 설정

    	// 로그인 필드
		loginTextField = new JTextField(15);
		loginTextField.setBounds(731, 399, 280, 30);
		layeredPane.add(loginTextField);

		// 패스워드
		passwordField = new JPasswordField(15);
		passwordField.setBounds(731, 529, 280, 30);
		layeredPane.add(passwordField);

		// 로그인버튼 추가
		bt = new JButton(new ImageIcon("img/btLogin_hud.png"));
		bt.setBounds(755, 689, 104, 48);
		layeredPane.add(bt);

4. 세팅

저대로 실행을 하면 일반적인 스윙이므로 커스터마이징이 필요합니다.

    	//로그인 내용
		loginTextField.setOpaque(false);
		loginTextField.setForeground(Color.green);
		loginTextField.setBorder(javax.swing.BorderFactory.createEmptyBorder());
		//비밀번호 내용
		passwordField.setOpaque(false);
		passwordField.setForeground(Color.green);
		passwordField.setBorder(javax.swing.BorderFactory.createEmptyBorder());
		// 버튼 투명처리
		bt.setBorderPainted(false);
		bt.setFocusPainted(false);
		bt.setContentAreaFilled(false);

 

총 소스

package view;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLayeredPane;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;

public class LoginFrame extends JFrame {

    BufferedImage img = null;
	JTextField loginTextField;
	JPasswordField passwordField;
	JButton bt;

	// 메인
	public static void main(String[] args) {
		new LoginFrame();
	}

	// 생성자
	public LoginFrame() {
		setTitle("로그인 테스트");
		setSize(1600, 900);
		setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

		// 레이아웃 설정
		setLayout(null);
		JLayeredPane layeredPane = new JLayeredPane();
		layeredPane.setBounds(0, 0, 1600, 900);
		layeredPane.setLayout(null);

		// 패널1
		// 이미지 받아오기
		try {
			img = ImageIO.read(new File("img/login.png"));
		} catch (IOException e) {
			System.out.println("이미지 불러오기 실패");
			System.exit(0);
		}
		
		MyPanel panel = new MyPanel();
		panel.setBounds(0, 0, 1600, 900);
		

		// 로그인 필드
		loginTextField = new JTextField(15);
		loginTextField.setBounds(731, 399, 280, 30);
		layeredPane.add(loginTextField);
		loginTextField.setOpaque(false);
		loginTextField.setForeground(Color.green);
		loginTextField.setBorder(javax.swing.BorderFactory.createEmptyBorder());
		// 패스워드
		passwordField = new JPasswordField(15);
		passwordField.setBounds(731, 529, 280, 30);
		passwordField.setOpaque(false);
		passwordField.setForeground(Color.green);
		passwordField.setBorder(javax.swing.BorderFactory.createEmptyBorder());
		layeredPane.add(passwordField);

		// 로그인버튼 추가
		bt = new JButton(new ImageIcon("img/btLogin_hud.png"));
		bt.setBounds(755, 689, 104, 48);

		// 버튼 투명처리
		bt.setBorderPainted(false);
		bt.setFocusPainted(false);
		bt.setContentAreaFilled(false);

		layeredPane.add(bt);

		// 마지막 추가들
		layeredPane.add(panel);
		add(layeredPane);
		setVisible(true);
	}

	class MyPanel extends JPanel {
		public void paint(Graphics g) {
			g.drawImage(img, 0, 0, null);
		}
	}

}

 

댓글

댓글 본문
  1. 최환영
    passwoerFile.setText("");
    이런식으로 구현하시면 될듯 합니다!
    대화보기
    • 정해연
      이미지 파일을 다른것을 내주면 될까요?
    • 미니그마
      잘봣습니당 ㅎㅎ
    • Eleanee
      좋은 강좌 정말 감사합니다^^
    • 아라한사
      입력하고 난뒤 패스워드가 맞지 않으면요?

      passwordField.setText(""); 뭐 이런걸로 해주면 되지 않을까요? ㅎ
      대화보기
      • 지수
        혹시 passwordField요 입력하고 난뒤에 버튼을 클릭하고 난뒤에 다시입력 할 때는 비워져 있게 할려고 하는데 어떻게 하는지 알 수 있을 까요??
      • 개꿀강좌
        정보 정말 감사합니다~!
      • 아라한사
        감사합니다. 요즘 바빠서 잠시 뜸했는데 업글 좀 할게요 ㅎㅎㅎㅎ
        대화보기
        • 이지혜
          좋은 강좌 감사드립니다!!1
        버전 관리
        아라한사
        현재 버전
        선택 버전
        graphittie 자세히 보기