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