仿微信聊天程序 - 07. 好友信息-526互联

本文是仿微信聊天程序专栏的第七篇文章，主要记录了【好友信息】的界面实现。

界面设计

这里的好友信息界面没有处理复杂的功能，仅仅显示好友信息，支持在此界面中发起聊天而已，总体的界面设计如下图所示：

界面布局

好友信息仅仅只是信息展示，布局相对比较简单，这里采用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);
    }
}