关于Swing中的几种布局方式之GridBagLayout操作说明

背景

        Swing对于布局方式提供了大致5中的处理方案（BorderLayout边界布局，FlowLayout流式布局，GridLayout网格布局，BoxLaYout盒子布局，最后一种null的类似于流式布局的一种默认布局方式），今天对其中的GridBagLayout网格布局进行简单的用例说明，特此纪要！

问题

        如何玩转Swing中的GridBagLayout网格布局？

说明

        对于GridBagLayout网格布局的理解，我个人是有一定的前端CSS基础，因此对其的操作在初期比较顺手，它的布局方式你可以理解其为坐标系上面的布局分布。下面是对其日常操作参数的一些说明以及使用纪要！

纪要

        1. 首先说明一下，Swing中的显示（容器）组件都能够设置自己的内部布局方式的，一般通过setLayout()来设置，例如JPanel等。示例如下：

         2. 由于这篇文件主要是说明GridBagLayout网格布局的布局操作，所以其他的布局方式这里不做多余的阐述，主要围绕GridBagLayout网格布局来展开。

        GridBagLayout网格布局的布局方式设定后，有一个专门用来处理布局位置的对象GridBagConstraints，基本上能够处理我们日常样式调优过程中遇到的边界，大小，布局位置等常见的问题。

        GridBagConstraints对象的操作是通过设值其中的一些内置属性来调整样式布局。这里列举一些我个人常用的属性，并加以说明其所处的作用以及效果实例。

        anchor：anchor属性的设置可以根据需要进行设置。下面举几个常用到的场景：

场景1：我有一个Dialog，里面是一个基础的查询面板，布局方式为这里讲的GridBagLayout网格布局。有这样的问题，我的组件是按照x0，y0（这里你可以理解为一个盒子的左上角开始）的紧密无跳跃布局，但是它距离这个Dialog的上边框的内边距总让我觉得有点太大不合理。这种情况下，就可以利用GridBagConstraints的内置属性NORTH来让其向上对其，来减少与基础面板Dialog的内边距。这里的效果有点像CSS处理中的“float:left/right;”。

         insets：

                1. insets属性类似于HTML中的CSS调优时用到的内边距、外边距。如果有这方面操作经验的朋友知道left-margin、right-margin、top-margin、bottom-margin，那理解这个问题就会相对容易些。 

                2. insets属性是接收了一个Insets的操作对象，是的，你没有看错。这个属性和它的操作对象唯一的区别就是属性首字母小写，操作对象首字母是大写，操作对象有四个参数，依次分别表示上，左，下，右的内边距。如下图：

 应用示例如下图：

上面的Demo截图中的四个参数分别表示：上边距增加20（单位你可以理解为CSS中的像素），左边距增加60（单位你可以理解为CSS中的像素），下边距默认为0（单位你可以理解为CSS中的像素），右边距增加60（单位你可以理解为CSS中的像素）. 

        gridx、gridy：这两个属性你可以理解为一个坐标系中的横纵坐标位置。只不过这个坐标位置的起始底图是一个栅格底图，并且从左上角开始依次布局。

下面是依次演变的布局说明示例图：

1. 这里的黑色框子你将它理解为一个栅格，它的横纵坐标都是0.

 2. 此时黑色框子的栅格变成了一个三行1列的二维图例。

        此时对于第一行来说，它的横坐标为0，纵坐标为0.

        对与第二行来说，它的横坐标为0，纵坐标为1.

        对与第三行来说，它的横坐标为0，纵坐标为2.

 3. 此时再次出现时变成了一个4行3列的二维图例，坐标也随之发生变化。

 节点说明：

        1. 上面提到的anchor属性设置的就是x=0,y=0这个子组件对于整体的外层组件的浮动位置。

        2. insets属性设置的则是具体的DOM与其周围的DOM之间的边距。

        3. 那么对于下面的图讨乱一个问题，如果你看到这里能够和我同频理解讲说的内容，此时这个问题应该能够帮你解决。图例如下：

 这是上面引入的一张图例，说明的是在Swing中当一个显示组件中只渲染了一个图例组件的时候，此时你其实不会去设置这个子图例的默认大小，那它在这个父组件中是如何渲染的呢？是直接撑满父组件呢还是就以该组件的最大形态默认渲染？

假想1：

假想2：下面是关于上面这个问题的答案：

        上面的这个问题是Swing设计中的一种特定处理方式，因此这种问题Swing有既定的处理方案，也就是下面要介绍的fill属性。

        fill：fill属性用来处理GridBagLayout网格布局时子节点渲染的占位大小。主要有以下几种情况：

                1. 以自身默认的大小渲染在父组件容器中。（GridBagConstraints.NONE）

                2. 以父组件的大小为自己的默认渲染尺寸，来直接撑满父组件容器。（GridBagConstraints.BOTH）

                3. 以父组件水平方向的尺寸为基准，应用到自身进行水平方向的赋值，从而在水平方向做到撑满父组件容器。（GridBagConstraints.HORIZONTAL）

                4. 衣服组件垂直方向的尺寸为基准，应用到自身进行垂直方向的赋值，从而在垂直方向做到撑满父组件容器。（GridBagConstraints.VERTICAL）

        fill属性如果在没有设置的情况下，其值为GridBagConstraints.NONE。

应用实例截图如下：

         gridwidth，gridheight：

                有这样一种情况，当你使用GridBagLayout网格布局的时候会遇到下面的情况：

图例1：

 图例2：

        上面两个图例可以看出，图例1为一个3行2列的栅格图例，图例2也是一个3行2列的栅格图例，唯一的区别是图例2想要将第二行的两列合并为1列。

        面对上面的问题，Swing也有专门的属性进行处理那就是 gridwidth。默认情况下一行一列的gridwidth大小为1，如果想要横向合并，gridwidth将是你不错的选择。纵向合并则你可以选择gridheight来处理。

        weightx，weighty：weightx和weighty官方文档的解释是单位组件在父容器中的渲染占比比例，是一个double参数，默认应该是0.0. 主要应该用来处理缩放时的自适应布局。个人理解这个参数有点类似于BootStrap响应式布局的意思。

至此，以上便是关于GridBagLayout网格布局中我个人日常用到的参数说明。