购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.6 照片展示功能设计

1.6.1 照片展示功能概述

数码照片管理软件的主要功能就是将存储的照片展示出来,本软件提供了丰富的展示方式,包括缩略图、幻灯片和播放器方式。使用缩略图查看照片数量很多,但是不够清晰;使用幻灯片可以比较清晰地查看某一幅照片,同时能展示一定数量的缩略图片;使用播放器查看可以使用播放器自动浏览图片,3种照片的展示形式各有特点。缩略图浏览效果如图1.15所示,幻灯片浏览效果如图1.16所示。

figure_0042_0069

图1.15 缩略图浏览效果

figure_0042_0070

图1.16 幻灯片浏览效果

1.6.2 照片展示功能技术分析

(1)在多个照片展示的过程中,缩略图和幻灯片方式将在照片显示区实现,如何解决快速切换浏览方式是个技术难题。

可以从根本上通过改变面板的布局方式来实现,将显示缩略图和幻灯片的布局放在一个面板中,然后在缩略图方式下采用6列的网格式布局,在幻灯片方式下采用流式布局,在幻灯片方式下还需要一个用来显示照片的的标签组件,所以先实现了一个共用的面板类,该类的完整代码如下:

figure_0042_0071

下面具体实现缩略图浏览方式,此时的图片箱面板采用网格式布局,在该种方式下需要使用一个滚动窗格,用来提供当图片过多时的垂直滚动功能,但是需要注意的是,并不能直接将包含按钮组件的面板添加到滚动窗格中(那样当缩略图不能填满显示区域时照片排列就会非常松散,如图1.17所示),而是将其添加到一个采用流式布局的面板中,然后将这个面板添加到滚动窗格中,照片排列就会紧凑。

用来实现缩略图浏览方式的面板类的完整代码如下:

figure_0042_0072
figure_0043_0073

figure_0043_0074 在创建网格布局管理器对象时,如果将行数设为0、列数设为6,表示采用列数固定为6列、行数不固定的表格,行数将根据组件的具体个数决定。

figure_0043_0075

图1.17 缩略图浏览方式的松散效果

下面具体实现幻灯片浏览方式,此时的图片箱面板采用流式布局,在该种方式下需要使用一个滚动窗格,用来提供当图片过多时的水平滚动功能,然后将用来显示照片的标签组件和图片箱面板分别添加到边框式布局的中心和南方,用来实现缩略图浏览方式的面板类的完整代码如下:

figure_0043_0076
figure_0044_0077

(2)在查看相册中的照片时,将在很短的时间内生成大量的按钮组件对象,而且将同时生成大量照片的缩略图,这是一个极其耗费机器内存的操作,如果不能很好解决这一问题,那么内存溢出问题将是继续开发的一道障碍。

可以通过为按钮组件添加ComponentListener监听器,捕获按钮大小被调整的事件,在按钮大小被调整时再生成照片的缩略图,以及将其设置为按钮的背景图片,这样就可以解决内存溢出问题了,最后将 ComponentListener 监听器移除,为按钮添加 Component Listener监听器的具体代码如下:

figure_0044_0078

figure_0044_0079 类ComponentAdapter是Component Listener监听器的适配器类,方法componentResized (ComponentEvent e)在组件大小被调整时触发。

figure_0044_0080

图1.18 回行显示工具提示

(3)如果将光标移动到照片的上方,会弹出该照片的相关信息,包括照片的主题、拍摄日期和描述,当描述信息过长时将回行显示,效果如图1.18所示。

照片信息是在按钮的工具提示中设置的,类ToolTip 负责格式化工具提示信息,如果需要回行显示信息,可以通过将提示信息编辑为 HTML 文本实现。下面是在编辑提示信息时需要用到的4个属性:

figure_0044_0081

figure_0045_0082 通过在字符串中插入“<br>”,可以令文本在此回行显示。

首先创建一个StringBuffer类的对象,用来逐步添加提示信息,并立即添加HTML标签的起始符号,具体代码如下:

figure_0045_0083

然后添加照片的标题和拍摄日期,具体代码如下:

figure_0045_0084

下面开始添加照片描述,在添加照片描述时,需要对描述信息进行格式化,每行最多只能显示10个中文字符,但是因为中文字符占两个字节,而英文字符占一个字节,所以需要考虑中英文混排的情况,具体判断描述信息中每个字符是中文还是英文,然后根据实际情况确定每行显示的内容,具体代码如下:

figure_0045_0086

最后添加 HTML 标签的结束符号,并将提示信息设置到组件的工具提示中,具体代码如下:

figure_0045_0087

1.6.3 照片展示功能实现过程

(1)在缩略图和幻灯片方式下,双击照片可以使照片全屏显示,在全屏显示状态下双击鼠标或按“Esc”键可以退出全屏显示。

捕获双击照片的事件是通过为用来显示照片的按钮添加鼠标事件监听器实现的,全屏显示照片功能是通过由ShowDialog类实现的对话框实现的,所以在捕获到非单击事件后,就创建该类的对话框,并令对话框可见,用来捕获鼠标双击事件的具体代码如下:

figure_0046_0088

为了能够真正的全屏显示照片,这里要将对话框窗体设置为不显示标题栏,将绘制范围设置为这个屏幕,具体代码如下:

figure_0046_0089

双击鼠标可以退出全屏显示,是通过为显示照片的标签组件添加鼠标事件监听器实现的,当捕获到双击鼠标的事件时,就销毁对话框,具体代码如下:

figure_0046_0090

按“Esc”键可以退出全屏显示,是通过为对话框窗体添加键盘事件监听器实现的,当捕获到“Esc”键被按下的事件时,就销毁对话框,具体代码如下:

figure_0046_0091

(2)通过修改工具栏中组合框的选中项,可以切换照片的浏览方式。如果是在缩略图方式和幻灯片方式之间切换,被选中照片的选中状态将不会发生改变;如果是从缩略图方式或幻灯片方式切换为播放器方式,当退出播放器方式后将仍保持之前的浏览方式。当从缩略图方式切换为幻灯片方式时,在存在照片的前提下,如果存在被选中的照片,则在幻灯片中显示最后一次单击的照片;如果不存在则显示第一个照片。方法seeModeComboBoxItemStateChanged()负责处理浏览方式组合框的选中项事件,该方法的完整代码如下:

figure_0046_0092
figure_0047_0093

figure_0047_0094 通过ItemEvent类的getStateChange()方法的返回值,可以判断触发选中项事件的原因,如果返回值等于该类的静态常量SELECTED的值,则表示由选中当前项触发,如果等于静态常量DESELECTED的值,则表示由取消原选中项触发。

(3)选中工具栏中浏览方式组合框的播放器选项,将打开如图1.19所示的对话框,在播放器方式中提供了两种播放模式,分别为手动模式和自动模式,在自动模式下可以修改每张照片的展示时间,还可以通过将鼠标指针移动到照片上使播放暂停,离开后将继续播放。

figure_0048_0095

图1.19 播放器对话框效果

方法handRadioButtonActionPerformed()负责处理手动单选按钮的动作事件,包括设置当前的播放模式和组件的可用性,该方法的完整代码如下:

figure_0048_0096

方法autoRadioButtonActionPerformed()负责处理自动单选按钮的动作事件,包括设置当前的播放模式和组件的可用性,关键是创建一个线程实现图片的自动播放,并随时读取每张照片的播放时间,以及是否暂停了播放,该方法的完整代码如下:

figure_0048_0097
figure_0049_0098

方法previousButtonActionPerformed()负责处理上一张按钮的动作事件,包括更换当前显示的照片和判断上一张按钮和下一张按钮是否可用,该方法的完整代码如下:

figure_0049_0099

方法 nextButtonActionPerformed()负责处理下一张按钮的动作事件,包括更换当前显示的照片和判断上一张按钮和下一张按钮是否可用,该方法的完整代码如下:

figure_0049_0100

(4)当将鼠标指针移动到照片上时,将触发photoLabelMouseEntered()方法,该方法负责处理用来显示照片的标签的鼠标移入事件,在该方法中只是将用来标记是否暂停播放的isPause属性设为true,该方法的完整代码如下:

figure_0049_0101

当鼠标指针离开照片时,将触发photoLabelMouseExited()方法,该方法负责处理用来显示照片的标签的鼠标移出事件,在该方法中只是将用来标记是否暂停播放的isPause属性设为false,该方法的完整代码如下:

figure_0050_0102

(5)在退出播放器浏览方式时,不仅要销毁播放器对话框,还要将用来标记是否播放的isPlay属性设为false,否则可能因为在播放的过程中退出,而没有真正停止用来播放的线程,负责处理退出按钮动作事件的exitButtonActionPerformed()方法的完整代码如下。 Q9Mestq8MjI85OiyGJyA6dBry1bmUuWB8/oZwTROLNXUBCsWzUg5vw6wG18Ofb0c

figure_0050_0103
点击中间区域
呼出菜单
上一章
目录
下一章
×