Android 创建一个可拖拽图表-第二部分

 

第二部分将向你展示如何改进我们在第一部分实现的2D图表，使滚动更加流畅。

备注：我改变了代码风格，从而和Java/Android保持一致。请注意，原先的变量名称 _mapSize 现在变成 mMapSize。

在第一部分出现的显示延迟非常糟糕，没有人愿意玩数秒钟才能绘制一帧图像的游戏。为什么会出现显示问题？还记得我们绘制图表的方式吗？我们在循环中遍历图表，绘制每一个单元格。这种方式绘制10*10的图表尚可，但绘制100*100或更大的图表时，需要大量的单元格并且其中大部分没有显示出来。不应该用资源和时间去创建我们看不见的单元格。

为了解决此问题，我们加入计算式定义循环的开始和结束，下面是目前的onDraw()函数：

 

 

@Override public void onDraw(Canvas canvas) { // help variables int x = 0; int y = 0; for (int i = 0; i < mMapSize; i++) { // get the row mRow = mMapCells.get(i); // 计算行坐标y y = i * mCellSize - mYOffset; // go through the row for (int j = 0; j < mMapSize; j++) { // 计算列坐标x x = j * mCellSize - mXOffset; mRow.get(j).draw(canvas, paint, x, y); } } } 

 

 

可以看出我们每次都遍历整个图表。

在改变循环的开始和结束之前，我们需要计算图表显示部分的边界，为此我们创建了一个新函数。

 

 

// loop borders private int mStartRow; private int mMaxRow; private int mStartCol; private int mMaxCol; // 滑动时的像素位移量 private int mXScrollOffset = 0; private int mYScrollOffset = 0; private void calculateLoopBorders() { mStartRow = mYOffset / mCellSize; mMaxRow = (int) Math.min(mMapSize, mStartRow + Math.floor(getHeight() / mCellSize) + 2); mStartCol = mXOffset / mCellSize; mMaxCol = (int) Math.min(mMapSize, mStartCol + Math.floor(getWidth() / mCellSize) + 2); mXScrollOffset = (int) (((mXOffset / (float) mCellSize) - (mXOffset / mCellSize)) * mCellSize); mYScrollOffset = (int) (((mYOffset / (float) mCellSize) - (mYOffset / mCellSize)) * mCellSize); } 

 

 

在代码的第12行和第14行，我们以单元格为单位计算位移，算出循环的起始点。得到的结果是距离图表左上角原点偏移的单元格数。

在第13行和第15行，我们算出屏幕上显示的行和列的数量，并上下左右额外增加一行或一列，以确保屏幕边缘的单元格总是完整的，即使它只能看见一个像素。

第16行和第17行非常重要，它们计算我们需要滚动的像素值，改善滚动的效果。（提示：如果去掉这个变量，滚动将以单元格为单位进行，而不是以像素为单位）

我们每次滚动页面都需要调用这个计算式。当事件ACTION_MOVE发生时，才需要滚动页面，因此我们在if/else结构的最后一行加入此函数：

 

 

@Override public boolean onTouchEvent(MotionEvent event) { // touch down if (event.getAction() == MotionEvent.ACTION_DOWN) { // snipped } else if (event.getAction() == MotionEvent.ACTION_MOVE) { // snipped // 存储最后的位置 mXTouch = (int) event.getX(); mYTouch = (int) event.getY(); calculateLoopBorders(); } else if (event.getAction() == MotionEvent.ACTION_UP) { // snipped } return true; } 

 

边界值要么为默认值0，要么为显示大小加2。为了确保getWidth()和getHeight()函数返回正确的值，我们一开始就需要在onSurfaceCreated()函数中调用循环边界函数。否则开始时会出现黑屏，直到我们触碰后才显示图像。

 

@Override public void surfaceCreated(SurfaceHolder holder) { if (!mMapThread.isAlive()) { mMapThread = new MapThread(this); } mMapThread._run = true; mMapThread.start(); calculateLoopBorders(); } 

在创建边界并且调用他们的计算式后，我们必须重新分解循环。

 

// help variables private int mX = 0; private int mY = 0; private int mI = 0; private int mJ = 0; @Override public void onDraw(Canvas canvas) { mI = 0; for (int i = mStartRow; i < mMaxRow; i++) { mJ = 0; // get the row mRow = mMapCells.get(i); // 计算行坐标y mY = mI * mCellSize - mYScrollOffset; // go through the row for (int j = mStartCol; j < mMaxCol; j++) { // 计算列坐标x mX = mJ * mCellSize - mXScrollOffset; mRow.get(j).draw(canvas, mPaint, mX, mY); mJ++; } mI++; } } 

 

 

分步说明此代码：

onDraw()函数会频繁调用，因此需要可重用的对象和变量，为此，我们将辅助变量改为成员变量。因为“显示部分的索引”不同于遍历整个图表时的索引，我们加入变量mI和mJ，存储屏幕上显示部分的行和列的索引。

在第10行代码，我们先计算开始和结束，然后进行循环，第13行用计算后的边界值遍历所有的行，并且绘制每行的单元格（第18行）。

其余部分参见代码注释。

现在你可以将mMapSize设定为300，并且流畅的滚动页面。

我们已经完成了所有工作，你可以在LogCat中查看GarbageCollector的相关日志。

在一部Nexus One上，我将mMapSize设定为500，但这个结果已经接近极限，GC每600毫秒至少要释放1.6兆的内存空间。

工程源码：ScrollMap – Part II

原文链接：http://www.droidnova.com/create-a-scrollable-map-with-cells-part-ii,678.html

原作者：Martin