Twitter-like mobile background effect

There are friends who use Twitter client should have found that when logged in, the screen above and below the cloud picture is constantly moving, plus Twitter that cute bird is constantly moving, give people feel like a bird in flight, feel very good.

I also tried to implement it and found that using a custom drawable plus thread was easier to implement. Here is the code for the custom drawable, which has been written in detail. Here is the use of three pictures, the use of a picture is more simple, we can completely extrapolate, to achieve their own animated picture effect.

 Packagecom.liuzhichao.dynamicdrawable;Importandroid.app.Activity;ImportAndroid.graphics.Bitmap;Importandroid.graphics.BitmapFactory;ImportAndroid.graphics.Canvas;ImportAndroid.graphics.ColorFilter;Importandroid.graphics.drawable.Drawable;ImportAndroid.util.DisplayMetrics;ImportAndroid.view.View; Public classDynamicdrawableextendsDrawableImplementsRunnable {Private StaticBitmap Mbottombgbitmap;//large image at bottom    Private StaticBitmap Mbottomfgbitmap;//Bottom Small Image    Private StaticBitmap Mtopbitmap;//Top Cloud Picture    Private Final intDispalywidth;//Phone screen width    Private Final intDispalyheight;//Mobile Screen Height    Private floatMbottombgtop;//the location of the top large map display    Private floatMbottomfgtop;//the location of the top small figure display    Private intStartX;//Top cloud picture and bottom large image move offset variable    Private intMbottomfgstartx;//bottom small figure moving offset variable    PrivateView MView;  Publicdynamicdrawable (activity activity, View MView) { This. MView =MView; if(Mtopbitmap = =NULL) {Mtopbitmap=Bitmapfactory.decoderesource (Activity.getresources (), R.DRAWABLE.CLOUD_TOP_BG); }        if(Mbottombgbitmap = =NULL) {Mbottombgbitmap=Bitmapfactory.decoderesource (Activity.getresources (), R.DRAWABLE.CLOUD_BOTTOM_BG); }        if(Mbottomfgbitmap = =NULL) {Mbottomfgbitmap=Bitmapfactory.decoderesource (Activity.getresources (), R.DRAWABLE.CLOUD_BOTTOM_FG); }        //Get screen height and widthDisplaymetrics DM =NewDisplaymetrics (); DM=activity.getresources (). Getdisplaymetrics ();  This. Dispalyheight =Dm.heightpixels;  This. Dispalywidth =Dm.widthpixels; //top Picture Display position = screen height-picture itself high-caption Height         This. Mbottombgtop = Dispalyheight-mbottombgbitmap.getheight ()-100;  This. Mbottomfgtop = Dispalyheight-mbottomfgbitmap.getheight ()-100; //start moving a picture thread        NewThread ( This). Start (); } @Override Public voidDraw (canvas canvas) {//Drawbitmap (Bitmap Bitmap, float left, float top, paint paint)Canvas.drawbitmap (Mtopbitmap, StartX, 0,NULL); Canvas.drawbitmap (Mbottombgbitmap, StartX, Mbottombgtop,NULL); Canvas.drawbitmap (Mbottomfgbitmap, Mbottomfgstartx, Mbottomfgtop,NULL); } @Override Public intgetopacity () {//TODO auto-generated Method Stub        return0; } @Override Public voidSetalpha (intarg0) {        //TODO auto-generated Method Stub} @Override Public voidSetcolorfilter (Colorfilter arg0) {//TODO auto-generated Method Stub} @Override Public voidrun () { while(!Thread.CurrentThread (). isinterrupted ()) {            //900 is the length of the picture//If the move offset is already greater than the length of the picture-the screen width, then you have moved to the end of the picture, and if you move on, it will show a blank//so the startx is re-assigned to 0, so the picture starts to move again//but this transition effect will be more obvious, then switch the moment, will obviously feel the picture changes            if(StartX + (900-dispalywidth) = = 0) {StartX= 0; } Else{StartX-= 1; }            //the movement of the bottom small figure,//-=2 is to make small figures move faster than large images, resulting in different visual effects            if(Mbottomfgstartx + (900-dispalywidth) = = 0) {Mbottomfgstartx= 0; } Else{Mbottomfgstartx-= 2; }            Try {                //moves every 1/10 secondsThread.Sleep (100L); } Catch(interruptedexception e) {thread.currentthread (). interrupt (); }            //Refresh Interfacemview.postinvalidate (); }    }}

Then, where the background map is needed, direct setbackgrounddrawable is available, and the following background is the ID of the entire layout file.

Private View background;    @Override    publicvoid  onCreate (Bundle savedinstancestate) {        super . OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main);         = Findviewbyid (android. R.id.background);        Background.setbackgrounddrawable (new dynamicdrawable (this, background));    }

The layout file is also affixed to it:

<relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:id= "@android: Id/background" > <TextView android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_centerhorizontal= "true"android:layout_centervertical= "true"android:padding= "@dimen/padding_medium"Android:text= "@string/hello_world"Tools:context=". Mainactivity "/></relativelayout>

Or cut a picture, although you can't see the animation effect.

This article transferred from: http://liuzhichao.com/p/659.html

Twitter-like mobile background effect