Almost all of the apps on the market will have a boot page for the first time, either by directing the user or by introducing the product advantage or using it for advertising. Guide page is generally composed of 3-6 graphical interface, good guide page also without losing the beautiful scenery of the app! Today I also say that the design of the Guide page (of course there are n methods), I just put the method code used in our project to make a note.
We implement the principle is very simple, is to use a Viewpager full screen display some pictures, the main code is as follows:
Main Page layout:
<?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" >
<com.huika.pmall.views.myviewpager
Android:id= "@+id/whatsnew_viewpager"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"/>
<!--the next linearlayout is to load the picture to guide the dots--
<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_gravity= "Bottom"
Android:layout_marginbottom= "30DP"
Android:gravity= "Center_horizontal"
android:orientation= "Horizontal"
Android:visibility= "Gone" >
<imageview
Android:id= "@+id/page0"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:scaletype= "Matrix"
android:src= "@drawable/page_now"/>
<imageview
Android:id= "@+id/page1"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:layout_marginleft= "10DP"
Android:scaletype= "Matrix"
android:src= "@drawable/page"/>
<imageview
Android:id= "@+id/page2"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:layout_marginleft= "10DP"
Android:scaletype= "Matrix"
android:src= "@drawable/page"/>
</LinearLayout>
</FrameLayout>
Main Page code:
public class Guideviewact extends Activity implements Onrightendscrolllistener {
Private Myviewpager Mviewpager;
Private ImageView mPage0;
Private ImageView MPage1;
Private ImageView MPage2;
@SuppressWarnings ("unused")
private int currindex = 0;
@Override
public void OnCreate () {
Requestwindowfeature (Window.feature_no_title);
GetWindow (). SetFlags (WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN );
Setcontentview (R.layout.layout_guide_view);
Initviews ();
}
private void Initviews () {
Mviewpager = (Myviewpager) Findviewbyid (R.id.whatsnew_viewpager);
Mviewpager.setrightendscrolllistener (this);
Mviewpager.setonpagechangelistener (New Myonpagechangelistener ());
MPAGE0 = (ImageView) Findviewbyid (R.ID.PAGE0);
MPage1 = (ImageView) Findviewbyid (r.id.page1);
MPage2 = (ImageView) Findviewbyid (r.id.page2);
Pageradapter mpageradapter = new Pageradapter () {
@Override
public boolean isviewfromobject (View arg0, Object arg1) {
return arg0 = = Arg1;
}
@Override
public int GetCount () {
Return 3;//we have only 3 guide pages
}
@Override
public void Destroyitem (View container, int position, object object) {
((Viewpager) container). Removeview ((View) object);
}
@Override
public view Instantiateitem (view container, int position) {
Layoutinflater inflater = Layoutinflater.from (Container.getcontext ());
Use the Getidentifier () loop to get the resource ID
int layoutid = Getresources (). Getidentifier ("View_guide_" + (position + 1), "Layout", Getpackagename ());
View PView = Inflater.inflate (LayoutID, (Viewpager) container, false);
((Viewpager) container). AddView (PView);
return pView;
}
};
Mviewpager.setadapter (Mpageradapter);
}
@Override
public void Widgetclick (View v) {
Super.widgetclick (v);
}
/**
* Last picture Viewpager the start button above
*
* @param v
*/
public void Startbutton (View v) {
System.GC ();
Intent Intent = new Intent ();
Intent.setclass (Guideviewact.this, Mainact.class);
StartActivity (Intent);
This.finish ();
}
@Override
public void Onrightendscrolllistener () {
Startbutton (NULL);
}
public class Myonpagechangelistener implements Onpagechangelistener {
public void onpageselected (int arg0) {
Switch (arg0) {
Case 0:
Mpage0.setimageresource (R.drawable.page_now);
Mpage1.setimageresource (R.drawable.page);
Mpage2.setimageresource (R.drawable.page);
Break
Case 1:
Mpage1.setimageresource (R.drawable.page_now);
Mpage0.setimageresource (R.drawable.page);
Mpage2.setimageresource (R.drawable.page);
Break
Case 2:
Mpage2.setimageresource (R.drawable.page_now);
Mpage0.setimageresource (R.drawable.page);
Mpage1.setimageresource (R.drawable.page);
Break
Case 4:
Mpage4.setimageresource (R.drawable.page_now);
Mpage3.setimageresource (R.drawable.page);
Break
}
Currindex = arg0;
}
@Override
public void onpagescrollstatechanged (int arg0) {
TODO auto-generated Method Stub
}
@Override
public void onpagescrolled (int arg0, float arg1, int arg2) {
TODO auto-generated Method Stub
}
}
}
Found above int layoutid = Getresources (). Getidentifier ("View_guide_" + (position + 1), "Layout", Getpackagename ()); Where did our view_guide_ come from? We want to res/layout the following new layout, for example, there are three guide pages, we need three layouts, respectively named: View_guide_1.xml,view_guide_2.xml,view_guide_3.xml, Put the pictures or information you want to show on each of the three pages.
Finally, paste the custom Viewpager:
public class Myviewpager extends Viewpager {
Private Onrightendscrolllistener Rightendscrolllistener;
private float Pstart;
Private Velocitytracker Mvelocitytracker;
private int touchslop;
private float scrollfriction;
Private Boolean Mcandrag = true;
Public interface Onrightendscrolllistener {
void Onrightendscrolllistener ();
}
Public Myviewpager (Context context) {
Super (context);
Init ();
}
Public Myviewpager (context context, AttributeSet Attrs) {
Super (context, attrs);
Init ();
}
private void init () {
Touchslop = 200;
scrollfriction = 2000;
}
@Override
public boolean onintercepttouchevent (Motionevent arg0) {
if (!mcandrag)
return false;
Boolean flag = false;
try {
Flag = Super.onintercepttouchevent (arg0);
}
catch (Exception e) {
}
return flag;
}
@Override
public boolean ontouchevent (Motionevent event) {
try {
if (getadapter () = null && (Getcurrentitem () + 1) = = Getadapter (). GetCount ())//Last item
{
if (Mvelocitytracker = = null) {
Mvelocitytracker = Velocitytracker.obtain ();
}
Mvelocitytracker.addmovement (event);
int action = Event.getaction () & Motionevent.action_mask;
Switch (action) {
Case Motionevent.action_down:
Pstart = Event.getx ();
Break
Case Motionevent.action_move:
Break
Case Motionevent.action_cancel:
Case MOTIONEVENT.ACTION_UP:
float pEnd = Event.getx ();
Mvelocitytracker.computecurrentvelocity (1000);
float Velocityx = mvelocitytracker.getxvelocity ();
if ((Pstart > PEnd && (pstart-pend) > Touchslop) | | (Velocityx <-scrollfriction)) {//Trigger left slide event
if (Rightendscrolllistener! = null) {
Rightendscrolllistener.onrightendscrolllistener ();
}
}
LOG.V ("Fan", Touchslop + "velocityx=" + Velocityx);
LOG.V ("Fan", Scrollfriction + "(x1-x2) =" + (pstart-pend) + "," + pstart + "=" + "x2=" + pEnd);
Mvelocitytracker.clear ();
Break
Default
Break
}
}
}
catch (Exception e) {
}
Return Super.ontouchevent (event);
}
public void Setrightendscrolllistener (Onrightendscrolllistener rightendscrolllistener) {
This.rightendscrolllistener = Rightendscrolllistener;
}
/**
* Is it possible to slide
*
* @param Candrag
*/
public void Setcandragstate (Boolean Candrag) {
Mcandrag = Candrag;
}
}
Android app Loop gets the resource ID of the guide page