上篇文章写了简单的layout后,
这次来个复杂的, 在找素材时, 左看右看没有合眼的, 最后, 直接把眼光放在正在coding的Netbean上
先旨声明, 这个demo, 只注重layout的架构布局的学习研究, 界面细微之处, 跟真正的netbean, 相差那是相当远的
目前的最终效果图
swing的layoutmanage, 跟以前做VS的很不相同, 你的想法必须有些转换, 想想webpage的html也许对你有所启发,在客户端, component的大小是可换的
swing的layout, 在布局时, 时刻都要围绕一个主题, 在不同的平台上的表现, checkbox为例, 有打勾的, 有打X的, 有开关型按钮的, 每种样式的大小都各有不同, 所以, 必须以一种宏观的布局来规划界面的显示
一. 整体布局
在使用netbean或其它IDE中, 你很容易发现: 上面的菜单, 工具栏高度是固定的, 下面的状态栏高度也是固定的
当你最大化时, 它们打横占了整个显示屏, 但高度还是一样的, 除非你刻意去调整它
这就是borderlayout的要点
也许你会觉得奇怪, 为什么要在中间再设一个borderlayout, 其实一开始, 我也是在中间直接用最外层的borderlayout, 设一个left, 另一个center,
但为了方便模拟工具栏下面那个3px左右的jseparate, 我选择了这样做, 当然这并不是唯一的选择
size小tips: setPreferredSize(new Dimension(0, 300)), 意思为width交给BorderLayout, 实际上, 这里你不管指定width为多少, BorderLayout都会掌管width.
二. 菜单, 工具栏和状态栏
菜单栏, 有一个小的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"偷懒没做了
小tips: panel的default layout是flowlayout
三. 左边导航面板
调整netbean的size, 你会发现, 左上的"项目,文件,服务"面板和左下的"导航"面板, width是固定的, 而高度则随着frame大小而变化, 如果你不去刻意调整的话, 他们会把高度平分掉。作为layout的学习, 在这里, 我的设定也是为平分, 用boxlayout可以轻松实现, 如果要按百分比平分的话, 就需要额外添加mouselistener了, 再次小赞netbean的UI
上图是layout布局, 以及放大缩小的效果, 作为学习, 只实现了FileTree作为demo用
上图是实现代码
下面的navigate比较复杂
在tab下面有有"成员视图"和"bean模式"2种layout
成员视图又包括了那个按钮面板的折叠, 如图
上图是我的实现方式
这是layout布局, 利用cardlayout, 可以让"member panel"和"bean mode"替换显示出来, 很方便
上图是代码
当点击show & hide toolbar 的 checkbox时, 添加事件, 把toolbar多它的容器中add/remove
然后调用它的容器的父容器repaint, layoutmanage就会准确地resize控件tree和checkbox的大小
完全不用另外写代码, 话说回来, 如果不用layoutmanage而去自己写代码实现, 估计够呛
四. 右边编辑面板
右边编辑面板的整体布局, 下面的输出面板, 高度固定, 横向扩展, 而上面的coding面板, 则尽占剩余的空间,
borderlayout是不二选择
指定jpanel为boxlayout跟borderlayout.center效果是一样的, 起码在占尽未知空间方面是一样的
然后在里面添加JTabbedPane, 为了scrollbar而使用JscrollPane跟JtextArea配合或是JTree配合, 在Swing里是很好的搭配, coding的工具栏和左边的行号什么的, 跟navigate作法是一样道理, 这里就偷懒不做了
下面的输出面板, 看起来很可怕, 其实只是tab多了几个, tab里再包含tab而已
以"output"为例, 开始模拟
以上~,
做完之后, 再次体验到, netbean真是一个出色的IDE, 像我这里只是用JTabPane简单的代替了NB的面板, NB的面板里的最左边沿化和关闭就没有实现, 像这样的细至功夫许多。
通过这个layout, 可以看出, 整个程序的layout宏观架构是很重要的, 但实现的细节也同样重要。
一个好的程序界面, 不一定要求太过华丽, 但一定要用起来顺手, 所以, DnD技术是必要的, 快捷键也是必要。
庆兴的是, Swing对这方面的支持都很强大, 愿NetBean和Swing越来越好
结束语
利用业余时间来编写这个layout, 刚开始时, 才发现什么叫无知者无畏, 远比我想象中的复杂
有想过换个其他素材来写, 但最终还是咬咬牙, 用微积分的思想安慰自己, 边写边查兼检讨
期间偷懒过, 无视过, 忽略过, 小改过, 大改过, 重构过, 偷笑过, 感动过
然后深深体会到, 蚂蚁筑巢
- 描述: 当前效果图
- 大小: 277.4 KB
- 大小: 17.8 KB
- 大小: 208.2 KB
- 大小: 116.8 KB
- 大小: 355.2 KB
- 大小: 359 KB
- 大小: 217.1 KB
- 大小: 175.4 KB
- 大小: 67.7 KB
- 大小: 240 KB
- 大小: 125.1 KB
- 大小: 181.2 KB
- 大小: 325.2 KB
分享到:
相关推荐
JAVA源代码 计算器 JAVA源代码 NETBEAN
netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料netbean大集合资料
netbean 医院疫苗管理java swing Admin Role 1. Admin creates a Lab and Doctor Organization 2. Admin Role adds users of Doctor and Lab. 3. Admin creates doctor and lab employee's 4. Admin Provides ...
用NETBEAN 6.8 做一个计算器的代码,确切的说,是整个文件
功能可以实现课程表的查看,修改,保存。代码完全注释,几乎每句都加以注释,特别适合课堂项目要求,代码行数有250左右,开发平台是netbean。
这是小菜在网上搜索,精心修改后可以在netbean6.0上成功运行的源文件 若是有什么问题可以qq472232402讨论
教你如何安装NETBEAN,还有同时也教你一些NETBEAN的简单使用。简单易懂。
收集NetBean开发工具快捷键应用大全。以便开发者集体查阅
速动画教程第三十三集 使用NETBEAN开发之用户管理
NetBean6字体配置 NetBean6字体配置 NetBean6字体配置 NetBean6字体配置
netbean 编辑器 ide 仿zend 样式 使用方法 工具 ->选项->导入 成功后会自动重启 netbean编辑器,
大家都知道java做的桌面程序的界面看起来不如VB,VC做的界面好看,其实这只是java在调用LAF时调用的自己类库中的LAF罢了,要想实现象Windows那样的界面也很容易,本例是用NetBean做的桌面程序,界面显示的是象Windows...
netbean struts2 插件,struts2在netbean上使用挺好的
netbean安装程序 ruby3netbean安装程序 ruby3netbean安装程序 ruby3netbean安装程序 ruby3netbean安装程序 ruby3netbean安装程序 ruby3
netbean7.2的struts2插件
netBean使用帮助文档,希望对你有用
netbean安装程序 ruby5netbean安装程序 ruby5netbean安装程序 ruby5netbean安装程序 ruby5netbean安装程序 ruby5
使用netbean制作了一个移动开发的入门,里面有两个窗口,从第一窗口上一个按钮可以到第二窗口,再返回。从第一窗口退出。其中演示了添加窗口、文字、按钮、事件!
JAVA语言 用netbean 6.8 编写的计算器
用Netbean开发环境,自己写的实现贪吃蛇的小程序