在做相册时，首先我们清楚思路，清楚我们到底要做什么，以及该实现什么样的效果。
我用LWUIT做的这个相册有两个界面：
1.显示相片列表
2.显示相册原始图
具体实现：
1.显示相片列表
原始图片一般都是比较大的，在显示相册列表时，需要把这些大图生成缩略图，缩略图以Button来显示
列表以GridLayout显示，每行4个，计算缩略图的宽，高（根据屏幕宽和按钮的Margin来计算，适应所有屏幕）。
2.显示相册原始图
这个Form的布局如下图,上一张,下一张两个按钮，miniPhotoContainer是3张图片的缩略图,photoContainer是显示大图的容器。
*********************************************
*上一张 miniPhotoContainer 下一张 * (topContainer)
*********************************************
* *
* *
* photoContainer *
* *
* *
*********************************************
思路清晰了，具体的就要开始编写代码了，我们先看看具体的效果图吧。
图片列表页面
在做相册时，首先我们清楚思路，清楚我们到底要做什么，以及该实现什么样的效果。
我用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,后面我会花时间进行改进，比如：图片放大、缩小，图片的自动播放，以及发送图片给好友等功能。
