Using Viewpager to implement steps for Android software using the wizard features _android

First need a layout file, is composed of Flamelayout, which contains a viewpager and a relativelayout,relativelayout inside is a linearlayout, LinearLayout inside is ready to put ImageView, dynamically added.

The layout files are as follows:

Copy Code code 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/guidepages"
Android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:layout_gravity= "Center"/>

<relativelayout
Android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:layout_gravity= "Bottom" >
<linearlayout
Android:id= "@+id/viewgroup"
Android:layout_alignparentbottom= "true"
Android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:orientation= "Horizontal"
android:gravity= "Center"
android:layout_marginbottom= "30dip" >

</LinearLayout>
</RelativeLayout>
</FrameLayout>

In addition, we need 4 layout files, is the wizard to display the picture, each layout file is a page, each layout file inside is a imageview. As shown below:

Layout file One:

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >

<imageview
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:src= "@drawable/feature_guide_0"/> "

</LinearLayout>

Layout file Two:

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >

<imageview
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:src= "@drawable/feature_guide_1"/>

</LinearLayout>

Layout file Three:

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >

<imageview
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:src= "@drawable/feature_guide_2"/> "

</LinearLayout>

Layout file Four:

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >

<imageview
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:src= "@drawable/feature_guide_3"/> "

</LinearLayout>

Then load the 4 layout files and the main layout files inside the code:

Activity code:

Copy Code code as follows:

Package Com.alex.helloworld;

Import java.util.ArrayList;

Import android.app.Activity;
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 Android.view.ViewGroup.LayoutParams;
Import Android.view.Window;
Import Android.widget.FrameLayout;
Import Android.widget.ImageView;
Import Android.widget.LinearLayout;

public class HelloWord2 extends activity implements Onpagechangelistener {

Private arraylist<view> mpageviews;
Private Layoutinflater Minflater;
Private LinearLayout mgroups;
Private Framelayout Mmain;
Private Viewpager Mviewpager;
Private imageview[] mimageviews;

@Override
protected void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Requestwindowfeature (Window.feature_no_title);
Minflater = Layoutinflater.from (this);
Mpageviews = new arraylist<view> ();
Mpageviews.add (minflater.inflate (r.layout.item_0, null));
Mpageviews.add (minflater.inflate (r.layout.item_1, null));
Mpageviews.add (minflater.inflate (r.layout.item_2, null));
Mpageviews.add (minflater.inflate (r.layout.item_3, null));

Mmain = (framelayout) minflater.inflate (R.layout.hello2, NULL);
Mgroups = (linearlayout) Mmain.findviewbyid (R.id.viewgroup);
Mviewpager = (Viewpager) Mmain.findviewbyid (r.id.guidepages);
Mimageviews = new Imageview[mpageviews.size ()];

for (int i=0; i<mpageviews.size (); i++) {
ImageView IV = new ImageView (this);
Iv.setlayoutparams (New Layoutparams (20, 20));
Mimageviews[i] = IV;
if (i = = 0) {
Mimageviews[i].setbackgroundresource (r.drawable.page_indicator_focused);
} else {
Mimageviews[i].setbackgroundresource (R.drawable.page_indicator);
}
Mgroups.addview (Mimageviews[i]);
}
Mviewpager.setadapter (Mpageadapter);
Mviewpager.setonpagechangelistener (this);
Setcontentview (Mmain);
}

Private Pageradapter Mpageadapter = new Pageradapter () {

@Override
public void Startupdate (View arg0) {

}

@Override
Public parcelable SaveState () {
return null;
}

@Override
public void Restorestate (parcelable arg0, ClassLoader arg1) {

}

@Override
public boolean isviewfromobject (View arg0, Object arg1) {
return arg0 = = Arg1;
}

@Override
Public Object Instantiateitem (View arg0, int arg1) {
((Viewpager) arg0). AddView (Mpageviews.get (arg1));
Return Mpageviews.get (ARG1);
}

@Override
public int GetCount () {
return Mpageviews.size ();
}

@Override
public void Finishupdate (View arg0) {

}

@Override
public void Destroyitem (View arg0, int arg1, Object arg2) {
((Viewpager) arg0). Removeview (Mpageviews.get (arg1));
}
};

@Override
public void onpagescrolled (int position, float positionoffset,
int positionoffsetpixels) {

}

@Override
public void onpageselected (int position) {
for (int i=0; i<mpageviews.size (); i++) {
Mimageviews[position].setbackgroundresource (r.drawable.page_indicator_focused);
if (position!= i) {
Mimageviews[i].setbackgroundresource (R.drawable.page_indicator);
}
}
}

@Override
public void onpagescrollstatechanged (int state) {

}
}

First, load 4 layouts and master layout files to display from the Layoutinflater.

Then put the layout file as view into a ArrayList.

Then find Viewpager and Linearlayout,viewpager from the main layout to load 4 layout files, linearlayout to load 4 hint icons.

Then create a new 4 ImageView, set the corresponding background, and add it to the LinearLayout as a view.

Then set the adapter for Viewpager and set the Onpagechangelistener.

Adapter inside to set GetCount, is the number of pages, we are here 4, set 4;

At the same time in the Instantiateitem inside the corresponding page add in, and return the corresponding page.

The page is removed when Destroyitem.

In the selection of the page method inside onpageselected Set the background of the selected icon.