UI部分主要是由 swing 构成,所以最好先储备一些知识。甚至可以在 idea 中使用原生的 swing 进行编程。

使用GUI进行界面的绘制

新建一个包,然后在包名上右键单击,使用 New -> Swing UI Designer -> GUI Form 新建一个可视化的界面绘制器

image-20201225161202610

大概像这样

image-20201225162424706

绘制界面

接下来我们在IDEA中实现一个时钟,无论如何都居中并实时更新当前时间。image-20201225164309836

首先从右侧选择JLabel,并在主JPanle任意位置点击,放置一个 Label用来显示时间,并将其改名为 timeBox。

image-20201225162610723

在Label的左右两侧,添加两个 HSpacer 实现左右居中

image-20201225162818091

在Label的上下两侧,添加两个 VSpacer 实现上下居中,默认为上下居中,但是为了实现可掌控的上下居中,我们也加上。最终效果如下图。

image-20201225162938300

开始编程

默认会生成两个文件,一个 .form 一个 .java。

image-20201225163214294

点击 .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
package ui;

import javax.swing.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class NowTime
{
// 默认的面板,即这个ToolWindow
private JPanel panel;
// 即为刚才在设计器中定义的timebox
private JLabel timeBox;

public NowTime()
{
// 使用秒级定时器,每秒更新时间。
ScheduledExecutorService service = Executors.newSingleThreadScheduledExecutor();
service.scheduleAtFixedRate(() -> {
// 更新Jlabel的时间
timeBox.setText(
new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())
);
}, 0, 1, TimeUnit.SECONDS);
}

// 将Panel暴露出去,以便于注册
public JComponent getPanel()
{
return panel;
}
}

创建 ToolWindowFactory 的实现类,用于将我们的ToolWindow绘制到IDE中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package ui;

import com.intellij.openapi.project.Project;
import com.intellij.openapi.wm.ToolWindow;
import com.intellij.openapi.wm.ToolWindowFactory;
import com.intellij.ui.content.Content;
import com.intellij.ui.content.ContentFactory;
import org.jetbrains.annotations.NotNull;

public class TimeboxWindow implements ToolWindowFactory
{
public void createToolWindowContent(@NotNull Project project, @NotNull ToolWindow toolWindow)
{
// 获取刚才的类
NowTime window = new NowTime();
ContentFactory contentFactory = ContentFactory.SERVICE.getInstance();
// 将 Panel 注册进IDE中
Content content = contentFactory.createContent(window.getPanel(), "", false);
toolWindow.getContentManager().addContent(content);
}
}

在 plugin.xml 中注册ToolWindowFactory实现类

1
2
3
4
<extensions defaultExtensionNs="com.intellij">
<!-- anchor 为注册的默认显示方向,bottom 为界面最下方,此外还有 left right 可用 -->
<toolWindow id="Timebox" secondary="true" anchor="bottom" factoryClass="ui.TimeboxWindow" />
</extensions>

效果图

2020-12-25 16.06.15

还可以通过修改 Font 选项,实现老年大字体模式。

image-20201225164209704

image-20201225164222907

后续

本文只简单介绍设计器的使用流程,其他的组件参考 Swing 使用即可