Android Learning Note: Using the Viewpager component for picture switching

In many apps, especially after the first installation starts, there are several pictures to introduce and explain some of the apps, and the pictures can be toggled as you swipe.

We use the Viewpager component here to demonstrate how this can be achieved.

1. Create an app project and create a master Activity by default

2, set the activity's layout file Activity_main.xml content as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><framelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:orientation=" vertical " > <android.support.v4.view.viewpager android:id= "@+id/viewpager" android:layout_width= "match _parent "android:layout_height=" wrap_content "/> <relativelayout android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" > <li Nearlayout android:id= "@+id/tagview" android:layout_width= "Match_parent" Android:la yout_height= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_marginbottom= "2 0DP "android:gravity=" center_horizontal "android:orientation=" Horizontal "> </lin Earlayout> </relativelayoUt> </FrameLayout> 

　　

Because we want to switch the image again, there are some icons (or numbers) that show the current picture in a dot shape. So the activity here uses the Framelayout layout (which allows for view overlay placement).

The first control is Viewpager (note that Viewpager is in the SUPPORT.V4 package, and the new Andorid does not migrate the component).

The second control is to place a relativelayout, where a linearlayout (located at the bottom of the screen) is placed, and the linearlayout uses a horizontal layout to place the small icon.

3. Prepare the picture

Prepare 5 images to toggle the display, such as Pic1.jpg, Pic2.jpg, Pic3.jpg, Pic4.jpg, pic5.jpg, and prepare two small icon images page_current.png, page_not_current.png.

Place these images in the drawable-hdpi directory (or in the corresponding size drawable directory).

4. Write code for activity

Package Com.example.showviewpager;import Java.util.arraylist;import Android.app.activity;import android.os.Bundle; Import Android.support.v4.view.pageradapter;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.view.menu;import Android.view.MenuItem; Import Android.view.view;import Android.view.viewgroup;import Android.widget.imageview;import Android.widget.imageview.scaletype;import Android.widget.linearlayout;import Android.widget.linearlayout.layoutparams;public class Mainactivity extends Activity {private static final int view_num = 5;private viewpager viewpager;private imageview[] tagimageviews = new Imageview[view_num]; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); Addtagimage (); Initviewpager ();} private void Addtagimage () {linearlayout layout = (linearlayout) Findviewbyid (R.id.tagview); Linearlayout.layoutparams params = new LinearlAyout. Layoutparams (LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);p Arams.setmargins ( 0, 0, 0); for (int i = 0; i < View_num; i++) {ImageView Tagimageview = new ImageView (this); Tagimageview.setlayoutpar AMS (params); Tagimageviews[i] = tagimageview;if (i = = 0) {Tagimageview.setbackgroundresource (r.drawable.page_current) ;} else {tagimageview.setbackgroundresource (r.drawable.page_not_current);} Layout.addview (Tagimageview);}} private void Initviewpager () {Viewpager = (Viewpager) Findviewbyid (R.id.viewpager); Viewpager.setadapter (New MyAdapter ()); Viewpager.setonpagechangelistener (new Onpagechangelistener () {@Overridepublic void onpageselected (int arg0) {for (int i = 0; i < tagimageviews.length; i++) {if (i = = arg0% view_num) {tagimageviews[i].setbackgroundresource (r.drawable.page_current);} else {tagimageviews[i]. Setbackgroundresource (r.drawable.page_not_current);}}} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {} @Overridepublic VoID onpagescrollstatechanged (int arg0) {}}); Viewpager.setcurrentitem (0);} Class Myadapter extends Pageradapter{private arraylist<view> viewlist;public myadapter () {viewlist = new ArrayList <View> (Viewlist.add), Createpagerimageview (R.DRAWABLE.PIC1); Viewlist.add (Createpagerimageview ( R.DRAWABLE.PIC2)); Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC3)); Viewlist.add (Createpagerimageview ( R.DRAWABLE.PIC4)); Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC5));} Private View createpagerimageview (int resid) {layoutparams params = new Layoutparams (layoutparams.match_parent, Layoutparams.match_parent); LinearLayout layout = new LinearLayout (mainactivity.this); Layout.setlayoutparams (params); Layout.setorientation ( linearlayout.vertical); ImageView ImageView = new ImageView (mainactivity.this); Imageview.setlayoutparams (params); Imageview.setscaletype (Scaletype.center_crop); Imageview.setimageresource (Resid); Layout.addview (ImageView); return layout;} @Overridepublic int GetCount () {return integer.max_VALUE;} @Overridepublic boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = arg1;} @Overridepublic Object Instantiateitem (viewgroup container, int position) {((Viewpager) container). AddView ( Viewlist.get (position% view_num), 0); return viewlist.get (position% view_num);} @Overridepublic void Destroyitem (View container, int position, object object) {(Viewpager) container). Removeview ( Viewlist.get (position% view_num));}} @Overridepublic boolean Oncreateoptionsmenu (Menu menu) {getmenuinflater (). Inflate (R.menu.main, menu); return true;} @Overridepublic boolean onoptionsitemselected (MenuItem item) {int id = item.getitemid (); if (id = = r.id.action_settings) { return true;} return super.onoptionsitemselected (item);}}

　　

5. If you need not display the activity's title bar, you can modify the configuration in the activity in manifest, and set the style to:

Android:theme= "@android: Style/theme.black.notitlebar"

<?xml version= "1.0" encoding= "Utf-8"? ><manifest xmlns:android= "http ://schemas.android.com/apk/res/android "package=" Com.example.showviewpager "android:versioncode=" 1 "android:versi Onname= "1.0" > <uses-sdk android:minsdkversion= "+" android:targetsdkversion= "/> <appl" Ication android:allowbackup= "true" android:icon= "@drawable/ic_launcher" android:label= "@string/app_na Me "android:theme=" @style/apptheme "> <activity android:name=". Mainactivity "android:label=" @string/app_name "Android:theme=" @android: Style/theme.black.notitlebar                "> <intent-filter> <action android:name=" Android.intent.action.MAIN "/> <category android:name= "Android.intent.category.LAUNCHER"/> </intent-filter> </ac Tivity> </application></manifest> 

　　

Other configuration files, code, and so on are the default settings created with Eclipse.

Android Learning Note: Using the Viewpager component for picture switching