JAVA fx - 상호작용<Event>4 버튼을 클릭하자 여백이 달라진다. (2022-08-19)

1. 서론

이전에 버튼을 만들어서 클릭해본 적 있다.

 

근데 버튼을 눌렀을 때 좀 더 '눌렀다!' 라는 느낌을 받고 싶다.

어떻게 해야 할까?

 

2. 본론

결론부터 말하자면 Padding을 주어 그러니까 여백을 주어 해결이 가능하다.

Padding은 new Insets 'num'을 하게 되면 전체에 num만큼 여백을 주는 것이지만

(1n, n2, n3, n4) 라고 표현하게 되면 상부에 n1만큼, 우측에 n2만큼, 하부에 n3만큼, 좌측에 n4만큼

여백을 준다는 뜻이 된다.

 

그럼 예제를 보자.

 

package events;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class EventEx4 extends Application{
	@Override
	public void start(Stage primaryStage) throws Exception {
		Button button1 = new Button();
		button1.setText("클릭");
		button1.setPrefSize(50, 50);

		Button button2 = new Button();
		ImageView image = new ImageView("/img/qwer.png");
		image.setFitHeight(50);
		image.setFitWidth(50);
		button2.setGraphic(image);
		
		button1.setStyle("-fx-padding: 10 10 10 10");
		button2.setStyle("-fx-padding: 10 10 10 10");

		button1.setOnMousePressed(event -> {
			button1.setStyle("-fx-padding: 15 10 10 10");
		});
		button1.setOnMouseReleased(event -> {
			button1.setStyle("-fx-padding: 10 10 10 10");
		});
		
		button2.setOnMousePressed(event -> {
			button2.setStyle("-fx-padding: 15 10 10 10");
		});
		button2.setOnMouseReleased(event -> {
			button2.setStyle("-fx-padding: 10 10 10 10");
		});
	
		HBox box = new HBox();
		box.getChildren().addAll(button1, button2);
		box.setAlignment(Pos.CENTER);
		box.setSpacing(40);

		primaryStage.setTitle("EventEx4");
		primaryStage.setScene(new Scene(box, 300, 200));
		primaryStage.show();
		
	}
	public static void main(String[] args) {
		launch(args);
	}
}

 

결과는....작성하여 확인해보자!!