使用SurfaceView完成地图无缝拼接

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

本示例主要练习SurfaceView的使用和实现地图无缝拼接的算法，这在一些小游戏中非常常见，触碰屏幕可以绘制各种角色，如果在里面在添加一些怪物，便可以完成一个简单的小游戏，代码如下：

MainActivity：

package com.home.drawfish;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

布局xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <com.home.ui.SeaView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

自定义组件SeaView：

package com.home.ui;

import java.util.ArrayList;
import java.util.List;

import com.home.drawfish.R;
import com.home.role.FishRole;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class SeaView extends SurfaceView {
	private Paint paint = new Paint();
	private Bitmap bgImage;// 背景图片
	private SurfaceHolder holder;
	private float bgX1;// 第一张背景图的x坐标
	private float bgX2;// 第二张背景图的x坐标
	private float bgY;// 背景图的y坐标
	// 放鱼的集合
	private List<FishRole> fishRoleList = new ArrayList<FishRole>();

	public SeaView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public SeaView(Context context, AttributeSet attrs) {
		super(context, attrs);
		holder = this.getHolder();
		bgImage = BitmapFactory.decodeResource(getResources(), R.drawable.sea);
		bgX2 = bgImage.getWidth();// 第二张背景图的初始X坐标
		new Thread() {
			public void run() {
				while (true) {
					bgX1--;
					bgX2--;
					if (bgX1 <= -bgImage.getWidth()) {
						bgX1 = bgX2 + bgImage.getWidth();
					}
					if (bgX2 <= -bgImage.getWidth()) {
						bgX2 = bgX1 + bgImage.getWidth();
					}
					Canvas canvas = holder.lockCanvas();
					for (int i = fishRoleList.size() - 1; i >= 0; i--) {
						fishRoleList.get(i).cartoon();
						// 如果鱼不可见，则把鱼从集合中移除
						if (!fishRoleList.get(i).isVisible()) {
							fishRoleList.remove(i);
						}
					}
					if (canvas != null) {
						drawImage(canvas);// 绘制背景
						// 遍历集合绘制鱼
						for (int i = 0; i < fishRoleList.size(); i++) {
							fishRoleList.get(i).drawRole(canvas);
						}
						holder.unlockCanvasAndPost(canvas);
					}
					try {
						Thread.sleep(50);
					} catch (InterruptedException e) {
						e.printStackTrace();
					}
				}
			}
		}.start();
	}

	public SeaView(Context context) {
		super(context);
	}

	/**
	 * 绘制背景图
	 * 
	 * @param canvas
	 */
	public void drawImage(Canvas canvas) {
		canvas.drawBitmap(bgImage, bgX1, bgY, paint);
		canvas.drawBitmap(bgImage, bgX2, bgY, paint);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// 如果点击了屏幕则产生随机方向的鱼
		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			FishRole fishRole = new FishRole(this.getContext());
			fishRole.setFishX(event.getX());
			fishRole.setFishY(event.getY());
			fishRoleList.add(fishRole);
		}
		return super.onTouchEvent(event);
	}

}

角色：鱼

package com.home.role;

import com.home.drawfish.R;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;

/**
 * 角色-鱼
 * 
 * @author Administrator
 * 
 */
public class FishRole {
	private Context context;
	private int direction;// 鱼的方向
	private Bitmap leftFishImage;// 向左的鱼
	private Bitmap rightFishImage;// 向右的鱼
	// 鱼的位置（坐标）
	private float fishX;
	private float fishY;
	// 是否需要显示
	private boolean isVisible;
	private Paint paint = new Paint();

	public FishRole(Context context) {
		this.context = context;
		init();
	}

	/**
	 * 对鱼进行初始化
	 */
	public void init() {
		leftFishImage = BitmapFactory.decodeResource(context.getResources(),
				R.drawable.fish1);
		rightFishImage = BitmapFactory.decodeResource(context.getResources(),
				R.drawable.fish2);
		// 随机产生鱼的方向
		direction = (int) (Math.random() * 2);
		isVisible = true;
	}

	/**
	 * 鱼自身的动画算法
	 */
	public void cartoon() {
		if (direction == 0) {
			fishX--;
		} else {
			fishX++;
		}
		int screenWidth = ((Activity) context).getWindowManager()
				.getDefaultDisplay().getWidth();
		// 超出屏幕则设置鱼为不可见
		if (fishX > screenWidth || fishX + leftFishImage.getWidth() < 0) {
			isVisible = false;
		}
	}

	/**
	 * 对角色进行绘制
	 */
	public void drawRole(Canvas canvas) {
		if (direction == 0) {
			canvas.drawBitmap(leftFishImage, fishX, fishY, paint);
		} else {
			canvas.drawBitmap(rightFishImage, fishX, fishY, paint);
		}
	}

	public float getFishX() {
		return fishX;
	}

	public void setFishX(float fishX) {
		this.fishX = fishX;
	}

	public float getFishY() {
		return fishY;
	}

	public void setFishY(float fishY) {
		this.fishY = fishY;
	}

	public boolean isVisible() {
		return isVisible;
	}

	public void setVisible(boolean isVisible) {
		this.isVisible = isVisible;
	}

}

附上图片效果：