Several implementation methods for Android image carousel Effect

Several implementation methods for Android image carousel Effect

When using the APP, you will often see the carousel effect of the upper banner image. Now let's take a look at the following implementation methods for image polling in android:

First, use the animation method: (tedious code)

This distribution requires two animation effects, one layout and one main class. Let's look at the Code:

Public class IamgeTrActivity extends Activity {
/** Called when the activity is first created .*/


Public ImageView imageView;
Public ImageView imageView2;


Public Animation animation1;
Public Animation animation2;

Public TextView text;


Public boolean juage = true;


Public int images [] = new int [] {R. drawable. icon, R. drawable. expriment,
R. drawable. changer, R. drawable. dataline, R. drawable. preffitication };


Public int count = 0;


Public Handler handler = new Handler ();


Public Runnable runnable = new Runnable (){


@ Override
Public void run (){
// TODO Auto-generated method stub
AnimationSet animationSet1 = new AnimationSet (true );
AnimationSet animationSet2 = new AnimationSet (true );
ImageView2.setVisibility (0 );
TranslateAnimation ta = new TranslateAnimation (
Animation. RELATIVE_TO_SELF, 0f, Animation. RELATIVE_TO_SELF,
-1f, Animation. RELATIVE_TO_SELF, 0f,
Animation. RELATIVE_TO_SELF, 0f );
Ta. setDuration (2000 );
AnimationSet1.addAnimation (ta );
AnimationSet1.setFillAfter (true );
Ta = new TranslateAnimation (Animation. RELATIVE_TO_SELF, 1.0f,
Animation. RELATIVE_TO_SELF, 0f, Animation. RELATIVE_TO_SELF,
0f, Animation. RELATIVE_TO_SELF, 0f );
Ta. setDuration (2000 );
AnimationSet2.addAnimation (ta );
AnimationSet2.setFillAfter (true );
// IamgeView goes out. imageView2 comes in.
ImageView. startAnimation (animationSet1 );
ImageView2.startAnimation (animationSet2 );
ImageView. setBackgroundResource (images [count % 5]);
Count ++;
ImageView2.setBackgroundResource (images [count % 5]);

Text. setText (String. valueOf (count ));
If (juage)
Handler. postDelayed (runnable, 6000 );
Log. I (handler, handler );
}
};


@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView = (ImageView) findViewById (R. id. imageView );
ImageView2 = (ImageView) findViewById (R. id. imageView2 );
Text = (TextView) findViewById (R. id. text );
Text. setText (String. valueOf (count ));
// Hide iamgeView first and then display
ImageView2.setVisibility (4 );
Handler. postDelayed (runnable, 2000 );
}


Public void onPause (){
Juage = false;
Super. onPause ();
}
}

 

Layout code:

Android: orientation = vertical
Android: layout_width = fill_parent
Android: layout_height = fill_parent
Android: id = @ + id/rl>

Android: id = @ + id/imageView
Android: layout_width = fill_parent
Android: background = @ drawable/icon
Android: layout_below = @ + id/rl
Android: layout_height = 120dp/>

Android: id = @ + id/imageView2
Android: layout_width = fill_parent
Android: background = @ drawable/expriment
Android: layout_below = @ + id/rl
Android: layout_height = 120dp/>

Android: id = @ + id/text
Android: layout_width = fill_parent
Android: layout_height = wrap_content
Android: layout_below = @ id/imageView/>
 

 

Method 2: Use ViewFlipper to implement image carousel

 

The Android system comes with a multi-page management control that can automatically switch between sub-interfaces:

FirstAdd View for ViewFlipper

(1) Static import: Direct import in the layout File

(2) dynamic import: addView () method

Common ViewPlipper methods:

SetInAnimation: Set the animation used when the View enters the screen.

SetOutAnimation: Specifies the animation used when the View exits the screen.

ShowNext: Call this function to display the next View in ViewFlipper.

ShowPrevious: Call this function to display the previous View in ViewFlipper.

SetFlipInterval: set the time interval for switching between views.

StartFlipping uses the time interval set above to start switching all views.

StopFlipping: Stop View switching

After talking about this, what are we going to achieve today?

(1) Use ViewFlipper to implement image carousel

(2) ViewFlipper that supports gesture sliding

We need to prepare several images first: Put the images into drawable.

Create two animations: create a new folder under res and create two xml files:

Left_in:

Android: duration= 5000
Android: fromxtriangle = 100% p
Android: toXDelta = 0/>
 

Left_out:

Android: fromXDelta = 0
Android: toXDelta =-100% p
Android: duration= 5000/>
 

A Layout file:

Xmlns: tools = http://schemas.android.com/tools
Android: layout_width = match_parent
Android: layout_height = match_parent
Tools: context =. MainActivity>

Android: id = @ + id/flipper
Android: layout_width = fill_parent
Android: layout_height = fill_parent/>

 

One main class:

Public class MainActivity extends Activity {


Private ViewFlipper flipper;
Private int [] resId = {R. drawable. pc1, R. drawable. pc2, R. drawable. pc3, R. drawable. pc4 };
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_main );

Flipper = (ViewFlipper) findViewById (R. id. flipper );

/*
* The dynamic import method adds ViewFlipper to the subview.
**/
For (int I = 0; I <resId. length; I ++ ){
Flipper. addView (getImageView (resId [I]);

}
/*
* Add animation effects for ViewFlipper
**/
Flipper. setInAnimation (this, R. anim. left_in );
Flipper. setOutAnimation (this, R. anim. left_out );
Flipper. setFlipInterval (5000 );
Flipper. startFlipping ();
}
Private ImageView getImageView (int resId ){
ImageView image = new ImageView (this );
Image. setBackgroundResource (resId );
Return image;
}

}

In this way, an image polling function is achieved.

We can also add clicks and slide results:

We also need to add two sliding effects to the right:

Right_in:

Android: fromXDelta = 0
Android: toXDelta =-100% p
Android: duration= 2000/>
 

Right_out:

Android: fromxtriangle = 100% p
Android: toXDelta = 0
Android: duration= 2000/>
 

Then we also need to add it in the main class (if you don't want to enable automatic playback of images and want to use gestures to play images, You need to delete the "Code for adding animation effects to ViewFlipper):

Public boolean onTouchEvent (MotionEvent event ){
// TODO Auto-generated method stub
Switch (event. getAction ()){
Case MotionEvent. ACTION_DOWN:
StartX = event. getX ();
Break;
Case MotionEvent. ACTION_MOVE: // determines whether to slide left or right
If (event. getX ()-startX> 100 ){
Flipper. setInAnimation (this, R. anim. left_in );
Flipper. setOutAnimation (this, R. anim. left_out );
Flipper. showPrevious ();
} Else if (startX-event. getX ()> 100 ){
Flipper. setInAnimation (this, R. anim. right_in );
Flipper. setOutAnimation (this, R. anim. right_out );
Flipper. showNext ();
}

Case MotionEvent. ACTION_UP:
Break;


}
Return super. onTouchEvent (event );
}

In this way, the image polling function completed by ViewFlipper is complete.