打造可滚动相册视图与管理多相册的实现

# 打造可滚动相册视图与管理多相册的实现 ## 1. 让相册视图可滚动 在开发过程中，有时窗口内要显示的内容过大，无法完全显示在窗口可视区域内。例如，许多数码相机拍摄的高分辨率照片，无法在普通电脑显示器上以真实尺寸显示。此时，有两种选择：一是缩小内容尺寸以适应窗口；二是将内容放在滚动窗口中。FOX 提供了 `FXScrollArea` 和 `FXScrollWindow` 类来实现后者，其中 `FXScrollWindow` 是 `FXScrollArea` 的子类，在大多数需要提供可滚动内容窗口的应用中，会使用这个类。 ### 1.1 修改 AlbumView 类 要将此技术应用到相册应用中，首先要把 `AlbumView` 类修改为 `FXScrollWindow` 的子类： ```ruby class AlbumView < FXScrollWindow # ... end ``` ### 1.2 修改 initialize 方法 接下来，需要对 `AlbumView` 的 `initialize` 方法进行修改。查看 `FXScrollWindow` 的 API 文档可知，其 `initialize` 方法只需一个必需参数，即父窗口。不过，在调用基类的 `initialize` 方法时，除了传入父窗口，还会传入 `LAYOUT_FILL` 布局提示作为构造选项： ```ruby def initialize(p, album) super(p, :opts => LAYOUT_FILL) # ... end ``` `LAYOUT_FILL` 布局提示告知 FXRuby，希望相册视图在水平和垂直方向上拉伸，尽可能占据更多空间。 ### 1.3 确定滚动内容 `FXScrollWindow` 有一个子窗口被指定为内容窗口。在本应用中，`FXMatrix` 实例就是要实现滚动的内容。因此，相册视图现在是一个 `FXScrollWindow`，它包含一个 `FXMatrix`，而 `FXMatrix` 又包含许多 `PhotoView` 实例： ```ruby def initialize(p, album) super(p, :opts => LAYOUT_FILL) @album = album FXMatrix.new(self, :opts => LAYOUT_FILL|MATRIX_BY_COLUMNS) @album.each_photo { |photo| add_photo(photo) } end ``` ### 1.4 修改 add_photo 和 layout 方法 最后，需要对 `AlbumView` 类的 `add_photo` 和 `layout` 方法进行修改。新的 `add_photo` 方法如下： ```ruby def add_photo(photo) PhotoView.new(contentWindow, photo) end ``` 与之前版本的区别在于，这里传入的是滚动窗口的 `contentWindow` 方法的结果，而不是 `self`。`FXScrollWindow` 的内容窗口就是添加的第一个（也是唯一的）子窗口，即 `FXMatrix` 小部件。 `layout` 方法也需要做类似修改： ```ruby def layout contentWindow.numColumns = [width/PhotoView::MAX_WIDTH, 1].max super end ``` ### 1.5 完整的 AlbumView 类 完成所有修改后，`AlbumView` 类如下： ```ruby require 'photo_view' class AlbumView < FXScrollWindow attr_reader :album def initialize(p, album) super(p, :opts => LAYOUT_FILL) @album = album FXMatrix.new(self, :opts => LAYOUT_FILL|MATRIX_BY_COLUMNS) @album.each_photo { |photo| add_photo(photo) } end def layout contentWindow.numColumns = [width/PhotoView::MAX_WIDTH, 1].max super end def add_photo(photo) PhotoView.new(contentWindow, photo) end end ``` 重新运行应用程序时，当相册中的照片数量超过屏幕显示范围，窗口右侧会出现垂直滚动条。 ## 2. 管理多个相册 在构建相册应用的过程中，已经取得了很大进展，但为了管理多个相册，需要对应用程序进行一些重大的结构更改。 ### 2.1 创建相册列表视图 首先要考虑相册列表的视图以及如何实现它。这里将使用 `FXList` 小部件来显示用户可选择的相册名称列表。 #### 2.1.1 创建 AlbumListView 类 创建一个新的 `AlbumListView` 类，作为 `FXList` 的子类，并为其添加 `initialize` 方法： ```ruby class AlbumListView < FXList attr_reader :album_list def initialize(p, opts, album_list) super(p, :opts => opts) @album_list = album_list end end ``` #### 2.1.2 修改 PictureBook 类的