LWUIT 简易漂亮的相册

在做相册时，首先我们清楚思路，清楚我们到底要做什么，以及该实现什么样的效果。

我用LWUIT做的这个相册有两个界面：

1.显示相片列表

2.显示相册原始图

 

具体实现：

1.显示相片列表

      原始图片一般都是比较大的，在显示相册列表时，需要把这些大图生成缩略图，缩略图以Button来显示
      列表以GridLayout显示，每行4个，计算缩略图的宽，高（根据屏幕宽和按钮的Margin来计算，适应所有屏幕）。

 

2.显示相册原始图

    这个Form的布局如下图,上一张,下一张两个按钮，miniPhotoContainer是3张图片的缩略图,photoContainer是显示大图的容器。

*********************************************
*上一张        miniPhotoContainer      下一张                       *    (topContainer)
*********************************************
*                                                                                      *
*                                                                                      *
*            photoContainer                                                 *
*                                                                                      *
*                                                                                      *
*********************************************

思路清晰了，具体的就要开始编写代码了，我们先看看具体的效果图吧。

 

图片列表页面

 

显示大图页面

 

点击下一张，翻到下一张图片

 

 

下面我们来看看核心的代码

1.实体类 Photo类

public class Photo { //图片名称 private String name; //原始图片 private Image pic; //缩放以后的图片 private Image resizePic; public Image getResizePic() { return resizePic; } public void setResizePic(Image resizePic) { this.resizePic = resizePic; } public Photo(String name, Image pic) { this.name = name; this.pic = pic; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Image getPic() { return pic; } public void setPic(Image pic) { this.pic = pic; } }

 

2.PhotoListForm类，显示图片列表的页面

public class PhotoListForm extends BaseForm { Photo[] photos; Hashtable photosHash = new Hashtable(); public static int selectedIndex = -1; public PhotoListForm() { this.setScrollable(true); this.setLayout(new BorderLayout()); //构造Photo对象，为了模拟，在实际中看你从哪个地方提取照片 String[] picNames = new String[10]; for (int i = 0; i < picNames.length; i++) { picNames[i] = "图片" + i; } Image[] pics = new Image[10]; for (int i = 0; i < pics.length; i++) { try { pics[i] = Image.createImage("/pic/pic" + (i + 1) + ".jpg"); } catch (IOException ex) { ex.printStackTrace(); } } photos = new Photo[10]; for (int i = 0; i < photos.length; i++) { photos[i] = new Photo(picNames[i], pics[i]); } //每行显示4列，计算行数 int column = 4; int row = (pics.length % column == 0) ? (photos.length / column) : (photos.length / column + 1); //图片容器以GridLayout布局 Container photoContainer = new Container(new GridLayout(row, column)); for (int i = 0; i < 10; i++) { Button b = new Button(); //Button的LeftMargin=2,RightMargin=2 int margin = 4; //生成缩略图 photos[i].setResizePic(resizeImage(photos[i].getPic(), getDestW(margin), getDestW(margin))); b.setIcon(photos[i].getResizePic()); b.setText(photos[i].getName()); b.setAlignment(Label.CENTER); b.setTextPosition(Label.BOTTOM); b.setUIID("PhotoButton"); photoContainer.addComponent(b); //int类型无法放入Hashtable,先转为Integer类型 Integer index = new Integer(i); photosHash.put(b, index); b.addActionListener(new ButtonActionListener()); //识别选中的图片，返回时，选中的图片仍然是这张被点击的图片 if (selectedIndex == i) { this.setFocused(b); } } this.addComponent(BorderLayout.CENTER, photoContainer); } private class ButtonActionListener implements ActionListener { public void actionPerformed(ActionEvent evt) { int value = Integer.parseInt(photosHash.get((Button) evt.getSource()).toString()); //标识选中的图片，返回时，选中的图片仍然是这张被点击的图片 selectedIndex = value; new PhotoDetailForm(photos, value); } } //根据屏幕宽度，计算图片应该缩放的宽度 public int getDestW(int margin) { return (Display.getInstance().getDisplayWidth() - 40) / 4; } //缩放图片 public Image resizeImage(Image src, int destW, int destH) { return src.scaledSmallerRatio(destW, destH); } }

 

3.PhotoDetailForm类，显示大图的页面

import com.sun.lwuit.Button; import com.sun.lwuit.Command; import com.sun.lwuit.Component; import com.sun.lwuit.Container; import com.sun.lwuit.Form; import com.sun.lwuit.Image; import com.sun.lwuit.Label; import com.sun.lwuit.animations.CommonTransitions; import com.sun.lwuit.animations.Transition; import com.sun.lwuit.events.ActionEvent; import com.sun.lwuit.events.ActionListener; import com.sun.lwuit.layouts.BorderLayout; import com.sun.lwuit.layouts.BoxLayout; import com.sun.lwuit.layouts.FlowLayout; import com.sun.lwuit.plaf.UIManager; import com.thinkrace.UCHome.access.UCHome; import com.thinkrace.UCHome.entity.Photo; import com.thinkrace.UCHome.subform.MyPhotos; import com.thinkrace.UCHome.ui.UIButton; import java.io.IOException; /** * * @author Administrator */ /** * *<pre> * * ********************************************* * *上一张 miniPhotoContainer 下一张* (topContainer) * ********************************************* * * * * * * * * photoContainer * * * * * * * * ********************************************* * * MenuBar * * ********************************************* *</pre> * */ public class PhotoDetailForm extends Form implements ActionListener { private Command Back_Command = new Command("返回", 0); Photo[] photos; public int currentIndex; Label[] lblPhotos = new Label[3]; // Label currentPhoto; // Label prePhoto; // Label nextPhoto; Container mainContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS)); Container topContainer = new Container(new BorderLayout()); //miniPhotoContainer存放3张大图的缩略图 Container miniPhotoContainer = new Container(new BoxLayout(BoxLayout.X_AXIS)); Container photoContainer = new Container(new FlowLayout(Component.CENTER)); //上一张，下一张按钮 UIButton btnPre; UIButton btnNext; Transition in = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 500); //标识当前点击的是哪一个按钮 public static int btnSelected; public PhotoDetailForm(Photo[] photos, int index) { this.photos = photos; this.currentIndex = index; this.setLayout(new BorderLayout()); this.setScrollable(true); buildPhoto(currentIndex); btnPre.addActionListener(new ActionListener() { //这里是翻张的关键代码 public void actionPerformed(ActionEvent evt) { btnSelected = 0; if (--currentIndex >= 0) { new PhotoDetailForm(PhotoDetailForm.this.photos, currentIndex); }else{ ++currentIndex; } } }); btnNext.addActionListener(new ActionListener() { //这里是翻张的关键代码 public void actionPerformed(ActionEvent evt) { btnSelected = 1; if (++currentIndex <= PhotoDetailForm.this.photos.length - 1) { new PhotoDetailForm(PhotoDetailForm.this.photos, currentIndex); }else{ --currentIndex; } //moveTransition(); } }); this.addCommand(Back_Command); this.addCommandListener(this); this.show(); } public void removePhoto(){ miniPhotoContainer.removeAll(); topContainer.removeAll(); photoContainer.removeAll(); mainContainer.removeAll(); this.removeAll(); } /* public void moveTransition(){ photoContainer.replace(currentPhoto, nextPhoto, in); } * */ public void buildPhoto(int index) { //生成缩略图 for (int i = 0; i < lblPhotos.length; i++) { if (currentIndex == 0) { lblPhotos[i] = new Label(photos[currentIndex + i].getResizePic()); } else if (currentIndex == photos.length - 1) { lblPhotos[i] = new Label(photos[currentIndex + i - 2].getResizePic()); } else { lblPhotos[i] = new Label(photos[currentIndex + i - 1].getResizePic()); } miniPhotoContainer.addComponent(lblPhotos[i]); } /* currentPhoto = new Label(photos[currentIndex].getPic()); nextPhoto = new Label(photos[currentIndex+1].getPic()); * */ //添加pre按钮 try { if (currentIndex == 0) { btnPre = new UIButton(Image.createImage("/pre_disabled.png")); btnPre.setFocusable(false); } else { btnPre = new UIButton(Image.createImage("/pre.png")); btnPre.setFocusable(true); } topContainer.addComponent(BorderLayout.WEST, btnPre); } catch (IOException ex) { ex.printStackTrace(); } //添加缩略图列表 topContainer.addComponent(BorderLayout.CENTER, miniPhotoContainer); //添加next按钮 try { if (currentIndex == photos.length - 1) { btnNext = new UIButton(Image.createImage("/next_disabled.png")); btnNext.setFocusable(false); } else { btnNext = new UIButton(Image.createImage("/next.png")); btnNext.setFocusable(true); } topContainer.addComponent(BorderLayout.EAST, btnNext); } catch (IOException ex) { ex.printStackTrace(); } if(btnSelected == 1){ this.setFocused(btnNext); } //生成大图 Label lblPhoto = new Label(); lblPhoto.setIcon(photos[currentIndex].getPic()); lblPhoto.setText(photos[currentIndex].getName()); lblPhoto.setAlignment(Label.CENTER); lblPhoto.setTextPosition(Label.BOTTOM); photoContainer.addComponent(lblPhoto); mainContainer.addComponent(topContainer); mainContainer.addComponent(photoContainer); this.addComponent(BorderLayout.CENTER, mainContainer); } public void actionPerformed(ActionEvent evt) { int cmdId = evt.getCommand().getId(); if (cmdId == 0) { new PhotoListForm(); } } }

 

注意我们注释部分的代码，当你翻张时，可以实现Transition效果，这样相册就会更有动感,这个效果我已经实现了。

/* public void moveTransition(){ photoContainer.replace(currentPhoto, nextPhoto, in); } * */

 

这个相册只是我做的第一个Demo,后面我会花时间进行改进，比如：图片放大、缩小，图片的自动播放，以及发送图片给好友等功能。