Basic use of Viewpager--can be switched to the left and right cycle can also automatically switch

Viewpager is also one of the most commonly used controls on Android, but it may not be possible to call directly, so you just need to/libs/android-support-v4.jar the Jaradd to Build path in the project directory.

Take a look at it first:

First, complete the layout file:

From can be analyzed, the overall layout for a relativelayout layout, above is a viewpager, below is a linearlayout, in LinearLayout, there is a textview and a few small dots, So it's easy to write a layout file.

<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 "Tools:context =". Mainactivity "> <android.support.v4.view.viewpager android:id=" @+id/viewpager "android:layout_width         = "Match_parent" android:layout_height= "200dip"/> <linearlayout android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_alignbottom= "@id/viewpager" android:background= "            #33000000 "android:orientation=" vertical "> <textview android:id=" @+id/image_desc "             Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:gravity= "center" android:text= "@string/app_name" android:textcolor= "@android: Color/white" Android:textsiz    E= "18sp"/> <linearlayout        Android:id= "@+id/point_group" android:layout_width= "wrap_content" android:layout_height= "Wra            P_content "android:layout_gravity=" center_horizontal "android:orientation=" Horizontal "/> </LinearLayout></RelativeLayout>

Second, load the layout file in Mainactivity

1. Find the individual controls by ID.

                Viewpager Viewpager = (viewpager) Findviewbyid (R.id.viewpager); LinearLayout pointgroup  = (linearlayout) Findviewbyid (R.id.point_group); TextView Imagedesc = (TextView) Findviewbyid (R.ID.IMAGE_DESC);

2. Initialize the picture resources and indicator points.

arraylist<imageview> imageList = new arraylist<imageview> (); for (int i = 0; i<imageids.length;i++) {// Initialize the picture resource ImageView image = new ImageView (this); Image.setbackgroundresource (Imageids[i]); Imagelist.add (image);// Add an indication point ImageView points = new ImageView (this); Linearlayout.layoutparams params = new Linearlayout.layoutparams (5, 5);p Arams.rightmargin = 20;point.setlayoutparams ( params);p Oint.setbackgroundresource (R.DRAWABLE.POINT_BG), if (i==0) {point.setenabled (true);} else { Point.setenabled (false);} Pointgroup.addview (point);}

This code, first created a ArrayList to save the image resources, and then through a loop, each picture loaded into the ImageList, while loading the picture, The indicator points are also added to the resource id--r.drawable.point_bg that enter the Pointgroup indicator, which was created by itself in/res/drawable, and in the Drawable folder, three XML files were created. The indicator points for different states are plotted separately.

Where the Point_bg.xml file code is:

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">        <item android:drawable=" @drawable/point_nomal "android:state_enabled=" false "></item ><item android:drawable= "@drawable/point_focured" android:state_enabled= "true" ></item>    </ Selector>

The Point_nomal.xml file code is:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"     android:shape= "Oval" >        <size android:width= "5dip"        android:height= "5dip"/>    <solid Android:color= "#55000000"/></shape>

The Point_focured.xml file code is:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"     android:shape= "Oval" >        <size android:width= "5dip"        android:height= "5dip"/>    <solid Android:color= "#aaFFFFFF"/></shape>

3. Add the resource to Viewpager.

Viewpager.setadapter (New Mypageradapter ());p Rivate class Mypageradapter extends Pageradapter {/** * Get the total number of pages */@ overridepublic int GetCount () {return integer.max_value;      Because of the need for infinite loops, so here does not write Imagelist.size ()}/** * To obtain the corresponding position of the view * container  view of the container, is actually viewpager itself * position  corresponding position */ @Overridepublic Object Instantiateitem (viewgroup container, int position) {//Add content container to Container.addview ( Imagelist.get (Position%imagelist.size ())); return Imagelist.get (Position%imagelist.size ());} /** * Determine the corresponding relationship between view and Object */@Overridepublic Boolean isviewfromobject (View view, Object object) {return view = = Object;} /** * Destroy the Object at the corresponding location */@Overridepublic void Destroyitem (ViewGroup container, int position, object object) {Container.remo Veview ((View) object); object = null;}}

Now complete the basic settings, you can run the program to see the effect, now can be looped around the switch.

Third, increase automatic switching

There are many ways to achieve automatic switching: Use timers, turn on sub-threads, use Colckmanager, and send delay messages with handler. Here we use a relatively simple way-to send delay information with handler.

Determines whether to perform the animation private Boolean isrunning = false;private Handler Handler = new Handler () {public void Handlemessage (Android.os. Message msg) {//swipe to next page Viewpager.setcurrentitem (Viewpager.getcurrentitem () +1); if (isrunning) { Handler.sendemptymessagedelayed (0, 2000);};};

The above code is based on OnCreate (), used to determine whether the received handler sent to the information, if received, will viewpager display after a delay of 2000 milliseconds to send out.

Then add the following in the OnCreate () method:

isrunning = true;handler.sendemptymessagedelayed (0, 2000);

This completes the viewpager in the image of the automatic switch, but after running the program found that the text below the picture and the indicator point does not follow the switch, so you need to add a bit of code:

Viewpager.setonpagechangelistener (New Onpagechangelistener () {/** * page switch after the call * postion  the page position */@Overridepublic void onpageselected (int position) {position = Position%imagelist.size ();//Set Text description content Imagedesc.settext ( Imagedescriptions[position]);//Change the state of the indicator point Pointgroup.getchildat (position). SetEnabled (True);p Ointgroup.getchildat ( lastpointposition). setenabled (false); lastpointposition = position;} /** * * * When the page is scrolling */@Overridepublic void onpagescrolled (int position, float positionoffset, int arg2) {}/** * When the page state changes */@Overridepublic void onpagescrollstatechanged (int arg0) {}});

Setonpagechangelistener () is a method of monitoring Viewpager page changes, in fact, the onpageselected () is called when the page is switched, we have rewritten this method. When you switch to a new page, the Text and indicator points are also transformed.

Four, the demo download

Click I download demo o (︶^︶) o

Basic use of Viewpager--can be switched to the left and right cycle can also automatically switch