教你轻松实现LWUIT九宫格

网上关于LWUIT九宫格的代码是有不少，但是那些代码都是一样的。我最开始学习LWUIT时，也看了一下那份代码，但是看了几行就没看了，自己多半没有看懂，于是就放了一段时间。现在我做的项目也需要做九宫格，于是就又回头看那份代码，感觉代码还是不好看而且觉得有点多，也许很多初学者看着都会比较头疼。

其实网上九宫格的代码，可扩展性更好，更符合面向对象的思想。我现在提供的代码供初学者理解和学习（我本人也是初学者）。

首先我们需要理清整个思路：九宫格说白了就是几个按钮，摆的整整齐齐。既然是这样就先做个MainForm,采用GridLayout()布局，然后在Form里面做几个按钮，每一个按钮代表一个Form。

 

具体步骤如下：

1.在MainForm中以GridLayout形式排列九个按钮

2.建立一个BaseForm,添加一个BackCommand

3.创建9个Form继承自BaseForm。

public class MainForm extends Form implements ActionListener { public static String currentText; Command Option_CMD = new Command("选项", 0); Command Exit_CMD = new Command("退出", 1); public MainForm() { //设置窗体翻转效果 Transition in = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300); setTransitionInAnimator(in); //设置这个currentText，是为了在点击某个按钮进入某个Form，然后回退时，焦点仍然在这个按钮上 if (currentText == null) { currentText = "我的空间"; } setLayout(new BorderLayout()); getTitleComponent().setVisible(false); try { Resources r2 = Resources.open("/resources.res"); String[] imgNames = new String[]{ "Space", "Contacts", "IM", "Groups", "Blog", "Mail", "Maps", "Photos" }; String[] texts = new String[]{ "个人空间", "我的好友", "聊天", "我的社区", "博客", "站内邮件", "电子地图", "电子相册",}; /** * 九宫格 */ /* 注意数组imgNames表示图片的名称 在我的资源文件中，比如我选中"我的空间"这个按钮时，按钮图片为Space_sel.png 当"我的空间"失去焦点时，按钮图片为Space.png */ Container buttonContainer = new Container(new GridLayout(3, 3)); for (int i = 0; i < texts.length; i++) { Image unsel_img = r2.getImage(imgNames[i] + ".png"); final Button b = new Button(texts[i], unsel_img); //setRolloverIcon当按钮被选中时 b.setRolloverIcon(r2.getImage(imgNames[i] + "_sel.png")); b.setAlignment(Label.CENTER); //设置文本在Button底部，Button继承自Label，所以是Label.BOTTOM b.setTextPosition(Label.BOTTOM); b.setUIID("DemoButton"); buttonContainer.addComponent(b); b.addActionListener(new ButtonActionListener()); if (currentText.equals(b.getText())) { this.setFocused(b); } } addComponent(BorderLayout.CENTER, buttonContainer); addCommand(Option_CMD); addCommand(Exit_CMD); addCommandListener(this); show(); } catch (IOException ex) { ex.printStackTrace(); } } //点击不同的按钮，分别进入不同的Form public void showSubForm(String text) { BaseForm form = null; if (text.equals("个人空间")) { form = new MySpace(); } else if (text.equals("我的好友")) { form = new MyContacts(); } else if (text.equals("聊天")) { form = new MyChat(); } else if (text.equals("我的社区")) { form = new MyGroups(); } else if (text.equals("博客")) { form = new MyBlog(); } else if (text.equals("站内邮件")) { form = new MyMail(); } else if (text.equals("电子地图")) { form = new MyMaps(); } else if (text.equals("电子相册")) { form = new MyPhotos(); } currentText = text; } private class ButtonActionListener implements ActionListener { public void actionPerformed(ActionEvent evt) { try { Button b = (Button) evt.getSource(); String text = b.getText(); showSubForm(text); } catch (Exception ex) { ex.printStackTrace(); } } } }

 

然后我们来看BaseForm:

public class BaseForm extends Form implements ActionListener { public Command Back_CMD = new Command("返回", 0); public BaseForm() { System.gc(); getTitleComponent().setVisible(false); //设置窗体翻转效果 Transition in = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 500); setTransitionInAnimator(in); addCommand(Back_CMD); setBackCommand(Back_CMD); addCommandListener(this); show(); } public void actionPerformed(ActionEvent evt) { int cmdId = evt.getCommand().getId(); if (cmdId == 0) { new MainForm(); } } }

 

每一个按钮所代表的Form都继承自BaseForm,我给出其中一个：

public class MyBlog extends BaseForm{ //你想在这个Form里面写什么就写什么 }

 

以上代码就足以实现九宫格了，然后再看看UI设计部分，也不麻烦，这是DemoButton的UI设置：

 

 

 

 

然后这里就是resources.res资源文件里面的图片，图片网上可以找到很多。

 

最终效果图：