Android Background picture Scrolling

Yesterday in the client to do the weather display page, found a lot of app weather page background image will slowly move, forming a 3d feeling. For example, rain, static pictures slowly moving, raindrops position change feel really in the rain. The movement of the clouds is also cool. So I studied for the afternoon. A custom view control was written.

My custom control inherits the view, overriding the OnDraw method. I C # to Android only 3 months, the following code, such as error or there can be improved, please point out in the comments. Hope to enlighten you!

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 8 5

/**  * 图片跑马灯，图片无限循环滚动效果控件  * 图片长宽必须大于手机长宽，否则会报错退出  * @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);<br>         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;         }     }}

The premise of using this control is that the original size must be larger than the display area, otherwise scrolling will have no meaning and become tiled.

Next idea. At the beginning of the scroll, the original image will be able to capture a picture that satisfies the size of the display area. So at this point, I was in the OnDraw to create a new bitmap from the original, and then draw on the canvas on the line.

One of the critical points of scrolling is when the upper-right corner of the original image is coincident with the upper-right corner of the display area, which means that the next call to OnDraw, the bitmap from the original image can not fill the entire area, it is necessary to take a bitmap,2 from the original picture is stitched up to fill up the entire display area. If the picture is scrolled from left to right, after the critical point, the first intercept is the picture of the right edge of the original image, and the second intercept is the left border part picture. This looks like an infinite scroll of pictures.

The second point is that the upper-right corner of the original is coincident with the upper-left corner of the display area. This means that the original scroll has been completed. At this point, you do not need to use two images to fill the display area, only need to start from the upper left corner of the original image to intercept the size of the display area. This is the time to complete the infinite scrolling.

This control can only scroll one picture at this time, but a little change could be made into a gallery control. Join the gesture control should be able to do a nice picture browser. But let's just do it ~ there is time to change!