Swing界面布局之代码手写二, 山寨Netbean layout实现

上篇文章写了简单的layout后，
这次来个复杂的， 在找素材时， 左看右看没有合眼的， 最后， 直接把眼光放在正在coding的Netbean上
先旨声明， 这个demo， 只注重layout的架构布局的学习研究， 界面细微之处， 跟真正的netbean， 相差那是相当远的

目前的最终效果图

[img]http://dl.iteye.com/upload/attachment/389153/3f1c9140-5f4f-33d8-a1c8-ce28cebe2dae.jpg[/img]


swing的layoutmanage， 跟以前做VS的很不相同， 你的想法必须有些转换， 想想webpage的html也许对你有所启发，在客户端， component的大小是可换的

swing的layout， 在布局时， 时刻都要围绕一个主题， 在不同的平台上的表现， checkbox为例， 有打勾的， 有打X的， 有开关型按钮的， 每种样式的大小都各有不同， 所以， 必须以一种宏观的布局来规划界面的显示


一. 整体布局

[img]http://dl.iteye.com/upload/attachment/389174/af6e3e2a-fa13-36b1-b0f3-84bef1b9be20.jpg[/img]

在使用netbean或其它IDE中， 你很容易发现： 上面的菜单， 工具栏高度是固定的， 下面的状态栏高度也是固定的
当你最大化时， 它们打横占了整个显示屏， 但高度还是一样的， 除非你刻意去调整它
这就是borderlayout的要点

也许你会觉得奇怪， 为什么要在中间再设一个borderlayout， 其实一开始， 我也是在中间直接用最外层的borderlayout， 设一个left， 另一个center，
但为了方便模拟工具栏下面那个3px左右的jseparate， 我选择了这样做， 当然这并不是唯一的选择


[img]http://dl.iteye.com/upload/attachment/389275/9168b4dc-deab-3377-99a0-1b851aafdf55.jpg[/img]

size小tips: setPreferredSize(new Dimension(0, 300))， 意思为width交给BorderLayout， 实际上， 这里你不管指定width为多少， BorderLayout都会掌管width.

二. 菜单, 工具栏和状态栏

[img]http://dl.iteye.com/upload/attachment/389199/e5ea03a3-1731-3322-9c8d-41c92e4068c2.jpg[/img]

菜单栏， 有一个小的tips， 你是用frame.setJMenubar， 还是用container.add(menubar)的呢， 2者有何别？
前者是基于整个frame的菜单， 后者是frame下面的contentpane添加一个component， 推荐前者

仔细比较2者， 你会发现， 山寨的比正版的工具栏要高那么2个像素， 这是我图片没有切好， 另外， 我想试着模拟netbean的按钮UI， 但发现光切图是不同的， 还需要override buttonUI里的paint方法， 就没做了， 但很赞Netbean button UI做功仔细。

工具栏， 当像把netbean横向收缩的话， 有些工具栏会被挤到下一行， office里也常有这种情况， flowlayout可以实现， 但netbean里， 你又可以自由的添加2个toolbar中间的gap， flowlayout做这个就有点吃力了， 用null layout再配合mouselistener也不容易， 这是个挑战， 做个好的界面， 确实不容易啊。

状态栏， 很正规的布局， 高度固定， 模向无限伸展， 我选了boxlayout
只要你不特别指定size， boxlayout会很自觉的平均分配给里面的component， 所以， 在里面添加2个panel可以轻松实现， 至于右边text和processbar还有那个"X"的向右对齐， 直接用flowlayout的向右对齐， "X"偷懒没做了


[img]http://dl.iteye.com/upload/attachment/389230/ef483472-066a-3b76-abc8-74c2f83d52a8.jpg[/img]


小tips： panel的default layout是flowlayout

三. 左边导航面板

调整netbean的size， 你会发现， 左上的"项目,文件,服务"面板和左下的"导航"面板， width是固定的， 而高度则随着frame大小而变化， 如果你不去刻意调整的话， 他们会把高度平分掉。作为layout的学习， 在这里， 我的设定也是为平分， 用boxlayout可以轻松实现， 如果要按百分比平分的话， 就需要额外添加mouselistener了， 再次小赞netbean的UI

[img]http://dl.iteye.com/upload/attachment/389381/00de9864-19a0-3cd4-8830-b0369d8ec978.jpg[/img]

上图是layout布局， 以及放大缩小的效果， 作为学习， 只实现了FileTree作为demo用

[img]http://dl.iteye.com/upload/attachment/389403/f7955122-65f0-3b89-83c2-d42a2904527a.jpg[/img]

上图是实现代码

下面的navigate比较复杂

在tab下面有有"成员视图"和"bean模式"2种layout
成员视图又包括了那个按钮面板的折叠， 如图

[img]http://dl.iteye.com/upload/attachment/389494/dafbd36b-984c-362a-ad67-352066d9a694.jpg[/img]

上图是我的实现方式

[img]http://dl.iteye.com/upload/attachment/389506/903a0f14-d961-3b15-9a7e-e5eaf48ff680.jpg[/img]

这是layout布局， 利用cardlayout， 可以让"member panel"和"bean mode"替换显示出来， 很方便

[img]http://dl.iteye.com/upload/attachment/389551/bf94d4ac-c282-3b34-b273-0cd272a589c7.jpg[/img]

上图是代码

当点击show & hide toolbar 的 checkbox时， 添加事件， 把toolbar多它的容器中add/remove
然后调用它的容器的父容器repaint， layoutmanage就会准确地resize控件tree和checkbox的大小
完全不用另外写代码， 话说回来， 如果不用layoutmanage而去自己写代码实现， 估计够呛


四. 右边编辑面板

[img]http://dl.iteye.com/upload/attachment/390022/35f4b157-ed09-3feb-909e-0570e3b3d238.jpg[/img]

右边编辑面板的整体布局， 下面的输出面板， 高度固定， 横向扩展， 而上面的coding面板， 则尽占剩余的空间，
borderlayout是不二选择

[img]http://dl.iteye.com/upload/attachment/390058/26de593f-88dd-335e-9ba9-7ab916282b95.jpg[/img]

指定jpanel为boxlayout跟borderlayout.center效果是一样的， 起码在占尽未知空间方面是一样的
然后在里面添加JTabbedPane， 为了scrollbar而使用JscrollPane跟JtextArea配合或是JTree配合， 在Swing里是很好的搭配， coding的工具栏和左边的行号什么的， 跟navigate作法是一样道理， 这里就偷懒不做了

下面的输出面板， 看起来很可怕， 其实只是tab多了几个， tab里再包含tab而已
以"output"为例， 开始模拟

[img]http://dl.iteye.com/upload/attachment/390080/637433ad-9da3-385b-96a5-23f4bc2bb5a2.jpg[/img]

以上~，
做完之后， 再次体验到， netbean真是一个出色的IDE， 像我这里只是用JTabPane简单的代替了NB的面板， NB的面板里的最左边沿化和关闭就没有实现， 像这样的细至功夫许多。

通过这个layout， 可以看出， 整个程序的layout宏观架构是很重要的， 但实现的细节也同样重要。
一个好的程序界面， 不一定要求太过华丽， 但一定要用起来顺手， 所以， DnD技术是必要的， 快捷键也是必要。
庆兴的是， Swing对这方面的支持都很强大， 愿NetBean和Swing越来越好


结束语

利用业余时间来编写这个layout， 刚开始时， 才发现什么叫无知者无畏， 远比我想象中的复杂
有想过换个其他素材来写， 但最终还是咬咬牙， 用微积分的思想安慰自己， 边写边查兼检讨
期间偷懒过， 无视过， 忽略过， 小改过， 大改过， 重构过， 偷笑过， 感动过
然后深深体会到， 蚂蚁筑巢