Java版取色器（5）——实现主界面

使用IDEA创建一个Maven项目。

其中：

• groupId：com.mycom.myapp

• artifactId：colorpicker

• version：1.0-SNAPSHOT

在src/main/java目录下创建com.mycom.myapp.colorpicker包，并在colorpicker包创建Main类。

在Main类中主要是主界面的代码，分析主界面图可知，主界面由一个拆分面板构成，拆分面板左侧是取色器面板，右侧是颜色的HEX格式与16进制格式的相互转换面板。

主窗体代码如下：

package com.mycom.myapp.colorpicker;

import javax.swing.*;
import javax.swing.border.TitledBorder;
import java.awt.*;

import static java.awt.Color.BLACK;
import static java.awt.Color.RED;

/**
 * @author lck100
 */
public class Main {
    /**
     * 得到一个主窗体对象
     *
     * @return 返回得到的JFrame
     */
    public static JFrame mainFrame() {
        // 实例化一个主窗体对象
        JFrame mainFrame = new JFrame();
        // 设置窗体的标题
        mainFrame.setTitle("取色器");
        // 设置窗体的尺寸大小
        mainFrame.setSize(900, 450);
        // 设置窗体的不允许用户自由调整大小
        mainFrame.setResizable(false);
        // 设置窗体的图标（注意图标路径问题）
        mainFrame.setIconImage(Toolkit.getDefaultToolkit().createImage("src/main/resources/images/colorpicker.png"));

        // 创建拆分面板作为主面板
        JSplitPane splitPane = new JSplitPane();
        // 设置分隔条上折叠/展开按钮的显示
        splitPane.setOneTouchExpandable(true);
        // 设置当拖动分隔条时连续重绘组件
        splitPane.setContinuousLayout(true);
        // 设置分隔条的位置
        splitPane.setDividerLocation(mainFrame.getWidth() / 2);
        // 设置拆分面板的左侧组件为取色器面板
        splitPane.setLeftComponent(getColorPickerPane());
        // 设置拆分面板的右侧组件为转换面板
        splitPane.setRightComponent(getChangePane());

        // 将拆分面板设为主窗体的内容面板
        mainFrame.setContentPane(splitPane);
        // 设置窗体的关闭方式
        mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // 返回主窗体
        return mainFrame;
    }

    /**
     * 设置取色器的面板内容
     *
     * @return 返回设置好的取色器面板
     */
    private static Box getColorPickerPane() {
        return Box.createVerticalBox();
    }

    /**
     * 设置转换面板的面板内容
     *
     * @return 返回设置好的转换面板
     */
    private static JPanel getChangePane() {
        return new JPanel;
    }
}

在colorpicker包创建Test类用来启动主窗体，其中内容如下：

package com.mycom.myapp.colorpicker;

/**
 * @author lck100
 */
public class Test {
    public static void main(String[] args) {
        Main.mainFrame().setVisible(true);
    }
}

点击运行，运行的结果如下：

而取色器面板的方法getColorPickerPane的代码改成如下内容：

 /**
     * 设置取色器的面板内容
     *
     * @return 返回设置好的取色器面板
     */
    private static Box getColorPickerPane() {
        Box vbox = Box.createVerticalBox();

        // 实例化一个显示取色的面板
        JPanel showColorPane = new JPanel();
        // 设置该面板的布局方式
        showColorPane.setLayout(new BorderLayout());
        // 创建一个启动取色功能的按钮
        JButton startColorPickerButton = new JButton("取色");
        // 创建一个文本域来显示取到的颜色
        JTextArea textArea = new JTextArea(10, 25);
        // 设置文本域不可编辑
        textArea.setEditable(false);
        // 设置文本域默认背景颜色
        textArea.setBackground(Color.BLACK);
        // 设置文本域无边界
        textArea.setBorder(null);
        // 将按钮添加到面板中并设置显示在北部位置
        showColorPane.add(startColorPickerButton, BorderLayout.NORTH);
        // 将文本域添加到面板中并设置显示到中部位置
        showColorPane.add(textArea, BorderLayout.CENTER);
        // 将面板添加到vbox中
        vbox.add(showColorPane);

        // 实例化一个显示RGB值和HEX值的面板
        JPanel showValuePane = new JPanel();
        // 设置面板的布局方式为流动布局
        showValuePane.setLayout(new FlowLayout());
        // 创建R标签
        JLabel RLabel = new JLabel("红(R):");
        // 创建R文本框
        JTextField RTextField = new JTextField(2);
        // 创建G标签
        JLabel GLabel = new JLabel("绿(G):");
        // 创建G文本框
        JTextField GTextField = new JTextField(2);
        // 创建B标签
        JLabel BLabel = new JLabel("蓝(B):");
        // 创建B文本框
        JTextField BTextField = new JTextField(2);
        // 创建HEX标签
        JLabel HEXLabel = new JLabel("HEX:");
        // 创建HEX文本框
        JTextField HEXTextField = new JTextField(6);
        // 将上面这些组件添加到面板中
        showValuePane.add(RLabel);
        showValuePane.add(RTextField);
        showValuePane.add(GLabel);
        showValuePane.add(GTextField);
        showValuePane.add(BLabel);
        showValuePane.add(BTextField);
        showValuePane.add(HEXLabel);
        showValuePane.add(HEXTextField);
        // 将面板添加到vbox中
        vbox.add(showValuePane);

        // 创建一个设置面板
        JPanel settingPane = new JPanel();
        // 设置面板的边界
        settingPane.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.GRAY, 2, true), "设置", TitledBorder.LEFT, TitledBorder.TOP, new Font("微软雅黑", Font.PLAIN, 16), BLACK));
        // 创建一个复选框，默认被勾选
        JCheckBox checkBox = new JCheckBox("总是在最上层", true);
        // 设置复选框的字体
        checkBox.setFont(new Font("微软雅黑", Font.PLAIN, 16));
        // 将复选框添加到面板中
        settingPane.add(checkBox);
        // 将该面板添加到vbox中
        vbox.add(settingPane);

        // 创建一个说明面板
        JPanel descriptionPane = new JPanel();
        // 设置面板的边界
        descriptionPane.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.GRAY, 2, true), "说明", TitledBorder.LEFT, TitledBorder.TOP, new Font("微软雅黑", Font.PLAIN, 16), BLACK));
        // 创建一个说明标签
        JLabel descriptionLabel = new JLabel();
        // 设置标签内容
        descriptionLabel.setText("按下Alt键取色，可以直接在剪贴板复制RGB颜色");
        // 设置标签字体
        descriptionLabel.setFont(new Font("微软雅黑", Font.PLAIN, 16));
        // 将标签添加到面板中
        descriptionPane.add(descriptionLabel);
        // 将该面板添加到vbox中
        vbox.add(descriptionPane);

        // 返回设置好的vbox
        return vbox;
    }

运行一下，运行结果如下：

而转换面板方法getChangePane代码改成如下内容：

    /**
     * 设置转换面板的面板内容
     *
     * @return 返回设置好的转换面板
     */
    private static JPanel getChangePane() {
        // 创建一个转换面板
        JPanel changePane = new JPanel();
        // 设置面板的布局方式为网格布局
        changePane.setLayout(new GridLayout(2, 1));

        // 创建一个rgb转hex的面板
        JPanel rgbToHexPane = new JPanel();
        // 设置面板布局方式为边界布局
        rgbToHexPane.setLayout(new BorderLayout());
        // 设置面板的边界
        rgbToHexPane.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.GRAY, 2, true), "RGB颜色代码转化成16位颜色", TitledBorder.LEFT, TitledBorder.TOP, new Font("微软雅黑", Font.BOLD, 16), RED));
        // 创建一个放置输入RGB值文本框的面板
        JPanel rgbTextFieldPane = new JPanel();
        // 创建R文本框
        JTextField rTextField = new JTextField(2);
        // 创建G文本框
        JTextField gTextField = new JTextField(2);
        // 创建B文本框
        JTextField bTextField = new JTextField(2);
        // 将R,G,B文本框添加到面板中
        rgbTextFieldPane.add(rTextField);
        rgbTextFieldPane.add(gTextField);
        rgbTextFieldPane.add(bTextField);
        // 将该面板添加到rgbToHexPane中
        rgbToHexPane.add(rgbTextFieldPane, BorderLayout.NORTH);
        // 创建一个文本域来显示颜色
        JTextArea hexTextArea = new JTextArea(6, 6);
        // 设置文本域不可编辑
        hexTextArea.setEditable(false);
        // 将文本域添加到rgbToHexPane中
        rgbToHexPane.add(hexTextArea, BorderLayout.CENTER);
        // 创建一个转换结果面板
        JPanel transformButtonPane = new JPanel();
        // 创建一个转换按钮
        JButton rgbToHexButton = new JButton("转换");
        // 创建一个显示HEX值的文本框
        JTextField hexResultTextField = new JTextField(5);
        // 添加rgbToHexButton和hexResultTextField到transformButtonPane中
        transformButtonPane.add(rgbToHexButton);
        transformButtonPane.add(hexResultTextField);
        // 将transformButtonPane添加到rgbToHexPane中
        rgbToHexPane.add(transformButtonPane, BorderLayout.SOUTH);
        // 将rgbToHexPane添加到转换面板
        changePane.add(rgbToHexPane);

        // 创建一个hex转成rgb的面板
        JPanel hexToRgbPane = new JPanel();
        // 设置面板的布局方式为边界边界
        hexToRgbPane.setLayout(new BorderLayout());
        // 设置面板的边界
        hexToRgbPane.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.GRAY, 2, true), "十六位颜色代码转化成RGB颜色", TitledBorder.LEFT, TitledBorder.TOP, new Font("微软雅黑", Font.BOLD, 16), RED));
        // 创建一个输入hex的文本框面板
        JPanel hexTextFieldPane = new JPanel();
        // 创建一个输入hex的文本框
        JTextField inputHexTextField = new JTextField(6);
        // 将文本框添加到文本框面板中
        hexTextFieldPane.add(inputHexTextField);
        // 将hexTextFieldPane添加到hexToRgbPane中
        hexToRgbPane.add(hexTextFieldPane, BorderLayout.NORTH);
        // 创建一个显示颜色的文本域
        JTextArea rgbTextArea = new JTextArea();
        // 设置文本域不可编辑
        rgbTextArea.setEditable(false);
        // 将rgbTextArea添加到hexToRgbPane中
        hexToRgbPane.add(rgbTextArea, BorderLayout.CENTER);
        // 创建转换按钮面板transformButtonPane2
        JPanel transformButtonPane2 = new JPanel();
        // 创建转换按钮
        JButton hexToRgbButton = new JButton("转换");
        // 创建R结果显示文本框
        JTextField rResultTextField = new JTextField(2);
        // 创建G结果显示文本框
        JTextField gResultTextField = new JTextField(2);
        // 创建B结果显示文本框
        JTextField bResultTextField = new JTextField(2);
        // 将这些文本框和按钮添加到transformButtonPane2中
        transformButtonPane2.add(hexToRgbButton);
        transformButtonPane2.add(rResultTextField);
        transformButtonPane2.add(gResultTextField);
        transformButtonPane2.add(bResultTextField);
        // 将transformButtonPane2添加到hexToRgbPane中
        hexToRgbPane.add(transformButtonPane2, BorderLayout.SOUTH);
        // 将hexToRgbPane添加到转换面板
        changePane.add(hexToRgbPane);

        // 返回设置好的转换面板
        return changePane;
    }

点击运行，效果图如下：

最终，主界面完成了，就是上述效果，用swing着实有些丑。

 

 

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【20190928】可获取本节源码。