Android Applet-walker registration page (iv)

Target effect:

Program run appears diagram a walker's welcome interface, from fuzzy to clear, after a few seconds to automatically jump to the navigation interface of Figure II, there is a small dot below the number of pages, the fourth navigation page has a Go button, click to jump to the login screen.

Project Compression Pack: Http://pan.baidu.com/s/1c2t11Kk

1. First create a new two Android page, generate Welcomeactivity.java page and corresponding XML layout, Giudeactivity.java page and corresponding XML layout.

2.activity_welcome.xml page to add a background map.

Activity_welcome.xml page:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "    android:id= "@+id/layoutwelcome"    android:background= "@drawable/welcome_bg"    tools:context= ". Welcomeactivity "></RelativeLayout>

3. New View1_of_pager.xml page, view2_of_pager.xml page, View3_of_pager.xml page, view4_of_ Pager.xml page, where the first three pages except the background picture are the same, the fourth page more than a text for go textview. View1_of_pager.xml page:

<?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: background= "@drawable/guide_1"    android:orientation= "vertical" ></LinearLayout>

View4_of_pager.xml page:

<?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 "    android: background= "@drawable/guide_4"    android:orientation= "vertical" >    <textview android:id=        "@+id/ Tvgo "        android:layout_width=" wrap_content "        android:layout_height=" wrap_content "        android:layout_ Alignparentbottom= "true"        android:layout_alignparentright= "true"        android:layout_marginbottom= "16DP"        android:layout_marginright= "19DP"        android:background= "@drawable/start_select"        android:gravity= "Center"        android:textcolor= "#ffffff"        android:textsize= "30sp"        android:text= "Go"/></ Relativelayout>

4. New Start_select.xml page, as Go's click style processing page, Start_before.xml page for the pre-click Style page, Start_after.xml page for the post-click Style page. Start_select.xml page:

<?xml version= "1.0" encoding= "Utf-8"?><!--go click to select--><selector xmlns:android= "/http/ Schemas.android.com/apk/res/android ">    <item android:drawable=" @drawable/start_before "        android: State_pressed= "false"/><!--not pressed--    <item android:drawable= "@drawable/start_after"        android: State_pressed= "true"/><!--press--></selector>

Start_before.xml page:

<?xml version= "1.0" encoding= "Utf-8"?><!--go Click previous style--><shape xmlns:android= "/http/ Schemas.android.com/apk/res/android "    android:shape=" Oval ">    <solid android:color=" #2362a7 "/> <size android:height= "80DP"    android:width= "80DP"/></shape>

Start_after.xml page:

<?xml version= "1.0" encoding= "Utf-8"?><!--go click after style--><shape xmlns:android= "http/ Schemas.android.com/apk/res/android "    android:shape=" Oval ">    <solid android:color=" #333333 "/> <size android:height= "80DP"    android:width= "80DP"/></shape>

5. Because the small dots below the navigation page will change the style according to the page, the new Bg_point_select.xml page selects the style page for the small dot, and the Bg_point.xml page is not a style page for the small dots. Bg_point_select.xml page:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Oval" >    <solid android:color= "#427ab7"/><size     android:height= "8DP    " Android:width= "8DP"/></shape>

Bg_point.xml page:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Oval" >    <solid android:color= "@android: Color/black"/><size     android: height= "8DP"    android:width= "8DP"/></shape>

The 6.activity_giude.xml page places the navigation background and the bottom four dots. Activity_giude.xml page:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Tools:context =". Giudeactivity "> <android.support.v4.view.viewpager android:id=" @+id/vpguide "android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentleft= "true" Android:lay Out_alignparenttop= "true" > </android.support.v4.view.ViewPager> <linearlayout android:layout_wid Th= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Androi D:layout_centerhorizontal= "true" android:layout_marginbottom= "40DP" > <imageview android:id            = "@+id/ivguide_dot1" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:background= "@drawable/bg_poinT_selected "/> <imageview android:id=" @+id/ivguide_dot2 "android:layout_width=" Wrap_con Tent "android:layout_height=" Wrap_content "android:background=" @drawable/bg_point "/> < ImageView android:id= "@+id/ivguide_dot3" android:layout_width= "Wrap_content" Android:layo ut_height= "Wrap_content" android:background= "@drawable/bg_point"/> <imageview android:            Id= "@+id/ivguide_dot4" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:background= "@drawable/bg_point"/> </LinearLayout></RelativeLayout>

7. Create a new Guideadapter.java page as an adapter to handle page flipping. Guideadapter.java page:

Package Com.example.login;import Java.util.list;import Android.support.v4.view.pageradapter;import Android.view.view;import Android.view.viewgroup;public class Guideadapter extends Pageradapter {private List<View > Views;public guideadapter (list<view> views) {this.views=views;} @Overridepublic int GetCount () {return views.size ();} @Overridepublic Boolean isviewfromobject (View view, Object object) {return view==object;} @Overridepublic Object Instantiateitem (viewgroup container, int position) {Container.addview (Views.get (position)); return Views.get (position);} @Overridepublic void Destroyitem (ViewGroup container, int position, object object) {View view=views.get (position); Container.removeview (view);}}

8.welcomeactivity.java page handles the animation effect of the Welcome interface. Welcomeactivity.java page:

Package Com.example.login;import Android.os.bundle;import Android.app.activity;import android.content.Intent; Import Android.view.menu;import Android.view.animation.alphaanimation;import android.view.animation.Animation; Import Android.view.animation.animation.animationlistener;import Android.widget.relativelayout;public class Welcomeactivity extends Activity {@Overrideprotected void onCreate (Bundle savedinstancestate) {super.oncreate ( Savedinstancestate); Setcontentview (R.layout.activity_welcome); Relativelayout layoutwelcome= (relativelayout) Findviewbyid (r.id.layoutwelcome);//Get XML layout alphaanimation Alphaanimation=new alphaanimation (0.1f,1.0f);//Instance animation set the change of transparency, the parameter is float type alphaanimation.setduration (3000);// The animation changes time layoutwelcome.startanimation (alphaanimation);//Apply the animation to the obtained layout on the three processes that correspond to the/* animation */ Alphaanimation.setanimationlistener (New Animationlistener () {@Override/* animation starts */public void Onanimationstart ( Animation Animation) {}/* animation process */@Overridepublic void Onanimationrepeat (Animation Animation) {}/* animation after the end */@Overridepublic void Onanimationend (Animation Animation) {Intent intent=new Intent (Welcomeactivity.this, Giudeactivity.class);//Jump to the Navigation page startactivity (intent); finish ();//Jump to destroy the original page, so that the click return button does not return the page});} @Overridepublic boolean Oncreateoptionsmenu (Menu menu) {getmenuinflater (). Inflate (r.menu.welcome, menu); return true;}}

9.giudeadapter.java page handles the flip and click events of the Navigation page. Giudeadapter.java page:

Package Com.example.login;import Java.util.arraylist;import Java.util.list;import android.os.bundle;import Android.app.activity;import Android.content.intent;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.util.log;import Android.view.layoutinflater;import Android.view.menu;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.imageview;import Android.widget.textview;public Class Giudeactivity extends Activity {private list<view> guideviews;private viewpager vpguide;private int[] guide_dots= {R.ID.IVGUIDE_DOT1,R.ID.IVGUIDE_DOT2,R.ID.IVGUIDE_DOT3,R.ID.IVGUIDE_DOT4};p rivate ImageView[] Dots;private TextView tvgo; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_giude); Initguideviews (); Initdots (); Setlisteners ();} private void Initguideviews () {vpguide= (Viewpager) Findviewbyid (r.id.vpguide); guideviews=newArraylist<view> (); Layoutinflater Layoutinflater=layoutinflater.from (this);//Find the XML file below the layout guideviews.add (layoutinflater.inflate (R.layout.view1_of_pager,null)); Guideviews.add (Layoutinflater.inflate (R.layout.view2_of_pager,null)); Guideviews.add (LayoutInflater.inflate ( R.layout.view3_of_pager,null));/* need to get the control with ID tvgo, so you need to extract View4_of_pager.xml page */view view4=layoutinflater.inflate ( R.layout.view4_of_pager,null);//convert XML pages to Viewguideviews.add (VIEW4); tvgo= (TextView) View4.findviewbyid (r.id.tvgo ); Guideadapter guideadapter=new Guideadapter (guideviews);//Instance Custom adapter Vpguide.setadapter (guideadapter);//Add Adapter}/* Set dot small icon */private void Initdots () {dots=new imageview[4];for (int i=0;i<dots.length;i++) {dots[i]= (ImageView) Findviewbyid (Guide_dots[i]);}} /* nav slide */private void setlisteners () {Vpguide.setonpagechangelistener (new Onpagechangelistener () {@Overridepublic void onpageselected (int position) {for (int i=0;i<guide_dots.length;i++) {if (position==i) {dots[i]. Setimageresource (R.drawable.bg_point_selected);//the current page dot icon is the selected}else{dots[i].setimageresource (r.drawable.bg_point);//The dot icon for the current page is not selected}}} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {} @Overridepublic void onpagescrollstatechanged (int arg0) {}}); Tvgo.setonclicklistener (New Onclicklistener () {@Overridepublic void OnClick (View arg0) {Intent intent=new Intent ( Giudeactivity.this,loginactivity.class); startactivity (intent); finish ();//After the jump to destroy the original page, so that the click return button does not return the page}); @Overridepublic boolean Oncreateoptionsmenu (Menu menu) {getmenuinflater (). Inflate (r.menu.giude, menu); return true;}}

10. The navigation effect can appear when running.

Android Applet-walker registration page (iv)