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来实现，嵌套在上面的小圆点的跟随导航也是要实现的效果之一
                                  

                        

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 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();      }   }

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

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 );      }         }

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

    OK了，以上就是微信第一次使用的时候开场功能介绍和动画，比较使用，适用于为自己发布新产品的时候作为导航简介，大家可以根据具体要求具体设计，不过大致思路都是这样的。
转自： http://blog.csdn.net/eyu8874521/article/details/8332366