"Android UI design and development" using Viewpager to implement the Welcome Guide page

first, the realization of

Every time you look at someone else's code, you must first look at the realization of the achievement of a kind of effect, is not similar to the effect of their own want to achieve, there is a picture of the truth, at the same time, the bottom of the source , almost every line of the source has comments, write easy to understand , very clear.

Second, pre-coding preparation work

Viewpager is a new feature provided after Android3.0, so to keep your application backwards compatible you must android-support-v4.jar support for this package, which is an add-on package from Google.

Three, the project structure chart

Iv.. Specific coding implementation

1, layout interface is relatively simple, adding viewpager components, as well as the bottom of the boot dot, activity_main.xml:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" wrap_content "android:layout_height=" wrap_content "> <andr Oid.support.v4.view.ViewPager android:id= "@+id/viewpager" android:layout_width= "Fill_parent" Android: layout_height= "Fill_parent"/> <linearlayout android:id= "@+id/ll" android:layout_width= "Wrap_conte NT "android:layout_height=" Wrap_content "android:layout_alignparentbottom=" true "Android:layout_cente         Rhorizontal= "true" android:layout_marginbottom= "24.0dip" android:orientation= "Horizontal" >            <imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content"            Android:layout_gravity= "Center_vertical" android:clickable= "true" android:padding= "15.0dip"        android:src= "@drawable/point"/> <imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" a            Ndroid:layout_gravity= "Center_vertical" android:clickable= "true" android:padding= "15.0dip" android:src= "@drawable/point"/> <imageview android:layout_width= "Wrap_content" Andro            id:layout_height= "Wrap_content" android:layout_gravity= "center_vertical" android:clickable= "true" android:padding= "15.0dip" android:src= "@drawable/point"/> <imageview android: Layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Center_vert ical "android:clickable=" true "android:padding=" 15.0dip "android:src=" @drawable/point "/&G    T </LinearLayout></RelativeLayout>

2, the small point of the picture with a selector to control the color,Point.xml:

<?xml version= "1.0" encoding= "UTF-8"? ><selector  xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:state_enabled=" true "android:drawable=" @drawable/point_normal "/>    < Item android:state_enabled= "false" android:drawable= "@drawable/point_select"/></selector>

3, Viewpager adapter code,Viewpageradapter.java:

Package Com.ting;import Java.util.arraylist;import Android.support.v4.view.pageradapter;import Android.support.v4.view.viewpager;import android.view.view;/** * @author Yangyu * Function Description: Viewpager adapter for binding data and view */        public class Viewpageradapter extends Pageradapter {//Interface list private arraylist<view> views;    Public Viewpageradapter (arraylist<view> views) {this.views = views;         }/** * Gets the current interface number */@Overridepublic int GetCount () {if (view! = null) {return views.size (); } return 0;} /** * Initialize the interface of the position location */@Override public Object instantiateitem (view view, int position) {(Viewpag               ER) view). AddView (Views.get (position), 0);    return Views.get (position); }/** * Determines whether the interface is generated by the object */@Overridepublic Boolean isviewfromobject (View view, Object arg1) {return (view = = Arg1);} /** * Destroy the interface of position location */@Override public void Destroyitem (view view, int position, Object arg2) {(viewpage R) VieW). Removeview (Views.get (position)); }}

4, the main program entry class,Mainactivity.java:

Package Com.ting;import Java.util.arraylist;import Android.app.activity;import android.os.bundle;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.imageview;import Android.widget.linearlayout;import com.example.myguideview01.r;/** * @author Yangyu * Function Description: Main program Entry class */public classes Mainactivity extends Activity implements Onclicklistener,onpagechangelistener {//define Viewpager object Private Viewpager viewpager;//define Viewpager Adapter Private Viewpageradapter vpadapter;//define a ArrayList to store viewprivate arraylist<view> views;//boot Image resource private static final int[] Pics = {R.DRAWABLE.GUIDE1,R.DRAWABLE.GUIDE2,R.DRAWABLE.GUIDE3,        R.DRAWABLE.GUIDE4};        The bottom dot picture private imageview[] points;    Record the currently selected location private int currentindex; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); Initview (); InitData ();} /** * Initialize component */private void Initview () {//Instantiate ArrayList object views = new arraylist<view> ();//Instantiate Viewpagerviewpager = ( Viewpager) Findviewbyid (R.id.viewpager);//Instantiate Viewpager Adapter Vpadapter = new Viewpageradapter (views);} /** * Initialize data */private void InitData () {//define a layout and set parameters linearlayout.layoutparams Mparams = new Linearlayout.layoutparams (               LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);            Initializes a list of boot images for (int i=0; i<pics.length; i++) {ImageView IV = new ImageView (this);            Iv.setlayoutparams (Mparams);            Iv.setimageresource (Pics[i]);        Views.add (iv);        }//Set data Viewpager.setadapter (Vpadapter);                Set the monitoring Viewpager.setonpagechangelistener (this); Initialize the bottom dot Initpoint ();}               /** * Initialize the bottom dot */private void Initpoint () {LinearLayout linearlayout = (linearlayout) Findviewbyid (R.ID.LL); points = new ImageView[Pics.length]; Loop gets the dot picture for (int i = 0; i < pics.length; i++) {//Get a linearlayout below each sub-element points[i] = (Imagev        Iew) Linearlayout.getchildat (i);        The default is set to Gray points[i].setenabled (true);        Set the monitor Points[i].setonclicklistener (this) for each dot;        Set the position of the tag, convenient to remove the current position corresponding to Points[i].settag (i);        }//Set the face default location currentindex = 0; Set to White, which is the selected state points[currentindex].setenabled (false);} /** * When the sliding state changes */@Overridepublic void onpagescrollstatechanged (int arg0) {}/** * Called when the current page is sliding */@Overridepublic void Onpa gescrolled (int arg0, float arg1, int arg2) {}/** * Called when new page is selected */@Overridepublic void onpageselected (int position) {//Set Bottom Small point Check State setcurdot (position);}         /** * Toggle the current page by clicking the event */@Overridepublic void OnClick (View v) {int position = (Integer) v.gettag ();         Setcurview (position); Setcurdot (position);} /** * Sets the position of the current page */private void Setcurview (int position) {if (Position < 0 | | Position >= pics.length) {return;     } viewpager.setcurrentitem (position); }/** * Sets the position of the current dot */private void Setcurdot (int positon) {if (Positon < 0 | | positon > Pics. length-1 | |         Currentindex = = Positon) {return;         } points[positon].setenabled (FALSE);         Points[currentindex].setenabled (TRUE);     Currentindex = Positon; }}

The above is just a simple implementation, without complex animation effects.

SOURCE download