Android UI development Article 20th-sliding around like launcher (using viewpager to implement the welcome guide page)

Android provides another useful control, viewpager. Using this control, you need to use a package mentioned by Google-android-support-v4.jar, this package contains some very useful classes, which is the viewpager class to achieve switching between pages, for more information about android-support-v4.jar, visit the Official Google Website: http://developer.android.com/sdk/compatibility-library.html. The specific Android provided by the android-support-v4.jar import project, and add build path method here is not introduced, you can refer to the above provided URL, there will be a detailed description, the steps are relatively simple. The following two examples illustrate how to implement a complex sliding interface.

I. demo1

 
Demo1 running effect 1 demo1 running effect 2

The effect of demo1 is that we often see it when browsing news pages. The upper part of the screen is an image and the lower part is a text introduction, the top is a navigation toolbar for users to choose to exit or return to the main menu. By sliding the screen between the left and right, you can flip pages. At the bottom of the screen, there will be an indicator mark for the current page.
The content of Main. XML in the main layout file is as follows:
XML code:

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <include            android:id="@+id/item_header"            layout="@layout/item_header" />        <android.support.v4.view.ViewPager            android:id="@+id/myviewpager"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />    </LinearLayout>    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical" >        <RelativeLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <LinearLayout                android:id="@+id/mybottomviewgroup"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_marginBottom="40dp"                android:gravity="center_horizontal"                android:orientation="horizontal" >            </LinearLayout>        </RelativeLayout>    </LinearLayout></FrameLayout>

The outermost layer is linearlayout, which includes two linearlayout. The first linearlayout is the main interface for displaying News, and the second linearlayout is used to store the marked image indicating the current interface at the bottom. It is worth noting that the first linearlayout includes two parts: the item_header view introduced through include and the viewpager control. Pay attention to the layout of viewpager space here. The Code is as follows:

XML code:

<LinearLayout    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="vertical" >    <include        android:id="@+id/item_header"        layout="@layout/item_header" />    <android.support.v4.view.ViewPager        android:id="@+id/myviewpager"        android:layout_width="fill_parent"        android:layout_height="wrap_content" /></LinearLayout>

In addition, the layout folder defines the six layout files item01 -- item06 as the six pages of viewpager. in Java code, they are added to viewpager respectively. The item_header.xml layout defines the navigation bar at the top of the screen, and introduces the main. xml layout file through the include method.
Java code:

Package COM. devdiv. test. ui_test_viewpager; import Java. util. arraylist; import android. app. activity; import android. content. context; import android. OS. bundle; import android. OS. parcelable; import android. support. v4.view. pageradapter; import android. support. v4.view. viewpager; import android. support. v4.view. viewpager. onpagechangelistener; import android. view. layoutinflater; import android. view. view; import Andro Id. view. viewgroup; import android. view. viewgroup. layoutparams; import android. view. window; import android. widget. imageview; public class extends activity {private viewpager mviewpager; private arraylist <View> mpageviews; private imageview mimageview; private imageview [] mimageviews; // The main layout of the application is linearlayoutprivate viewgroup mainviewgroup; // The dot view on the current page is indicated at the bottom of the main layout. Wgroup indicatorviewgroup; // defines layoutinflaterlayoutinflater minflater; @ overridepublic void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); // setcontentview (R. layout. main); // set the window without the title requestwindowfeature (window. feature_no_title); // minflater = (layoutinflater) // getsystemservice (context. layout_inflater_service); minflater = getlayoutinflater (); mpageviews = new arraylist <View> (); Mpageviews. add (minflater. inflate (R. layout. item01, null); mpageviews. add (minflater. inflate (R. layout. item02, null); mpageviews. add (minflater. inflate (R. layout. item03, null); mpageviews. add (minflater. inflate (R. layout. item04, null); mpageviews. add (minflater. inflate (R. layout. item05, null); mpageviews. add (minflater. inflate (R. layout. item06, null); mimageviews = new imageview [mpageviews. size ()]; mainview Group = (viewgroup) minflater. inflate (R. layout. main, null); mviewpager = (viewpager) mainviewgroup. findviewbyid (R. id. myviewpager); indicatorviewgroup = (viewgroup) mainviewgroup. findviewbyid (R. id. mybottomviewgroup); For (INT I = 0; I <mimageviews. length; I ++) {mimageview = new imageview (ui_test_viewpageractivity.this); mimageview. setlayoutparams (New layoutparams (20, 20); mimageview. setpadding (20, 0, 20, 0); if (I = 0) {mimageview. setbackgroundresource (R. drawable. page_indicator_focused);} else {mimageview. setbackgroundresource (R. drawable. page_indicator);} mimageviews [I] = mimageview; // Add the hidden image to the indicatorviewgroup in the bottom view. addview (mimageviews [I]);} // note the difference between the two usage methods. The former cannot be displayed normally !! // Setcontentview (R. layout. main); setcontentview (mainviewgroup); mviewpager. setadapter (New mypageradapter (); mviewpager. setonpagechangelistener (New onpagechangelistener () {@ overridepublic void onpageselected (INT arg0) {for (INT I = 0; I <mimageviews. length; I ++) {if (I = arg0) {mimageviews [I]. setbackgroundresource (R. drawable. page_indicator_focused);} else {mimageviews [I]. setbackgroundresource (R. drawable. page_indicator) ;}}@ overridepublic void onpagescrolled (INT arg0, float arg1, int arg2) {}@ overridepublic void onpagescrollstatechanged (INT arg0 ){}});} class mypageradapter extends pageradapter {@ overridepublic int getcount () {return mpageviews. size () ;}@ overridepublic Boolean isviewfromobject (view arg0, object arg1) {return arg0 = arg1 ;}@ overridepublic int getitemposition (Object object) {return Super. getitemposition (object) ;}@ overridepublic void destroyitem (view arg0, int arg1, object arg2) {(viewpager) arg0 ). removeview (mpageviews. get (arg1) ;}@ overridepublic object instantiateitem (view arg0, int arg1) {(viewpager) arg0 ). addview (mpageviews. get (arg1); Return mpageviews. get (arg1) ;}@ overridepublic void restorestate (parcelable arg0, classloader arg1) {}@ overridepublic parcelable savestate () {return NULL ;}@ overridepublic void startupdate (view arg0) {}@ overridepublic void finishupdate (view arg0 ){}}}

Note that the custom mypageradapter inherits the self-pageradapter and some important methods need to be rewritten. It is easy to understand the implementation of baseadapter. For specific implementation, refer to the API documentation.

Java code:

Mimageviews = new imageview [mpageviews. size ()]; mainviewgroup = (viewgroup) minflater. inflate (R. layout. main, null); mviewpager = (viewpager) mainviewgroup. findviewbyid (R. id. myviewpager); indicatorviewgroup = (viewgroup) mainviewgroup. findviewbyid (R. id. mybottomviewgroup); For (INT I = 0; I <mimageviews. length; I ++) {mimageview = new imageview (ui_test_viewpageractivity.this); mimageview. setlayoutparams (New layoutparams (20, 20); mimageview. setpadding (20, 0, 20, 0); if (I = 0) {mimageview. setbackgroundresource (R. drawable. page_indicator_focused);} else {mimageview. setbackgroundresource (R. drawable. page_indicator);} mimageviews [I] = mimageview; // Add the hidden image to the indicatorviewgroup in the bottom view. addview (mimageviews [I]);}

Initialize imageviews based on the size of mpageviews. That is to say, if there are several pages in viewpager, initialize the images with several dots for corresponding instructions. In addition, the status of the dot is set based on the location. The first page is displayed when an accident occurs. Therefore, the picture of the first dot is in the focused state. Finally, add all the dots to the layout through indicatorviewgroup. addview (mimageviews [I]) and display them on the screen.
After the dot image at the bottom is initialized and added to the layout, you need to set the adapter for viewpager. Here we use the custom mypageradapter and then execute the setcontentview operation.
Finally, to indicate the dot view at the bottom, you need to set a listener for viewpager to change the state of the dot view at the bottom according to the different states of viewpager. The Code is as follows:

Java code:

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {      @Override   public void onPageSelected(int arg0) {    // TODO Auto-generated method stub    for (int i = 0; i < mImageViews.length; i++) {     if(i == arg0) {     mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);     } else {     mImageViews[i].setBackgroundResource(R.drawable.page_indicator);     }    }   }      @Override   public void onPageScrolled(int arg0, float arg1, int arg2) {   }      @Override   public void onPageScrollStateChanged(int arg0) {   }});

Ii. demo2 demo2 achieves sliding between the left and right, but we use different la s on different pages, which is also common in practical applications. We also use the viewpager control. The method is basically the same as demo1. The difference is that the gridview view in listview is used on the two pages respectively, and different adapters are bound to them in the code. Listview uses a simple arrayadapter to display a group of data. The gridview uses a custom adapter. Since demo2 and demo1 are very similar in content, we will not start the analysis. The Running Effect of demo2 is as follows:

The second view in the first view Sliding Process