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

转自：http://blog.csdn.net/eyu8874521/article/details/8332366

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

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

                                   

[java]  view plain copy

1. package com.example.weichat.UI;  
2.   
3. import com.example.weichat.R;  
4.   
5. import android.app.Activity;  
6. import android.content.Intent;  
7. import android.os.Bundle;  
8. import android.os.Handler;  
9.   
10. /** 开场欢迎动画 */  
11. public class WelcomeA extends Activity {  
12.     @Override  
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.strat);  
16.         //延迟两秒后执行run方法中的页面跳转  
17.         new Handler().postDelayed(new Runnable() {  
18.   
19.             @Override  
20.             public void run() {  
21.                 Intent intent = new Intent(WelcomeA.this, WhatsnewPagesA.class);  
22.                 startActivity(intent);  
23.                 WelcomeA.this.finish();  
24.             }  
25.         }, 2000);  
26.       

 

————————————————————————————————————————————————————————————————

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

                                                           

 

[java]  view plain copy

1. package com.example.weichat.UI;  
2.   
3. import java.util.ArrayList;  
4. import android.app.Activity;  
5. import android.content.Intent;  
6. import android.os.Bundle;  
7. import android.support.v4.view.PagerAdapter;  
8. import android.support.v4.view.ViewPager;  
9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
10. import android.view.LayoutInflater;  
11. import android.view.View;  
12. import android.view.ViewGroup;  
13. import android.view.ViewGroup.LayoutParams;  
14. import android.view.Window;  
15. import android.widget.ImageView;  
16. import com.example.weichat.R;  
17.   
18. /** What's new 的导航界面 */  
19. public class WhatsnewPagesA extends Activity {  
20.     /** Viewpager对象 */  
21.     private ViewPager viewPager;  
22.     private ImageView imageView;  
23.     /** 创建一个数组，用来存放每个页面要显示的View */  
24.     private ArrayList<View> pageViews;  
25.     /** 创建一个imageview类型的数组，用来表示导航小圆点 */  
26.     private ImageView[] imageViews;  
27.     /** 装显示图片的viewgroup */  
28.     private ViewGroup viewPictures;  
29.     /** 导航小圆点的viewgroup */  
30.     private ViewGroup viewPoints;  
31.   
32.     @Override  
33.     protected void onCreate(Bundle savedInstanceState) {  
34.         // TODO Auto-generated method stub  
35.         super.onCreate(savedInstanceState);  
36.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
37.         LayoutInflater inflater = getLayoutInflater();  
38.         pageViews = new ArrayList<View>();  
39.         pageViews.add(inflater.inflate(R.layout.viewpager01, null));  
40.         pageViews.add(inflater.inflate(R.layout.viewpager02, null));  
41.         pageViews.add(inflater.inflate(R.layout.viewpager03, null));  
42.         pageViews.add(inflater.inflate(R.layout.viewpager04, null));  
43.         pageViews.add(inflater.inflate(R.layout.viewpager05, null));  
44.         pageViews.add(inflater.inflate(R.layout.viewpager06, null));  
45.   
46.         // 小圆点数组，大小是图片的个数  
47.         imageViews = new ImageView[pageViews.size()];  
48.         // 从指定的XML文件中加载视图  
49.         viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null);  
50.   
51.         viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);  
52.         viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);  
53.   
54.         // 添加小圆点导航的图片  
55.         for (int i = 0; i < pageViews.size(); i++) {  
56.             imageView = new ImageView(WhatsnewPagesA.this);  
57.             imageView.setLayoutParams(new LayoutParams(20, 20));  
58.             imageView.setPadding(5, 0, 5, 0);  
59.             // 吧小圆点放进数组中  
60.             imageViews[i] = imageView;  
61.             // 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是  
62.             if (i == 0)  
63.                 imageViews[i].setImageDrawable(getResources().getDrawable(  
64.                         R.drawable.page_indicator_focused));  
65.             else  
66.                 imageViews[i].setImageDrawable(getResources().getDrawable(  
67.                         R.drawable.page_indicator_unfocused));  
68.             // 将imageviews添加到小圆点视图组  
69.             viewPoints.addView(imageViews[i]);  
70.         }  
71.   
72.         setContentView(viewPictures);  
73.   
74.         viewPager.setAdapter(new NavigationPageAdapter());  
75.         // 为viewpager添加监听，当view发生变化时的响应  
76.         viewPager.setOnPageChangeListener(new NavigationPageChangeListener());  
77.     }  
78.   
79.     // 导航图片view的适配器，必须要实现的是下面四个方法  
80.     class NavigationPageAdapter extends PagerAdapter {  
81.   
82.         @Override  
83.         public int getCount() {  
84.             return pageViews.size();  
85.         }  
86.   
87.         @Override  
88.         public boolean isViewFromObject(View arg0, Object arg1) {  
89.             return arg0 == arg1;  
90.         }  
91.   
92.         // 初始化每个Item  
93.         @Override  
94.         public Object instantiateItem(View container, int position) {  
95.             ((ViewPager) container).addView(pageViews.get(position));  
96.             return pageViews.get(position);  
97.         }  
98.   
99.         // 销毁每个Item  
100.         @Override  
101.         public void destroyItem(View container, int position, Object object) {  
102.             ((ViewPager) container).removeView(pageViews.get(position));  
103.         }  
104.   
105.     }  
106.   
107.     // viewpager的监听器，主要是onPageSelected要实现  
108.     class NavigationPageChangeListener implements OnPageChangeListener {  
109.   
110.         @Override  
111.         public void onPageScrollStateChanged(int arg0) {  
112.   
113.         }  
114.   
115.         @Override  
116.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
117.   
118.         }  
119.   
120.         @Override  
121.         public void onPageSelected(int position) {  
122.             // 循环主要是控制导航中每个小圆点的状态  
123.             for (int i = 0; i < imageViews.length; i++) {  
124.                 // 当前view下设置小圆点为选中状态  
125.                 imageViews[i].setImageDrawable(getResources().getDrawable(  
126.                         R.drawable.page_indicator_focused));  
127.                 // 其余设置为飞选中状态  
128.                 if (position != i)  
129.                     imageViews[i].setImageDrawable(getResources().getDrawable(  
130.                             R.drawable.page_indicator_unfocused));  
131.             }  
132.         }  
133.   
134.     }  
135.   
136.     // 开始按钮方法，开始按钮在XML文件中onClick属性设置；  
137.     // 我试图把按钮在本activity中实例化并设置点击监听，但总是报错，使用这个方法后没有报错，原因没找到  
138.     public void startbutton(View v) {  
139.         Intent intent = new Intent(WhatsnewPagesA.this, WhatsnewAnimationA.class);  
140.         startActivity(intent);  
141.         WhatsnewPagesA.this.finish();  
142.     }  
143.   
144. }  

—————————————————————————————————————————————————————————————————

 

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

                        

[java]  view plain copy

1. package com.example.weichat.UI;  
2.   
3. import com.example.weichat.R;  
4. import android.app.Activity;  
5. import android.content.Intent;  
6. import android.os.Bundle;  
7. import android.os.Handler;  
8. import android.view.animation.Animation;  
9. import android.view.animation.AnimationSet;  
10. import android.view.animation.TranslateAnimation;  
11. import android.widget.ImageView;  
12.   
13. /**导航过后的动画效果界面*/  
14. public class WhatsnewAnimationA extends Activity {  
15.   
16.     private ImageView img_left, img_right;  
17.   
18.     @Override  
19.     protected void onCreate(Bundle savedInstanceState) {  
20.         // TODO Auto-generated method stub  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.whatnew_animation);  
23.         img_left = (ImageView) findViewById(R.id.doorpage_left);  
24.         img_right = (ImageView) findViewById(R.id.doorpage_right);  
25.   
26.         //创建一个AnimationSet对象  
27.         AnimationSet animLeft = new AnimationSet(true);  
28.         TranslateAnimation transLeft = new TranslateAnimation(  
29.                 Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,  
30.                 -1f, Animation.RELATIVE_TO_SELF, 0f,  
31.                 Animation.RELATIVE_TO_SELF, 0f);  
32.         //设置动画效果持续的时间  
33.         transLeft.setDuration(2000);  
34.         //将anim对象添加到AnimationSet对象中  
35.         animLeft.addAnimation(transLeft);  
36.         animLeft.setFillAfter(true);  
37.         img_left.startAnimation(transLeft);  
38.         transLeft.startNow();  
39.           
40.           
41.           
42.         //创建一个AnimationSet对象  
43.         AnimationSet animRight = new AnimationSet(true);  
44.         TranslateAnimation transRight = new TranslateAnimation(  
45.                 Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,  
46.                 1f, Animation.RELATIVE_TO_SELF, 0f,  
47.                 Animation.RELATIVE_TO_SELF, 0f);  
48.         //设置动画效果持续的时间  
49.         transRight.setDuration(2000);  
50.         //将anim对象添加到AnimationSet对象中  
51.         animRight.addAnimation(transRight);  
52.         animRight.setFillAfter(true);  
53.         img_right.startAnimation(transRight);  
54.         transRight.startNow();  
55.           
56.         new Handler().postDelayed(new Runnable() {  
57.               
58.             @Override  
59.             public void run() {  
60.                 // TODO Auto-generated method stub  
61.                 Intent intent = new Intent(WhatsnewAnimationA.this, FirstPageA.class);  
62.                 startActivity(intent);  
63.                 WhatsnewAnimationA.this.finish();  
64.             }  
65.         }, 1000);  
66.     }  
67.       
68.   
69. }  

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

                                        

 

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