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

Admin

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

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

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

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. }

复制代码

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

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. }

复制代码

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