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. 레이아웃 잡기

 

// 레이아웃 설정
    	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);
		}
	}

}