Android Viewpager Wizard page Making method _android

Then on a blog, on a blog to share with you three of the starting page of the scheduled jump, according to the requirements of the project next to say the wizard page! Almost every app has its own wizard page, is generally the first time or when the first time to enter the application of the wizard page, is only a wizard page, the wizard page as the name suggests is to guide customers about the function of the app, to introduce the main content of the app and the use of the way, To give customers a long-awaited feeling, the wizard page to achieve a lot of ways, now I have to do before the project as an example to introduce you to the Viewpager to implement the wizard page!

It's cool to give you a look at the effect chart now.

First , to determine whether the start page to jump to the wizard page (if it is the initial access to the app, the start page to jump to think of the page; if it is not the first time you enter the app, the start page jumps to the main page. This is the logical idea that the wizard page appears only once.

Determines whether to enter the wizard interface or the main interface 
        if (Sptools.getboolean (Getapplicationcontext (), Myconstants.issetup, False)) { 
          //true, Set, directly into the main interface 
          // 
          Intent main = new Intent (splashactivity.this,mainactivity.class); 
          StartActivity (main);//main interface 
        } else { 
          //false, not set, go to the Setup Wizard interface 
 
          Intent Intent = new Intent (Splashactivity.this, Guideactivity.class); 
          StartActivity (intent);//Wizard Interface 
        } 

Second, the implementation of the wizard page Guideactivity.class, implemented with Viewpager. (the default first access to the app, or the start page will not jump to the wizard page) if you are unfamiliar with Viewpager, you can also check the Android API help documentation, address: http://android-doc.com/ Reference/android/support/v4/view/viewpager.html

Import android.app.Activity; 
Import android.content.Intent; 
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.View; 
Import Android.view.View.OnClickListener; 
Import Android.view.ViewGroup; 
Import Android.view.ViewTreeObserver.OnGlobalLayoutListener; 
Import Android.view.Window; 
Import Android.view.WindowManager; 
Import Android.widget.Button; 
Import Android.widget.ImageView; 
Import Android.widget.LinearLayout; 
Import Android.widget.LinearLayout.LayoutParams; 
 
Import Android.widget.RelativeLayout; 
Import Com.zsml.fashiongou.sputils.DensityUtil; 
Import com.zsml.fashiongou.sputils.MyConstants; 
 
Import Com.zsml.fashiongou.sputils.SpTools; 
Import java.util.ArrayList; 
 
 
Import java.util.List; 
  public class Guideactivity extends activity {private Viewpager vp_guids; 
  Private LinearLayout ll_points; Private View V_reDpoint; 
  Private Button Bt_startexp; 
  Private list<imageview> GUIDs; 
  Private Myadapter adapter; private int dispoints;//@Override protected void onCreate (Bundle savedinstancestate) {super.oncreate (save 
    Dinstancestate); Requestwindowfeature (Window.feature_no_title)//Remove title //full Screen GetWindow (). SetFlags (Windowmanager.layout 
 
    Params.flag_fullscreen, WindowManager.LayoutParams.FLAG_FULLSCREEN); 
    Initview ()///Initialize Interface InitData ()//Initialize Data initevent ()//Initialize component event} private void Initevent () {// 
      V_redpoint.getviewtreeobserver (). Addongloballayoutlistener (New Ongloballayoutlistener () {@Override 
        public void Ongloballayout () {//V_redpoint.getviewtreeobserver (). Removeglobalonlayoutlistener (this); 
      Dispoints = (Ll_points.getchildat (1). GetLeft ()-ll_points.getchildat (0). GetLeft ()); 
 
    } 
    }); Add a click event to the Start Experience button Bt_startExp.setonclicklistener (New Onclicklistener () {@Override public void OnClick (View v) {//Save settings status Sptools.setboolean (Getapplicationcontext (), Myconstants.issetup, true);//Save Settings Completed status//Enter the main interface inte 
        NT main = new Intent (guideactivity.this,mainactivity.class); 
      StartActivity (main);/start the main interface//close yourself finish (); 
 
    } 
    }); Vp_guids.setonpagechangelistener (New Onpagechangelistener () {@Override public void Onpageselect Ed (int position) {//Current Viewpager Display page number//if Viewpager slide to third page number (last page), display button if (position = = GUIDs 
          . Size ()-1) {bt_startexp.setvisibility (view.visible);//Set button display} else {//Hide this button 
        Bt_startexp.setvisibility (View.gone); 
                    @Override public void onpagescrolled (int position, float positionoffset, 
     int positionoffsetpixels) {////   float LeftMargin = dispoints * (position + positionoffset); 
        Relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) v_redpoint.getlayoutparams (); 
      Layoutparams.leftmargin = Math.Round (leftMargin);///V_redpoint.setlayoutparams (Layoutparams); 
  @Override public void onpagescrollstatechanged (int state) {}}); } private void InitData () {//Viewpaper Adapter Adapter list container//Picture data (array) int[] pics = new int[] {R.MI 
 
    Pmap.img_guide_1, r.mipmap.img_guide_2, r.mipmap.img_guide_3}; 
 
    Defines the container used by the Viewpager guids = new arraylist<imageview> (); Create Viewpager adapter for (int i = 0; i < pics.length i++) {ImageView iv_temp = new ImageView (getapplicationc 
      Ontext ()); 
 
      Iv_temp.setbackgroundresource (Pics[i]); 
 
      Add the interface Data Guids.add (IV_TEMP); 
View V_point = new View (Getapplicationcontext ());     // V_point.setbackgroundresource (r.drawable.gray_point);//red dot background color int dip = 10; Layoutparams params = new Layoutparams (densityutil.dip2px (Getapplicationcontext (), dip), densityutil.dip2px (GetA Pplicationcontext (), dip);/dp///if (I!= 0)//params.leftmargin = 47;//V_po 
    Int.setlayoutparams (params);///Ll_points.addview (V_point); 
 
    /////Create Viewpager Adapter adapter = new Myadapter (); 
 
  Set adapter Vp_guids.setadapter (adapter); 
 
      //viewpager adapter Private Class Myadapter extends Pageradapter {@Override public int getcount () { return guids.size ()//Returns the number of data} @Override public boolean isviewfromobject (View arg0, Object Arg 1 {return arg0 = = arg1;//Filter and cache effect} @Override public void Destroyitem (ViewGroup container, int Position, object) {Container.removeview (View object);//Remove from Viewpager
    @Override public Object Instantiateitem (viewgroup container, int position) {//Container VIEWPA 
      Per//Get view View child = Guids.get (position); 
 
      Add View Container.addview (child); 
    return to child; 
 
    }} private void Initview () {Setcontentview (r.layout.activity_guide); 
 
    ViewPage Component Vp_guids = (Viewpager) Findviewbyid (r.id.vp_guide_pages); 
 
    Dynamic add-in container ll_points = (linearlayout) Findviewbyid (r.id.ll_guide_points); 
 
    Point v_redpoint = Findviewbyid (r.id.v_guide_redpoint); 
  Determine the start experience button Bt_startexp = (button) Findviewbyid (R.ID.BT_GUIDE_STARTEXP); 
 } 
}

Note, about whether it is the first entry, the implementation of a relatively simple, using the use of sharedpreferences to save the use of the state, he encapsulated into the tool class for ease of use! Here, I'll just post the 3 tools that sharedpreferences encapsulates.

(i),

Import Android.content.Context; 
 
/** 
 * Created by the Administrator on 2016/11/1 0001. 
 * * Public 
 
class Densityutil {public 
 
  static int dip2px (context, float Dpvalue) { 
    final float scale = C Ontext.getresources (). Getdisplaymetrics (). density; 
    return (int) (Dpvalue * scale + 0.5f); 
  } 
 
  /** 
   * 
   * 
  /public static int Px2dip (context, float Pxvalue) { 
    final float scale = Context.getre Sources (). Getdisplaymetrics (). density; 
    return (int) (Pxvalue/scale + 0.5f); 
  } 
} 

(b),

/** 
 * Created by the Administrator on 2016/11/1 0001. 
 * * Public 
 
interface myconstants 
{ 
  string configfile = "Cachevalue";//sp's filename 
  string issetup = "Issetup" ;//Whether to set the wizard interface set data 
} 

(iii),

Import Android.content.Context; 
Import android.content.SharedPreferences; 
 
/** 
 * Created by the Administrator on 2016/11/1 0001. 
 * 
 
/public class Sptools {public 
 
  static void SetBoolean (context context, String key, Boolean value) { 
    Share Dpreferences sp = context.getsharedpreferences (Myconstants.configfile, context.mode_private); 
    Sp.edit (). Putboolean (key, value). Commit ()//Commit Save key value pair 
 
  } public 
 
 
  static Boolean Getboolean String Key,boolean defvalue) { 
    Sharedpreferences sp = context.getsharedpreferences (Myconstants.configfile, Context.mode_private); 
    Return Sp.getboolean (key, defvalue); 
  } 
 

Three, the implementation of XML layout

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "> &LT;ANDROID.SUPPORT.V4.V Iew. Viewpager android:id= "@+id/vp_guide_pages" android:layout_width= "match_parent" match _parent "> </android.support.v4.view.ViewPager> <relativelayout android:layout_width=" Wrap_conten T "android:layout_height=" Wrap_content "android:layout_alignparentbottom=" true "Android:layout_centerhorizo  
      Ntal= "true" android:layout_marginbottom= "30dip" > <linearlayout android:id= "@+id/ll_guide_points" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "Horizo" Ntal "> </LinearLayout> <view android:id=" @+id/v_guide_redpoint "Android:layout_widt H= "10dip" android:layout_height= "10dip" android:layout_marginbottom= "0.7DP" android:background= "@drawable/red_point"/> & lt;/relativelayout> <button android:id= "@+id/bt_guide_startexp" android:background= "@drawable/btn_sel Ector "android:layout_alignparentbottom=" true "android:layout_centerhorizontal=" true "Android:layout_margin Bottom= "45dip" android:paddingtop= "5dip" android:paddingbottom= "5dip" android:paddingleft= "10dip" Andr oid:paddingright= "10dip" android:textcolor= "@color/btn_colors" android:layout_width= "Wrap_content" Android: 
 
layout_height= "Wrap_content" android:text= "Start Experiencing" android:visibility= "Gone" android:textsize= "18sp"/> 

 </RelativeLayout>

Note, setting for the state of the Dot, button buttons, and so on UI effects

(a), draw their own dots, the definition of color
outside the Great circle Big_point.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android "  
  android:shape=" Oval > 
 
  <corners android:radius= "5dip" ></corners> 
   
  <solid Android:color= "#ffffff" ></solid> 
</shape> 

Inside the dot Small_point.xml

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android " 
  android:shape=" Oval "> 
 
  <corners android:radius=" 5dip "></corners> 
   
  < Solid android:color= "#fff" ></solid> 
</shape> 

(b), Button color, and status selection
Background State selector Btn_selector.xml

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= 
"http://schemas.android.com/apk/res/" Android > 
 
  <!--button pressed status--> 
  <item android:drawable= "@drawable/button_red_pressed" android:state _pressed= "true" ></item> 
  <!--button Released status--> 
  <item android:drawable= "@drawable/button_red_ Normal "android:state_pressed= false" ></item> 
 
</selector> 

Text Color Picker Btn_colors.xml

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= 
"http://schemas.android.com/apk/res/" Android > 
   <!--button pressed status black--> 
  <item android:color= "#000000" android:state_pressed= "true" > </item> 
  <!--button loosened status white--> 
  <item android:color= "#ffffff" ></item> 
   

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.