JAVA chapter17. javaFX. 17.12 화면 이동과 애니메이션

JAVA/CONCEPT 2018. 1. 16. 16:35 |

JAVA chapter17. javaFX. 


17.12 화면 이동과 애니메이션

17.12.1 화면 이동



AppMain.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package sec12.exam01_move_animation;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
public class AppMain extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("AppMain");
        Parent root= FXMLLoader.load(getClass().getResource("root.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setScene(scene); // 메인 화면 설정
        primaryStage.setWidth(350);       //윈도우의 고정 폭 설정
        primaryStage.setHeight(500);      //윈도우의 고정 높이 설정
        primaryStage.setResizable(false);   //윈도우 크기를 조정할 수 없도록 함
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
cs


LoginController.java // 로그인 화면 컨트롤러
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package sec12.exam01_move_animation;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;
 
public class LoginController implements Initializable {
    @FXML private BorderPane login;
    @FXML private Button btnMain;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnMain.setOnAction(e->handleBtnMain(e));
    }
    
    public void handleBtnMain(ActionEvent event) {
        try {
            StackPane root = (StackPane) btnMain.getScene().getRoot();
            
            login.setTranslateX(0); // 시작값을 0으로 설정
            
            Timeline timeline = new Timeline();
            KeyValue keyValue = new KeyValue(login.translateXProperty(), 350); // 종료값을 350으로 설정하고
            KeyFrame keyFrame = new KeyFrame(
                Duration.millis(100), // 0.1초간 애니메이션 실행
                new EventHandler<ActionEvent>() { // 애니메이션이 종료되면 handle() 메소드가 자동 호출됨
                    @Override
                    public void handle(ActionEvent event) {
                        root.getChildren().remove(login); // StackPane에서 로그인 화면 제거
                    } // 애니메이션 종료 후 로그인 화면 제거
                }, 
                keyValue
            );
            timeline.getKeyFrames().add(keyFrame);
            timeline.play();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}
cs


RootController.java // 메인 화면 컨트롤러
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package sec12.exam01_move_animation;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;
 
public class RootController implements Initializable {
    @FXML private Button btnLogin;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnLogin.setOnAction(e->handleBtnLogin(e));
    }
    
    public void  handleBtnLogin(ActionEvent event) {
        try { // 로그인 화면으로 이동
            Parent login= FXMLLoader.load(getClass().getResource("login.fxml"));
            StackPane root = (StackPane) btnLogin.getScene().getRoot();
            root.getChildren().add(login);
            
            login.setTranslateX(350); // 시작값을 350으로 설정(로그인 화면의 폭)
 
            Timeline timeline = new Timeline(); // 종료값을 0으로 설정하고, 0.1초간 지속
            KeyValue keyValue = new KeyValue(login.translateXProperty(), 0); //
            KeyFrame keyFrame = new KeyFrame(Duration.millis(100), keyValue); //
            timeline.getKeyFrames().add(keyFrame); //
            timeline.play();//
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}
cs


login.fxml // 로그인 화면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.*?>
 
<BorderPane  xmlns:fx="http://javafx.com/fxml" 
    fx:id="login" prefHeight="500" prefWidth="350" 
    fx:controller="sec12.exam01_move_animation.LoginController">
    <top>
        <BorderPane style="-fx-background-color: #eaeaea;">
            <left>
                <Button fx:id="btnMain" text="메인"/>
            </left>
            <center>            
                <Label alignment="CENTER" prefWidth="215" text="로그인 화면" />
            </center>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </BorderPane>
    </top>
    
   <center>
      <VBox style="-fx-background-color: #ffff00;">
      </VBox>
   </center>        
</BorderPane>
cs


root.fxml // 메인 화면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.*?>
 
<StackPane xmlns:fx="http://javafx.com/fxml" 
    prefHeight="500" prefWidth="350" 
    fx:controller="sec12.exam01_move_animation.RootController">
    <children>
        <BorderPane>
            <top>
                <BorderPane style="-fx-background-color: #eaeaea;">
                    <center>            
                        <Label alignment="CENTER" prefWidth="215" text="메인 화면" />
                    </center>
                    
                    <right>
                        <Button fx:id="btnLogin" text="로그인"/>
                    </right>
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                </BorderPane>
            </top>
            
           <center>
              <VBox style="-fx-background-color: #0000ff;">
              </VBox>
           </center>        
        </BorderPane>
    </children>
</StackPane>
cs


17.12.2 애니메이션


AppMain.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package sec12.exam02_move_animation_sample;
 
 
 
import java.io.IOException;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class AppMain extends Application {
    public static StackPane stackPane;
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("AppMain");
        stackPane= (StackPane) FXMLLoader.load(AppMain.class.getResource("main/main_scene.fxml"));
        Scene scene = new Scene(AppMain.stackPane);
        primaryStage.setScene(scene);
        primaryStage.setWidth(350);
        primaryStage.setHeight(550);
        primaryStage.setResizable(false);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
cs


Animation.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
package sec12.exam02_move_animation_sample.util;
 
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.util.Duration;
 
public class Animation {
    /**
     * @param
     * start: 0.0~width
     * end: 0.0~width
     */        
    public static void slide(Node node, double start, double end) {
        node.setTranslateX(start);
        Timeline timeline = new Timeline();
        KeyValue keyValue = new KeyValue(node.translateXProperty(), end);
        KeyFrame keyFrame = new KeyFrame(Duration.millis(300), keyValue);
        timeline.getKeyFrames().add(keyFrame);
        timeline.play();
    }
    
    public static void slide(Node node, double start, double end, EventHandler<ActionEvent> onFinish) {
        node.setTranslateX(start);
        Timeline timeline = new Timeline();
        KeyValue keyValue = new KeyValue(node.translateXProperty(), end);
        KeyFrame keyFrame = new KeyFrame(Duration.millis(300), onFinish, keyValue);
        timeline.getKeyFrames().add(keyFrame);
        timeline.play();
    }
 
    /**
     * @param
     * start: 0.0~1.0
     * end: 0.0~1.0
     */    
    public static void fade(Node node, double start, double end) {
        node.setOpacity(start);
        Timeline timeline = new Timeline();
        KeyValue keyValue = new KeyValue(node.opacityProperty(), end);
        KeyFrame keyFrame = new KeyFrame(Duration.millis(500), keyValue);
        timeline.getKeyFrames().add(keyFrame);
        timeline.play();
    }
    
    public static void fade(Node node, double start, double end, EventHandler<ActionEvent> onFinish) {
        node.setOpacity(start);
        Timeline timeline = new Timeline();
        KeyValue keyValue = new KeyValue(node.opacityProperty(), end);
        KeyFrame keyFrame = new KeyFrame(Duration.millis(500), onFinish, keyValue);
        timeline.getKeyFrames().add(keyFrame);
        timeline.play();
    }        
}
cs


MainController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package sec12.exam02_move_animation_sample.main;
 
 
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.control.Button;
import sec12.exam02_move_animation_sample.AppMain;
import sec12.exam02_move_animation_sample.list.ListController;
import sec12.exam02_move_animation_sample.util.Animation;
 
public class MainController implements Initializable {
    @FXML private Button btnList;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnList.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                handleBtnList(event);
            }
        });
    }
    
    public void handleBtnList(ActionEvent event) {
        try {
            Parent parent = FXMLLoader.load(ListController.class.getResource("list_scene.fxml"));
            AppMain.stackPane.getChildren().add(parent);
            Animation.fade(parent, 0, 1);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
cs


ListController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
package sec12.exam02_move_animation_sample.list;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Font;
import sec12.exam02_move_animation_sample.AppMain;
import sec12.exam02_move_animation_sample.util.Animation;
 
public class ListController implements Initializable {
    @FXML private Button btnLeft;
    @FXML private Button btnRight;
    @FXML private StackPane listStackPane;    
    @FXML private Button btnHome;
    private int currentPage = 1;
    private int totalPage = 4;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnLeft.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                handleBtnLeft(event);
            }
        });
        
        btnRight.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                handleBtnRight(event);
            }
        });
        
        btnHome.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                handleBtnHome(event);
            }
        });        
        
        listView = getList(currentPage);
        listStackPane.getChildren().add(listView);
        showButton();
    }
    
    private ListView listView;
    
    public void handleBtnLeft(ActionEvent event) {
        if(currentPage>1) { 
            currentPage--; 
            ListView<BorderPane> listView = getList(currentPage);
            listStackPane.getChildren().add(0, listView);
            Animation.slide(listStackPane.getChildren().get(1), 0, 350, new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    listStackPane.getChildren().remove(1);
                }
            });
            showButton();
        }
    }    
    
    public void handleBtnRight(ActionEvent event) {
        if(currentPage<totalPage) {
            currentPage++;
            ListView<BorderPane> listView = getList(currentPage);
            listStackPane.getChildren().add(listView);
            Animation.slide(listView, 350, 0, new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    listStackPane.getChildren().remove(0);
                }
            });
            showButton();
        }
    }
    
    public void handleBtnHome(ActionEvent event) {
        Animation.fade(AppMain.stackPane.getChildren().get(1), 1, 0, new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                AppMain.stackPane.getChildren().remove(1);
            }
        });
    }    
    
    private void showButton() {
        if(currentPage == 1) {
            btnLeft.setVisible(false);
        } else {
            btnLeft.setVisible(true);
        }
        if(currentPage == totalPage) {
            btnRight.setVisible(false);
        } else {
            btnRight.setVisible(true);
        }
    }
    
    private ListView<BorderPane> getList(int page) {
        ListView<BorderPane> listView = new ListView<BorderPane>();
        int start = (page-1)*5 + 1;
        int end = page*5;
        for(int i=start; i<=end; i++) {
            BorderPane borderPane = new BorderPane();
            
            Image image = new Image(getClass().getResource("../images/phone" + ((i<10)?("0" + i):i)+ ".png").toString());
            ImageView imageView = new ImageView(image);
            imageView.setFitWidth(50);
            imageView.setFitHeight(75);
            borderPane.setLeft(imageView);
            
            HBox hbox = new HBox();
            hbox.setPadding(new Insets(10));
            hbox.setAlignment(Pos.CENTER_LEFT);
            Label label = new Label("스마트폰 0"+i);
            label.setFont(new Font(15));
            hbox.getChildren().add(label);
            borderPane.setCenter(hbox);
            
            Button button = new Button("상세보기");
            borderPane.setRight(button);
            BorderPane.setAlignment(button, Pos.CENTER);
            
            listView.getItems().add(borderPane);
        }
        return listView;
    }
}
 
cs



main_scenc.fxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.effect.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.input.*?>
<?import javafx.scene.image.*?>
<?import javafx.collections.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Border?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
 
<StackPane fx:id="stackPane" prefHeight="500" prefWidth="350" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sec12.exam02_move_animation_sample.main.MainController">
    <children>
        <VBox alignment="CENTER" spacing="100.0">
            <children>
                   <ImageView fitHeight="250.0" fitWidth="330.0" preserveRatio="true">
                       <image>
                      <Image url="@../images/background1.png" />
                   </image>
                   <VBox.margin>
                      <Insets top="30.0" />
                   </VBox.margin>
                   </ImageView>
                   <Button fx:id="btnList" prefHeight="50.0" prefWidth="200.0" text="폰목록 보기" />
            </children>
        </VBox>
    </children>
</StackPane>
cs



list_scene.fxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.effect.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.input.*?>
<?import javafx.scene.image.*?>
<?import javafx.collections.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Border?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.control.Button?>
 
<BorderPane prefHeight="500" prefWidth="350" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sec12.exam02_move_animation_sample.list.ListController">
    <top>
        <BorderPane style="-fx-background-color: #eaeaea;">
            <left>
                <Button fx:id="btnLeft" prefHeight="30" text="이전" />
            </left>
 
            <center>            
                <Label alignment="CENTER" prefWidth="215" text="목록" />
            </center>
            
            <right>
                <Button fx:id="btnRight" prefHeight="30" text="다음" />
            </right>
             
            <padding>
                <Insets topRightBottomLeft="3" />
            </padding>
        </BorderPane>
    </top>
    
   <center>
      <StackPane fx:id="listStackPane" />
   </center>    
   
   <bottom>
        <BorderPane style="-fx-background-color: #eaeaea;">
            <center>            
                <HBox alignment="CENTER">
                    <children>
                        <Button fx:id="btnHome" prefHeight="40" prefWidth="100" text="홈" />
                    </children>
                    <padding>
                        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                    </padding>
                </HBox>
            </center>
        </BorderPane>           
   </bottom>    
</BorderPane>
 
cs


'JAVA > CONCEPT' 카테고리의 다른 글

JAVA chapter18. IO 기반 입출력 및 네트워킹. 18.3 콘솔 입출력  (0) 2018.01.16
JAVA chapter18. IO 기반 입출력 및 네트워킹. 18.1 IO 패키지 소개, 18.2 입력 스트림과 출력 스트림  (0) 2018.01.16
JAVA chapter17. javaFX. 17.11 JavaFX 스레드 동시성  (0) 2018.01.16
JAVA chapter17. javaFX. 17.10 JavaFX CSS 스타일(1)  (0) 2018.01.16
JAVA chapter17. javaFX. 17.9 JavaFX 다이얼로그 // 다시  (0) 2018.01.16
Posted by 너래쟁이
:

티스토리툴바