本文是仿微信聊天程序專欄的第七篇文章，主要記錄了【好友信息】的界面實現。

界面設計

這里的好友信息界面沒有處理復雜的功能，僅僅顯示好友信息，支持在此界面中發起聊天而已，總體的界面設計如下圖所示：

界面布局

好友信息僅僅只是信息展示，布局相對比較簡單，這里采用VBox和HBox組合使用的方式，完整的布局fxml代碼如下：

<VBox prefHeight="610.0" prefWidth="546.0" styleClass="profile-pane"
      stylesheets="@ContactsProfileController.css"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="michong.javafx.wx.view.contacts.ContactsProfileController">
    <children>
        <HBox alignment="CENTER" spacing="20.0" VBox.vgrow="ALWAYS">
            <children>
                <VBox alignment="CENTER_LEFT" spacing="5.0" HBox.hgrow="ALWAYS">
                    <children>
                        <Label fx:id="nicknameLabel" style="-fx-font-size: 26px;"/>
                        <Label styleClass="autograph-label" text="微信小程序搜一搜: Coding魚塘"/>
                    </children>
                </VBox>
                <ImageView fx:id="avatarImageView" fitHeight="60.0" fitWidth="60.0"/>
            </children>
            <padding>
                <Insets bottom="100.0" left="100.0" right="100.0" top="30.0"/>
            </padding>
        </HBox>
        <Separator>
            <padding>
                <Insets left="100.0" right="100.0"/>
            </padding>
            <VBox.margin>
                <Insets top="50.0"/>
            </VBox.margin>
        </Separator>
        <StackPane prefHeight="200.0">
            <children>
                <Button styleClass="send-message-button" text="發消息" onAction="#onSendMessageClick"/>
            </children>
        </StackPane>
    </children>
</VBox>

樣式美化

好友信息界面的樣式美化主要針對按鈕，相對比較簡單，完整的CSS代碼如下：

.profile-pane {
  -fx-background-color: #fafafa;
}
.autograph-label {
  -fx-font-size: 14px;
  -fx-text-fill: #c0c0c0;
}
.send-message-button {
  -fx-padding: 10px 40px;
  -fx-font-size: 14px;
  -fx-text-fill: #fff;
  -fx-fill: #fff;
  -fx-background-color: #5cb85c;
  -fx-border-color: #4cae4c;
}
.send-message-button:hover {
  -fx-cursor: hand;
  -fx-background-color: #449d44;
  -fx-border-color: #398439;
}

邏輯控制

調整原來好友列表的事件控制邏輯，當單擊好友列表項時顯示好友信息界面，這里只是靜態顯示，動態拉取好友信息后續功能將繼續完善，控制代碼如下：

void initializeEvent() {
    contactsListView.getSelectionModel().selectedItemProperty().addListener((obj, ov, nv) -> {
        if (Objects.nonNull(nv)) {
            Pane main = FXComponent.mainComponent();
            main.getChildren().clear();
            main.getChildren().add(FXComponent.contactsProfileComponent(nv.getId()));
        }
    });
}

數據填充

在邏輯控制部分加載界面的時候會傳入好友的ID，在Controller中可以拉去這個好友的信息，這里需要用到Controller傳值，所以自定義了一個UserDataController接口：

/**
 * @author michong
 */
public interface UserDataController {
    void initialize(Object data);
}

好友信息的Controller實現這個接口，根據不同的ID顯示不用的用戶信息：

/**
 * @author michong
 */
public class ContactsProfileController implements UserDataController {
    public ImageView avatarImageView;
    public Label nicknameLabel;

    private Long contactsId;

    @Override
    public void initialize(Object data) {
        contactsId = (Long) data;
        initializeUI();
        initializeEvent();
        renderDebugData();
    }

    void initializeUI() {
    }

    void initializeEvent() {
    }

    void renderDebugData() {
        nicknameLabel.setText("WxID: " + contactsId);
        avatarImageView.setImage(FXAvatar.def());
    }

    public void onSendMessageClick(ActionEvent actionEvent) {
    }
}

支持傳參

FX新增支持傳參數的fxml.Controller加載方法：

public static Parent fxml(Class<? extends UserDataController> controller, Object data) {
    String uri = "/" + controller.getName().replace(".", "/") + ".fxml";
    try {
        FXMLLoader loader = new FXMLLoader(Objects.requireNonNull(controller.getResource(uri)));
        Parent root = loader.load();
        UserDataController ctrl = loader.getController();
        ctrl.initialize(data);
        return root;
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}