剛才發布的文章有點問題，現在重發，開始代碼和文章沒好好布局，看起來很亂。

在做相冊時，首先我們清楚思路，清楚我們到底要做什么，以及該實現什么樣的效果。

我用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,后面我會花時間進行改進，比如：圖片放大、縮小，圖片的自動播放，以及發送圖片給好友等功能。

如果你想了解更多的LWUIT的知識，可以到我的CSDN博客：http://blog.csdn.net/pjw100/

?

轉載于:https://www.cnblogs.com/psunny/archive/2009/11/27/1612245.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的LWUIT 简易漂亮的相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。