first, the realization of
Every time you look at someone else's code, you need to look at the implementation of the results to achieve a kind of effect, is not similar to the effect you want to achieve. There is a picture of the truth, at the same time, the bottom of the source code , almost every line of the source code has a stare, write easy to understand. Very clear.
Second, pre-coding preparation work
Viewpager is a new feature provided after Android3.0, so it is necessary to android-support-v4.jar the support of this package if you want to keep your application backwards compatible. This is an add-on package from Google.
Three, the project structure chart
D. Detailed coding implementation
1, the 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 * Functional 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); }/** * Inferred whether the interface was 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 * Description of Function: 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 the number of 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 child element points[i] = (Imagevi EW) 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 tag, easy to remove with the current position corresponding 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. There is no complex animation effect.
Source code Download
"Android UI design and development" using Viewpager to implement the Welcome Guide page