Android仿QQ微信开场导航以及登陆界面

相信大家对于微信等社交应用的UI界面已经都很熟悉了，该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片，可以左右滑动浏览，最后进入应用，这一效果适用于多种项目中，相信今后开发应用一定会用得到。网路上也有不少这样的例子可以参考，不过看别人的代码是一回事，自己实际做起来又是另一回事，今天的这个微信的Demo是研究过多个类似的界面后自己动手去实现的效果，并且都加上了详细的注释(虽然有的多余)，方便以后回顾一看就能看明白，只有真正亲自写一写，体会才会更深刻，例子中的图片都是在微信的APK中提取出来的，涉及到的知识点无外乎是ViewPager和Animation。

首先是开场闪屏的一个界面，使用handler控制该页面指定时间后进行跳转

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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;   /** 开场欢迎动画 */ public class WelcomeA extends Activity {         @Override         public void onCreate(Bundle savedInstanceState) {                 super .onCreate(savedInstanceState);                 setContentView(R.layout.strat);                 //延迟两秒后执行run方法中的页面跳转                 new Handler().postDelayed( new Runnable() {                           @Override                         public void run() {                                 Intent intent = new Intent(WelcomeA. this , WhatsnewPagesA. class );                                 startActivity(intent);                                 WelcomeA. this .finish();                         }                 }, 2000 );

----------------------------------------
接着是主要的部分，也就是一系列的功能介绍图片，主要是viewpager来实现，嵌套在上面的小圆点的跟随导航也是要实现的效果之一
      

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144

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 的导航界面 */ public class WhatsnewPagesA extends Activity {         /** Viewpager对象 */         private ViewPager viewPager;         private ImageView imageView;         /** 创建一个数组，用来存放每个页面要显示的View */         private ArrayList<View> pageViews;         /** 创建一个imageview类型的数组，用来表示导航小圆点 */         private ImageView[] imageViews;         /** 装显示图片的viewgroup */         private ViewGroup viewPictures;         /** 导航小圆点的viewgroup */         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<View>();                 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 ));                   // 小圆点数组，大小是图片的个数                 imageViews = new ImageView[pageViews.size()];                 // 从指定的XML文件中加载视图                 viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null );                   viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);                 viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);                   // 添加小圆点导航的图片                 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 );                         // 吧小圆点放进数组中                         imageViews<i> = imageView;                         // 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是                         if (i == 0 )                                 imageViews<i>.setImageDrawable(getResources().getDrawable(                                                 R.drawable.page_indicator_focused));                         else                                 imageViews<i>.setImageDrawable(getResources().getDrawable(                                                 R.drawable.page_indicator_unfocused));                         // 将imageviews添加到小圆点视图组                         viewPoints.addView(imageViews<i>);                 }                   setContentView(viewPictures);                   viewPager.setAdapter( new NavigationPageAdapter());                 // 为viewpager添加监听，当view发生变化时的响应                 viewPager.setOnPageChangeListener( new NavigationPageChangeListener());         }           // 导航图片view的适配器，必须要实现的是下面四个方法         class NavigationPageAdapter extends PagerAdapter {                   @Override                 public int getCount() {                         return pageViews.size();                 }                   @Override                 public boolean isViewFromObject(View arg0, Object arg1) {                         return arg0 == arg1;                 }                   // 初始化每个Item                 @Override                 public Object instantiateItem(View container, int position) {                         ((ViewPager) container).addView(pageViews.get(position));                         return pageViews.get(position);                 }                   // 销毁每个Item                 @Override                 public void destroyItem(View container, int position, Object object) {                         ((ViewPager) container).removeView(pageViews.get(position));                 }           }           // viewpager的监听器，主要是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) {                         // 循环主要是控制导航中每个小圆点的状态                         for ( int i = 0 ; i < imageViews.length; i++) {                                 // 当前view下设置小圆点为选中状态                                 imageViews<i>.setImageDrawable(getResources().getDrawable(                                                 R.drawable.page_indicator_focused));                                 // 其余设置为飞选中状态                                 if (position != i)                                         imageViews<i>.setImageDrawable(getResources().getDrawable(                                                         R.drawable.page_indicator_unfocused));                         }                 }           }           // 开始按钮方法，开始按钮在XML文件中onClick属性设置；         // 我试图把按钮在本activity中实例化并设置点击监听，但总是报错，使用这个方法后没有报错，原因没找到         public void startbutton(View v) {                 Intent intent = new Intent(WhatsnewPagesA. this , WhatsnewAnimationA. class );                 startActivity(intent);                 WhatsnewPagesA. this .finish();         }   }</i></i></i></i></i></i>

-----------------------------------------
而后的便是开门的动画效果了，这一块还是比较简单的，分别控制两幅图片的移动动画就可以实现

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

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;   /**导航过后的动画效果界面*/ 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);                   //创建一个AnimationSet对象                 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);                 //设置动画效果持续的时间                 transLeft.setDuration( 2000 );                 //将anim对象添加到AnimationSet对象中                 animLeft.addAnimation(transLeft);                 animLeft.setFillAfter( true );                 img_left.startAnimation(transLeft);                 transLeft.startNow();                                                                       //创建一个AnimationSet对象                 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);                 //设置动画效果持续的时间                 transRight.setDuration( 2000 );                 //将anim对象添加到AnimationSet对象中                 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 );         }             }

最后进入到我们的登陆界面，就是一个简单的微信登陆布局，代码就不贴了