Implementation of horizontal movement of Android ViewPager album

When we download QQ For The First Time and open it, we will have a new user guide, which will be several images, plus some text instructions, sliding to the right until the end, early in the morning, I studied the ViewPager control on the implementation of this effect.

In the following example, ViewPager is used to move the album horizontally. ViewPager has a corresponding PagerAdapter used to bind data. We need to inherit this class and implement our own functions.

1. Define the ImageItem data object to be used for a display item.

Copy codeThe Code is as follows: public class ImageItem {
Private int id; // resource id
Private String name; // The name displayed.
Public String getName (){
Return name;
}
Public void setName (String name ){
This. name = name;
}
Public ImageItem (int id, String name ){
Super ();
This. id = id;
This. name = name;
}
Public int getId (){
Return id;
}
Public void setId (int id ){
This. id = id;
}
}

2. Each side of ViewPager is an Item. Therefore, in the layout directory, define the Item of each page of ViewPager, named pageritem. xml.

Copy codeThe Code is as follows: <FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent">

<ImageView
Android: id = "@ + id/imgview"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: contentDescription = "@ string/app_name"
Android: scaleType = "fitXY"/>

<TextView
Android: id = "@ + id/textView"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_gravity = "bottom | center_horizontal"/>

</FrameLayout>

3. Create a New java file, corresponding to each Item of ViewPager

Copy codeThe Code is as follows: public class ViewpagerItem extends FrameLayout {
Private ImageView imageview; // display the ImageView of the image
Private TextView textview;
Private Bitmap bitmap; // Bitmap corresponding to the image
Private ImageItem imageitem; // each image item object

Public ViewpagerItem (Context context ){
Super (context );
SetViews ();
}
Public ViewpagerItem (Context context, AttributeSet attrs ){
Super (context, attrs );
SetViews ();
}

Public void setData (ImageItem) {// fill data with ImageItem
This. imageitem = item;
Int resid = item. getId ();
String name = item. getName ();
Imageview. setImageResource (resid );
Textview. setText (name );
}

Public void reload () {// reload data
Int resid = imageitem. getId ();
Imageview. setImageResource (resid );
}

Public void recycle () {// reclaim data
Imageview. setImageBitmap (null );
If (this. bitmap = null | this. bitmap. isRecycled ()){
Return;
}
This. bitmap. recycle ();
This. bitmap = null;
}

Public void setViews (){
LayoutInflater infalter = LayoutInflater. from (getContext ());
View view = infalter. inflate (R. layout. pageritem, null );
Textview = (TextView) view. findViewById (R. id. textView );
Imageview = (ImageView) view. findViewById (R. id. imgview );

AddView (view );
}
}

4. Create a data filler PagerItemAdapter, which inherits from PagerAdapter

Copy codeThe Code is as follows: public class PagerItemAdapter extends PagerAdapter {
Private Context context;
Private ImageItem [] image;

Public PagerItemAdapter (Context context, ImageItem [] image ){
This. context = context;
This. image = image;
HashMap = new HashMap <Integer, ViewpagerItem> ();
}

Private HashMap <Integer, ViewpagerItem> hashMap; // Save the photo id and corresponding ViewpagerItem

@ Override
Public int getCount (){
Return image. length;
}

@ Override
Public boolean isViewFromObject (View arg0, Object arg1 ){
Return arg0 = arg1;
}

@ Override
Public void finishUpdate (ViewGroup container ){
Super. finishUpdate (container );
}

@ Override // initialize a ViewpagerItem. if it already exists, load it again. If it does not exist, create a new
Public Object instantiateItem (ViewGroup container, int position ){
ViewpagerItem item;
If (hashMap. containsKey (position )){
Item = hashMap. get (position );
Item. reload ();
} Else {
Item = new ViewpagerItem (context );
ImageItem itemimg = image [position];
Item. setData (itemimg );
HashMap. put (position, item );
(ViewPager) container). addView (item );
}
Return item;
}

@ Override // the image will be removed when we slide the image left and right
Public void destroyItem (View container, int position, Object object Object ){
ViewpagerItem item = (ViewpagerItem) object;
Item. recycle ();
}
}

5. Add a ViewPager control to the main. xml file.

Copy codeThe Code is as follows: <android. support. v4.view. ViewPager
Android: id = "@ + id/viewpager"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>

6. Modify MainActivity as follows:

Copy codeThe Code is as follows: public class MainActivity extends Activity {
Private final static int RES [] = {R. drawable. p1, R. drawable. p2}; // p1, p2 is the two images in the drawable folder.
Private ViewPager viewpager;
Private PagerItemAdapter adapter;
Private ImageItem [] item;

Private void setView (){
Item = new ImageItem [2];
Item [0] = new ImageItem (RES [0], "page1 ");
Item [1] = new ImageItem (RES [1], "page2 ");
Viewpager = (ViewPager) findViewById (R. id. viewpager );
Adapter = new PagerItemAdapter (getApplicationContext (), item );
Viewpager. setAdapter (adapter );
}

@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_main );
SetView ();
}
}

Run the program and slide the screen right and right to see the following effect!