LWUIT 简易漂亮的相册
，开始代码和文章没好好布局，看起来很乱。
在做相册时，首先我们清楚思路，清楚我们到底要做什么，以及该实现什么样的效果。
我用LWUIT做的这个相册有两个界面：
1.显示相片列表
2.显示相册原始图
具体实现：
1.显示相片列表
原始图片一般都是比较大的，在显示相册列表时，需要把这些大图生成缩略图，缩略图以Button来显示
列表以GridLayout显示，每行4个，计算缩略图的宽，高（根据屏幕宽和按钮的Margin来计算，适应所有屏幕）。
2.显示相册原始图
这个Form的布局如下图,上一张,下一张两个按钮，miniPhotoContainer是3张图片的缩略图,photoContainer是显示大图的容器。
*********************************************
*上一张 miniPhotoContainer 下一张 * (topContainer)
*********************************************
* *
* *
* photoContainer *
* *
* *
*********************************************
思路清晰了，具体的就要开始编写代码了，我们先看看具体的效果图吧。
图片列表页面
显示大图页面
点击下一张，翻到下一张图片
下面我们来看看核心的代码
1.实体类 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类，显示图片列表的页面
代码
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.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
LWUIT 简易漂亮的相册相关推荐
- JS+CSS打造一款漂亮绿色相册代码
代码简介: JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似 ...
- 第3章第13节：如何快速生成一份漂亮的相册 [PowerPoint精美幻灯片实战教程]
本节演示如何将电脑中的图片素材,快速生成一份漂亮的相册.首先点击插入选项卡,显示插入功能面板. 选择插入功能面板中的相册命令,打开相册功能菜单. 选择新建相册命令,打开相册编辑窗口. 在打开的相册编辑 ...
- 使用jquery制作漂亮相册集
目录: 简单的图像翻滚 漂亮的相册集 资源文件 简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表 ...
- 20款最好用的wordpress图片相册插件
用插件把你的图片相册打扮的更加漂亮,更加容易自己管理,也更加利于访客的浏览.本文里面,帕兰为你收集了21款WordPress图片相册插件.让我们先来看一下Wordpress的图片相册类插件的几个大类: ...
- 推荐一个非常COOL的开源相册程序!
不知道大家有没想过有一个完全属于自己的网络相册?现在网上的相册程序已可以说多不胜数,那么到底要使用哪个会比较好呢? 之前我也在为此事烦恼过,在网上找了很多个程序试了,但都没达到我的要求,后来发终于功夫 ...
- 很漂亮实用的jQuery实例123个
很漂亮实用的jQuery实例, http://download.csdn.net/detail/haoyoul/4637329 1. 2款jQuery图片自动切换常用广告代码 2. jquery+cs ...
- 免费实用的电子相册制作软件吧?这有3款口碑好的音乐相册制作app
推荐一款免费实用的电子相册制作软件吧?经常有些朋友想要制作音乐相册,但是苦于自己的技术有限,制作相册的一些软件又繁琐难懂,所以经常会看到有人在网上找一些傻瓜式的相册制作app软件,以便自己制作出属于自 ...
- html5制作相册集,非常漂亮的相册集使用jquery制作相册集_jquery-js教程
一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色 ...
- windows phone的那些应用们 有意思的，good design的，有用的...
说说wp上的一些应用~ 至于为啥有用的放最后是因为这贴主要不是为了介绍最有用,最好使的app 而是某种程度上对wp上应用的一个扫视,当然是本人主观上看啦,而且没越狱(所以图也是store上的),也全 ...
最新文章
- SQL Server之其他函数——空值处理
- python专科就业难吗-听说Python就业难，是真的吗？
- 解决 ERROR: JDWP Transport dt_socket failed to initialize, TRANSPORT_INIT(510)异常
- [转载]根据两点的经纬度求方位角和距离，等
- 线性表：顺序栈算法实现
- 微信收费事件背后被广泛忽略的技术细节
- Smartmontools检测硬盘坏道
- 富文本常用封装(NSAttributedString浅析)
- java模拟器gba模拟器,CAPRunner-JavaCard字节码仿真器-Benoît Allard
- 计算机作文600字关于科学事业,关于科学的作文600字（精选11篇）
- Objective C 获取当前日期时间方法
- [机器学习与scikit-learn-33]：算法-回归-通过PolynomialFeatures实现数据的升维
- SpringBoot-配置actuator
- java过滤xss_java处理XSS过滤的方法
- duilib适配高分屏（高DPI适配）
- ILRuntime篇：介绍并下载运行官方案例
- 医生说 | 当心！长期情绪压抑，正在毁掉你的身体
- mysql自学笔记九（Navicat Premium 15）
- Linux三剑客awk之行和列
- 百度云下载慢/epub格式/pdf正反面打印