本文是仿微信聊天程序专栏的第四篇文章,主要记录了【主界面】的实现。
界面设计
仿微信聊天程序的主界面总体跟微信的主界面差不多,但是比微信的主界面简单得多,如下图所示:
界面布局
主界面整个界面采用HBox布局,分为左中右三个部分,最左边是菜单栏,中间是联系人列表或对话信息列表,最右边是聊天窗口或设置信息窗口,完整的fxml如下:
<HBox prefHeight="640.0"
prefWidth="860.0" stylesheets="@MainController.css" xmlns:fx="http://javafx.com/fxml"
fx:controller="michong.javafx.wx.view.main.MainController">
<children>
<VBox alignment="CENTER" prefWidth="64.0" spacing="30.0" styleClass="left-menu">
<children>
<ImageView fx:id="avatarImageView" fitWidth="40" fitHeight="40"/>
<ToggleButton fx:id="chatButton" selected="true" styleClass="chat-button"
onAction="#onChatClick"/>
<ToggleButton fx:id="contactsButton" styleClass="contacts-button" onAction="#onContactsClick"/>
<Pane VBox.vgrow="ALWAYS"/>
<Button styleClass="setting-button"/>
</children>
<padding>
<Insets bottom="20.0" top="20.0"/>
</padding>
</VBox>
<VBox fx:id="listVBox" prefWidth="250.0" alignment="CENTER"/>
<VBox HBox.hgrow="ALWAYS">
<children>
<HBox prefHeight="30.0" styleClass="top-menu">
<children>
<Pane HBox.hgrow="ALWAYS"/>
<Button onAction="#onMinimizeClick" styleClass="minimize-button"/>
<Button onAction="#onExitClick" styleClass="exit-button"/>
</children>
</HBox>
<Pane fx:id="mainPane" VBox.vgrow="ALWAYS">
</Pane>
</children>
</VBox>
</children>
</HBox>
样式优化
在界面设计的图中,可以看到主界面针对一些按钮进行了样式优化,采用图片代替原始的按钮样式,具体的css样式如下:
.contacts-button {
-fx-cursor: hand;
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-pref-width: 32px;
-fx-pref-height: 32px;
-fx-background-size: 32px 32px;
-fx-background-image: url("/icon/contacts_0.png");
}
.contacts-button:selected {
-fx-background-image: url("/icon/contacts_1.png");
}
事件处理
主界面的事件主要涉及两个部分,菜单的切换以及最小化和关闭事件处理,具体的处理代码如下:
public class MainController implements Initializable {
public ImageView avatarImageView;
public ToggleButton chatButton;
public ToggleButton contactsButton;
public VBox listVBox;
public Pane mainPane;
@Override
public void initialize(URL location, ResourceBundle resources) {
initializeUI();
initializeEvent();
}
void initializeUI() {
ToggleGroup leftMenuToggleGroup = new ToggleGroup();
chatButton.setToggleGroup(leftMenuToggleGroup);
contactsButton.setToggleGroup(leftMenuToggleGroup);
onChatClick(null);
}
void initializeEvent() {
}
public void onChatClick(ActionEvent actionEvent) {
listVBox.getChildren().clear();
listVBox.getChildren().add(FXComponent.chatListController());
}
public void onContactsClick(ActionEvent actionEvent) {
listVBox.getChildren().clear();
listVBox.getChildren().add(FXComponent.contactsListController());
}
public void onMinimizeClick(ActionEvent actionEvent) {
FXContext.getPrimaryStage().setIconified(true);
}
public void onExitClick(ActionEvent actionEvent) {
Optional.ofNullable(FXContext.getPrimaryStage().getOnCloseRequest()).ifPresent(
e -> e.handle(new WindowEvent(FXContext.getPrimaryStage(), WindowEvent.WINDOW_CLOSE_REQUEST)));
FXContext.getPrimaryStage().close();
}
}
拖动支持
从界面设计图中可以看出,主界面抛弃了JavaFX原始的窗体外壳,自定义了最小化和关闭按钮来实现这些功能,具体的窗体配置如下:
primaryStage.initStyle(StageStyle.TRANSPARENT);
将窗体设置为StageStyle.TRANSPARENT后,需要自己实现窗体的拖动功能:
Parent root = FX.fxml(MainController.class);
FX.drag(primaryStage, root);
其中FX.drag的实现如下:
public static void drag(Stage stage, Parent root) {
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() {
private double xOffset = 0;
private double yOffset = 0;
@Override
public void handle(MouseEvent event) {
if (event.getEventType() == MouseEvent.MOUSE_PRESSED) {
xOffset = event.getSceneX();
yOffset = event.getSceneY();
} else if (event.getEventType() == MouseEvent.MOUSE_DRAGGED) {
stage.setX(event.getScreenX() - xOffset);
if (event.getScreenY() - yOffset < 0) {
stage.setY(0);
} else {
stage.setY(event.getScreenY() - yOffset);
}
}
}
};
root.setOnMousePressed(eventHandler);
root.setOnMouseDragged(eventHandler);
}
登录流程
调整原来的登录流程,登录成功后关闭登录窗口,显示主窗口:
public void onLoginClick(ActionEvent actionEvent) {
form.getForm().persist();
if (form.getForm().isValid()) {
FXContext.getLoginStage().close();
FXContext.getPrimaryStage().show();
}
}
标签:界面,04,fx,void,event,FXContext,仿微信,public
From: https://www.cnblogs.com/michong2022/p/17557754.html