Android imitation QQ WeChat opening navigation and login interface

You are already familiar with the UI of social networking applications. This UI is the best reference for the first time when you use it. You can slide the navigation between the left and right of some products, finally, enter the application. This effect applies to multiple projects. I believe that the application development will be available in the future. There are many such examples on the Internet for reference. However, reading other people's code is one thing, and it is another thing to do it by yourself, today's Demo is to study the effects of multiple similar interfaces and add detailed annotations (though redundant ), it will be easy to look back later and you will be able to understand that only by writing it in person will you be more profound. The pictures in this example are extracted from the APK, the knowledge points involved are ViewPager and Animation.

The first is an interface of the opening pop-up screen. handler is used to control the page jump after a specified time.

Package com. example. weichat. UI;

Import com. example. weichat. R;

Import android. app. Activity;

Import android. content. Intent;

Import android. OS. Bundle;

Import android. OS. Handler;

/** Opening welcome animation */

Public class WelcomeA extends Activity {

@ Override

Public void onCreate (Bundle savedInstanceState ){

Super. onCreate (savedInstanceState );

SetContentView (R. layout. strat );

// After two seconds, execute the page Jump in the run Method

New Handler (). postDelayed (new Runnable (){

@ Override

Public void run (){

Intent intent = new Intent (WelcomeA. this, WhatsnewPagesA. class );

StartActivity (intent );

WelcomeA. this. finish ();

}

},2000 );

The next step is the main part, that is, a series of functional introduction pictures, which are mainly implemented by viewpager. nested navigation with small dots above is also one of the effects to be achieved.

 

 

 

 

Package com. example. weichat. UI;

Import java. util. ArrayList;

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. LayoutInflater;

Import android. view. View;

Import android. view. ViewGroup;

Import android. view. ViewGroup. LayoutParams;

Import android. view. Window;

Import android. widget. ImageView;

Import com. example. weichat. R;

/** What's new's navigation interface */

Public class WhatsnewPagesA extends Activity {

/** Viewpager object */

Private ViewPager viewPager;

Private ImageView imageView;

/** Create an array to store the View to be displayed on each page */

Private ArrayList PageViews;

/** Create an imageview array to indicate small dots in the Navigation */

Private ImageView [] imageViews;

/** Display the viewgroup of the image */

Private ViewGroup viewPictures;

/** Viewgroup for navigation bullets */

Private ViewGroup viewPoints;

@ Override

Protected void onCreate (Bundle savedInstanceState ){

// TODO Auto-generated method stub

Super. onCreate (savedInstanceState );

RequestWindowFeature (Window. FEATURE_NO_TITLE );

LayoutInflater inflater = getLayoutInflater ();

PageViews = new ArrayList ();

PageViews. add (inflater. inflate (R. layout. viewpager01, null ));

PageViews. add (inflater. inflate (R. layout. viewpager02, null ));

PageViews. add (inflater. inflate (R. layout. viewpager03, null ));

PageViews. add (inflater. inflate (R. layout. viewpager04, null ));

PageViews. add (inflater. inflate (R. layout. viewpager05, null ));

PageViews. add (inflater. inflate (R. layout. viewpager06, null ));

// Small dot array, which is the number of images

ImageViews = new ImageView [pageViews. size ()];

// Load the view from the specified XML file

ViewPictures = (ViewGroup) inflater. inflate (R. layout. viewpagers, null );

ViewPager = (ViewPager) viewPictures. findViewById (R. id. guidePagers );

ViewPoints = (ViewGroup) viewPictures. findViewById (R. id. viewPoints );

// Add an image with a small dot navigation

For (int I = 0; I <pageViews. size (); I ++ ){

ImageView = new ImageView (WhatsnewPagesA. this );

ImageView. setLayoutParams (new LayoutParams (20, 20 ));

ImageView. setPadding (5, 0, 5, 0 );

// Put the dot into the Array

ImageViews [I] = imageView;

// By default, the first image is selected, and the first dot is selected.

If (I = 0)

ImageViews [I]. setImageDrawable (getResources (). getDrawable (

R. drawable. page_indicator_focused ));

Else

ImageViews [I]. setImageDrawable (getResources (). getDrawable (

R. drawable. page_indicator_unfocused ));

// Add imageviews to the dot view group

ViewPoints. addView (imageViews [I]);

}

SetContentView (viewPictures );

ViewPager. setAdapter (new NavigationPageAdapter ());

// Add a listener for viewpager. The response when the view changes

ViewPager. setOnPageChangeListener (new NavigationPageChangeListener ());

}

// The adapter for navigation Image view. The following four methods must be implemented:

Class NavigationPageAdapter extends PagerAdapter {

@ Override

Public int getCount (){

Return pageViews. size ();

}

@ Override

Public boolean isViewFromObject (View arg0, Object arg1 ){

Return arg0 = arg1;

}

// Initialize each Item

@ Override

Public Object instantiateItem (View container, int position ){

(ViewPager) container). addView (pageViews. get (position ));

Return pageViews. get (position );

}

// Destroy each Item

@ Override

Public void destroyItem (View container, int position, Object object Object ){

(ViewPager) container). removeView (pageViews. get (position ));

}

}

// Listener of viewpager, mainly implemented by onPageSelected

Class NavigationPageChangeListener implements OnPageChangeListener {

@ Override

Public void onPageScrollStateChanged (int arg0 ){

}

@ Override

Public void onPageScrolled (int arg0, float arg1, int arg2 ){

}

@ Override

Public void onPageSelected (int position ){

// Loop mainly controls the status of each dot in the navigation

For (int I = 0; I <imageViews. length; I ++ ){

// Set the dot to the selected state in the current view

ImageViews [I]. setImageDrawable (getResources (). getDrawable (

R. drawable. page_indicator_focused ));

// Set the remaining settings to the selected flight status

If (position! = I)

ImageViews [I]. setImageDrawable (getResources (). getDrawable (

R. drawable. page_indicator_unfocused ));

}

}

}

// Start button method. the start button sets the onClick attribute in the XML file;

// I tried to instantiate the button in this activity and set the click listener, but there was always an error. No error was reported after using this method. The reason was not found.

Public void startbutton (View v ){

Intent intent = new Intent (WhatsnewPagesA. this, WhatsnewAnimationA. class );

StartActivity (intent );

WhatsnewPagesA. this. finish ();

}

}

The next step is the animation effect of opening the door, which is relatively simple. You can control the mobile animation of the two images separately.

Package com. example. weichat. UI;

Import com. example. weichat. R;

Import android. app. Activity;

Import android. content. Intent;

Import android. OS. Bundle;

Import android. OS. Handler;

Import android. view. animation. Animation;

Import android. view. animation. AnimationSet;

Import android. view. animation. TranslateAnimation;

Import android. widget. ImageView;

/** Animation effect page after Navigation */

Public class WhatsnewAnimationA extends Activity {

Private ImageView img_left, img_right;

@ Override

Protected void onCreate (Bundle savedInstanceState ){

// TODO Auto-generated method stub

Super. onCreate (savedInstanceState );

SetContentView (R. layout. whatnew_animation );

Img_left = (ImageView) findViewById (R. id. doorpage_left );

Img_right = (ImageView) findViewById (R. id. doorpage_right );

// Create an AnimationSet object

AnimationSet animLeft = new AnimationSet (true );

TranslateAnimation transLeft = new TranslateAnimation (

Animation. RELATIVE_TO_SELF, 0f, Animation. RELATIVE_TO_SELF,

-1f, Animation. RELATIVE_TO_SELF, 0f,

Animation. RELATIVE_TO_SELF, 0f );

// Set the animation duration

TransLeft. setDuration (2000 );

// Add the anim object to the AnimationSet object

AnimLeft. addAnimation (transLeft );

AnimLeft. setFillAfter (true );

Img_left.startAnimation (transLeft );

TransLeft. startNow ();

// Create an AnimationSet object

AnimationSet animRight = new AnimationSet (true );

TranslateAnimation transRight = new TranslateAnimation (

Animation. RELATIVE_TO_SELF, 0f, Animation. RELATIVE_TO_SELF,

1f, Animation. RELATIVE_TO_SELF, 0f,

Animation. RELATIVE_TO_SELF, 0f );

// Set the animation duration

TransRight. setDuration (2000 );

// Add the anim object to the AnimationSet object

AnimRight. addAnimation (transRight );

AnimRight. setFillAfter (true );

Img_right.startAnimation (transRight );

TransRight. startNow ();

New Handler (). postDelayed (new Runnable (){

@ Override

Public void run (){

// TODO Auto-generated method stub

Intent intent = new Intent (WhatsnewAnimationA. this, FirstPageA. class );

StartActivity (intent );

WhatsnewAnimationA. this. finish ();

}

},1000 );

}

}

Finally, we enter our login interface, which is a simple login layout, and the code will not be pasted