JavaME UI设计之九宫格

 

现在越来越多的手机应用程序使用九宫格作为菜单了，很多智能手机都开始提供直接可以使用的九宫格api了，比如：android等，在JavaME平台上却需要我们自己来实现这样的效果，前面我们说过JavaME的低级界面比较灵活，我们可以使用低级界面来实现任意效果，当然，本文就将给大家展示通过JavaME的低级界面来实现一个九宫格程序，该程序会自动适应屏幕大小，计算并显示出九宫格效果，对于九宫格的绘制非常简单，关键在于如何实现自动适应屏幕来绘制，这只需要一些稍微复杂（记住，只是稍微复杂，其实并不是需要各种高等数学知识）的数学计算即可。

首先演示一下本文需要实现的九宫格效果在不同尺寸的移动设备上显示效果，如下面几幅图所示。
 

该程序在不同尺寸大小的模拟器上测试效果如上图所示，对于屏幕较大的设备能一屏就显示9个图标，对于较小的屏幕则只能显示4个或者更少！

要实现这种能自动适应屏幕九宫格控件，算法很多，笔者这里将使用一个将每个一个格子的数据（即0-8的索引）放置在一个二维数组中，这样，在初始化过程中就只需要根据屏幕的尺寸来计算数组的存放方式，，绘制时根据数组的行数和列数进行绘制即可。比如一个320*320的手机屏幕，计算出来的九宫格数组可能是：

    {

        {0, 1, 2},

        {3, 4, 5},

        {6, 7, 8}

    }

而一个176*220的手机屏幕计算出来的数组可能为：

    {

        {0, 1},

        {2, 3},

        {4, 5},

        {6, 7},

        {8,-1}

    }

其中-1代码空，即没有，在绘制时也就不进行绘制。

另外，还有一种比较”极端“的手机屏幕，屏幕尺寸非常小，一屏只能显示一个，则数组的布局如下图所示。

    {

        {0},

        {1},

        {2},

        {3},

        {4},

        {5},

        {6},

        {7},

        {8},

    }

当一屏不能显示完全时，我们需要通过一个变量来记录当前屏幕绘制数组中的索引，即mArrayIndex，绘制时则从该索引所指向的数组行数开始，绘制一屏能够显示行数即可。

假设九宫格的数组为mArrayGrid，行数和列数分别为col和row，每一屏能显示的行数为mMaxCol，则绘制过程的代码如下所示。

for (int i = 0; i < mMaxCol; i++) {

for (int j = 0; j < row; j++) {

              g.drawImage(mGridImage[mArrayIndex+i*row+j], x+j*w, y+i*h, 0);

}

}

其中w,h分别为每个格子的宽度和高度，mGridImage数组为每个格子的图像数据。

对于当前需要选中的格子绘制不同的背景或者加上选择框即可，在按键处理过程中更新当前选择格子的变量，如果需要翻页，则同时更新mArrayIndex变量即可。对于选中的索引就就是mArrayGrid数组中的0-8的数值即确定。

根据需要，我们还是可要将其封装为一个控件，封装代码如下所示。

public class GridView {

    byte[][] mArrayGrid;//格子的数据索引

    int mSceneWidth;//屏幕的宽度

    int mSceneHeight;//屏幕的高度

    int mCol,mRow;//要计算的格子数组的行和列

    int mMaxCol;//一屏幕能够显示最大行数

    int mGridWidth;//单个格子的宽度和高度

    int mGridHeight;

    int mArrayIndex;//当前行的索引，对应数组的行

    public void init(int sW,int sH,int gW,int gH,String menuItem){

        //...

    }

    public void init(int sW,int sH,int gW,int gH,Image menuItem){

        //...

    }

   

    public void draw(Graphics g){

        for (int i = 0; i < mMaxCol; i++) {

            for (int j = 0; j < mRow; j++) {

                g.drawImage(mGridImage[mArrayIndex+i*mRow+j], x+j*mGridWidth, y+i*mGridHeight, 0);

                //or

                g.drawString(mGridString[mArrayIndex+i*mRow+j], x+j*mGridWidth, y+i*mGridHeight, 0);

            }

        }

    }

   

    public void isNext(){

       

    }

    public void isPrev(){

       

    }

    public void next(){

       

    }

    public void prev(){

       

    }

}

因为九宫格的菜单，可要是图片素菜也可以是文字内容，并且选中状态可以是不同的背景，也可以是由矩形框框住，所以实现的种类也很多，代码页就比较长，由于篇幅关系，这里不能一一贴出所有的实现代码，相同通过对九宫格实现的原理的理解，大家都能完成上面的框架，最后提醒大家一下，对于九宫格的事件触发处理，可以通过回调函数的方式来传入处理事件的函数给我们所封装的GridView类。

到这里我们就可以在JavaME平台使用自己实现的九宫格控件了，在网络上笔者也看到各种实现九宫格的算法，但是有很大一部分都没有自动适应屏幕分辨率的功能，都需要较大的改动程序才能实现，因此大家需要谨慎使用。