android 背景图片滚动

　昨天在给客户端做天气展示页面的时候，发现很多app的天气页面背景图片都会缓慢移动，形成了一种3d的感觉。例如下雨，静态图片缓慢移动，雨滴位置变换感觉就真的在下雨。云朵的移动也很酷。于是研究了一下午。写了一个自定义view控件。

我的自定义控件继承了view，重写ondraw方法。本人C#转android才3个月，以下代码如有错或者有可以改进的地方，请各位在评论中指出。望不吝赐教！

/**
 * 图片跑马灯，图片无限循环滚动效果控件
 * 图片长宽必须大于手机长宽，否则会报错退出
 * @author sy 
 */
public class MarqueeImageView extends View {
	// 背景图片
	Bitmap back;

	int nowX = 0;
	int backWidth;
	int vw;
	int vh;
	int speed;

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

	public MarqueeImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

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

	// 启动
	public void Start(Bitmap backMap, Window windows) {

		int h = backMap.getHeight();
		int w = backMap.getWidth();

		// 获取设备高度和宽度
		Rect frame = new Rect();
		windows.getDecorView().getWindowVisibleDisplayFrame(frame);

		vh = frame.height();
		vw = frame.width();
		// 设置滚动速度
		speed = 1;
		//裁剪一下
		back = Bitmap.createBitmap(backMap, 0, 0, backMap.getWidth(), vh);
		backWidth = back.getWidth();

		final Handler handler = new Handler() {

			public void handleMessage(Message msg) {
				if (msg.what == 0x123) {
					// 该函数的作用是使整个窗口客户区无效。窗口的客户区无效意味着需要重绘
					invalidate();
				}
			}
		};
		new Timer().schedule(new TimerTask() {

			@Override
			public void run() {
				handler.sendEmptyMessage(0x123);
			}
		}, 0, 80);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		int w = backWidth - nowX;

		if (vw <= w) {
			// 图片剩余宽度大于屏幕宽度，从原图上截取屏幕窗口大小的一块区域
			Bitmap bitmap = Bitmap.createBitmap(back, nowX, 0, vw, vh);
			canvas.drawBitmap(bitmap, 0, 0, null);
		} else {
			Bitmap bitmap = Bitmap.createBitmap(back, nowX, 0, w, vh);
			canvas.drawBitmap(bitmap, 0, 0, null);
			Bitmap bitmap2 = Bitmap.createBitmap(back, 0, 0, vw - w, vh);
			canvas.drawBitmap(bitmap2, w, 0, null);
		}

		if (nowX + speed >= backWidth) {
			nowX = 0;
		} else {
			nowX += speed;
		}
	}

}

　　使用这个控件的前提是原图大小一定要大于显示区域，不然滚动就没有意义，变成平铺了。

　　说下思路。滚动初始时，原图就上就能截取到满足显示区域大小的图片。所以这时，我在ondraw里面直接从原图生成一个新的bitmap，然后画到canvas上就行了。

　　滚动的临界点之一是当原图的右上角和显示区域的右上角重合时，这意味着下一次调用ondraw，从原图截取出来的bitmap已经不能填满整个区域，这时需要再从原图中截取一次bitmap，2张图片拼接起来占满整个显示区域。如果是从左向右滚动图片，临界点后，第一次截取的是原图右边界部分图片，第二次截取的是左边界部分图片。这样看上去就是一张图片无限滚动了。

　　第二个临界点是原图的右上角和显示区域的左上角重合。这意味着已经完成一次原图的滚动了。这时就不需要再用两张图片拼接填满显示区域了，只需要从原图的左上角开始截取显示区域大小的一块即可。这时才算完成了无限滚动。

这个控件目前只能滚动一张图片，不过稍微改一改也可以做成画廊控件。加入手势控制应该可以做一个不错的图片浏览器。不过先就这样吧~有时间有需求再改！

android 背景图片滚动

相关推荐