Android 仿微信之界面导航篇

微信是现在比较流行的应用了，在各大安卓市场几乎都是名列前茅了。说实话不得不羡慕腾讯庞大的用户群体，只要腾讯敢做，就会有很多人去用。废话不多说，下面就开始说一下如何实现微信的第一次启动程序的用户导航，ViewPager相信大家都不陌生了，是google放出的一个安卓低版本的兼容包android-support-v4.jar，里面有很多类我们可以去使用。那这个导航就是使用这个类来辅助完成的，在每一个View里放置一个图片，当我们使用ViewPager滑动界面的时候，就会看到一张张图片，从而实现这个效果，我们来看一下官方的：





其实使用过微信的用户都知道，每次启动程序都会有这个启动画面，如果是第一次使用当然还会出现后面的导航界面。下面以第一次使用为例，来说明如何实现。当启动出现进入第一个Activity，其实就是那个启动画面，有地球那个，之后会在这个Activity里面设置一个Handler去延迟（1秒，数值可以自己设定）执行启动导航界面的Activity，代码如下：

Java代码

1. import android.os.Bundle;
2. import android.os.Handler;
3. import android.app.Activity;
4. import android.content.Intent;
5. import android.view.Window;
6. import android.view.WindowManager;
8. public class Appstart extends Activity{
10. /*
11. * 2012.11.1
12. * @author:wangjinyu501
13. * 这个Activiyt是程序启动画面，也就是一个图片。在这个Activity里使用了Handler一秒后会进入到引导Activity里面。
14. */
15. @Override
16. public void onCreate(Bundle savedInstanceState) {
18. super.onCreate(savedInstanceState);
19. requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏，注意一定要在绘制view之前调用这个方法，不然会出现
20. //AndroidRuntimeException: requestFeature() must be called before adding content 这个错误。
21. setContentView(R.layout.appstart);
22. getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); //全屏显示
24. new Handler().postDelayed(new Runnable(){
25. public void run(){
26. Intent intent = new Intent (Appstart.this,Viewpager.class);
27. startActivity(intent);
28. this.finish();//结束本Activity
29. }
30. }, 1000);
31. }
32. }

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Window;
import android.view.WindowManager;

public class Appstart extends Activity{

	/*
 * 2012.11.1
 * @author:wangjinyu501
 * 这个Activiyt是程序启动画面，也就是一个图片。在这个Activity里使用了Handler一秒后会进入到引导Activity里面。
 */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);	
		requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏，注意一定要在绘制view之前调用这个方法，不然会出现
		//AndroidRuntimeException: requestFeature() must be called before adding content 这个错误。
		setContentView(R.layout.appstart);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);   //全屏显示
		
	        new Handler().postDelayed(new Runnable(){
		public void run(){
			Intent intent = new Intent (Appstart.this,Viewpager.class);			
			startActivity(intent);			
			this.finish();//结束本Activity
		}
	}, 1000);
   }
}

之后就进入前面说的导航页面了，其实就是多个View，每一个View就是一张图片，非常简单，而且就是基于ViewPager实现的，唯一有一些难度的就是当我们滑动图片的时候，下面那些移动的小圆点会随着改变。这种效果在其他程序的导航界面中也是很常见的。代码如下：

Java代码

1. import java.util.ArrayList;
2. import android.app.Activity;
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.support.v4.view.PagerAdapter;
6. import android.support.v4.view.PagerTitleStrip;
7. import android.support.v4.view.ViewPager;
8. import android.support.v4.view.ViewPager.OnPageChangeListener;
9. import android.view.LayoutInflater;
10. import android.view.View;
11. import android.view.animation.Animation;
12. import android.view.animation.TranslateAnimation;
13. import android.widget.ImageView;
16. public class Viewpager extends Activity {
18. private ViewPager mViewPager;//声明ViewPager对象
19. private PagerTitleStrip mPagerTitleStrip;//声明动画标题
20. private ImageView mPageImg;// 动画图片
21. private int currIndex = 0;//当前页面
22. private ImageView mPage0,mPage1,mPage2,mPage3,mPage4,mPage5,mPage6,mPage7,mPage8;//声明导航图片对象
24. @Override
25. public void onCreate(Bundle savedInstanceState) {
26. super.onCreate(savedInstanceState);
27. setContentView(R.layout.viewpager);
28. mViewPager = (ViewPager)findViewById(R.id.viewpager);
29. mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
30. mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);
32. mPage0 = (ImageView)findViewById(R.id.page0);
33. mPage1 = (ImageView)findViewById(R.id.page1);
34. mPage2 = (ImageView)findViewById(R.id.page2);
35. mPage3 = (ImageView)findViewById(R.id.page3);
36. mPage4 = (ImageView)findViewById(R.id.page4);
37. mPage5 = (ImageView)findViewById(R.id.page5);
38. mPage6 = (ImageView)findViewById(R.id.page6);
39. mPage7 = (ImageView)findViewById(R.id.page7);
40. mPage8 = (ImageView)findViewById(R.id.page8);
42. //将要分页显示的View装入数组中
43. LayoutInflater mLi = LayoutInflater.from(this);
44. View view1 = mLi.inflate(R.layout.view1, null);
45. View view2 = mLi.inflate(R.layout.view2, null);
46. View view3 = mLi.inflate(R.layout.view3, null);
47. View view4 = mLi.inflate(R.layout.view4, null);
48. View view5 = mLi.inflate(R.layout.view5, null);
49. View view6 = mLi.inflate(R.layout.view6, null);
50. View view7 = mLi.inflate(R.layout.view7, null);
51. View view8 = mLi.inflate(R.layout.view8, null);
52. View view9 = mLi.inflate(R.layout.view9, null);
54. //每个页面的view数据
55. final ArrayList<View> views = new ArrayList<View>();
56. views.add(view1);
57. views.add(view2);
58. views.add(view3);
59. views.add(view4);
60. views.add(view5);
61. views.add(view6);
62. views.add(view7);
63. views.add(view8);
64. views.add(view9);
65. //每一个也没得标题
66. final ArrayList<String> titles = new ArrayList<String>();
67. titles.add("①");
68. titles.add("②");
69. titles.add("③");
70. titles.add("④");
71. titles.add("⑤");
72. titles.add("⑥");
73. titles.add("⑦");
74. titles.add("⑧");
75. titles.add("⑨");
77. //填充ViewPager的数据适配器，我们重写即可
78. PagerAdapter mPagerAdapter = new PagerAdapter() {
80. @Override
81. public boolean isViewFromObject(View arg0, Object arg1) {
82. return arg0 == arg1;
83. }
85. @Override
86. public int getCount() {
87. return views.size();
88. }
90. @Override
91. public void destroyItem(View container, int position, Object object) {
92. ((ViewPager)container).removeView(views.get(position));
93. }
95. @Override
96. public CharSequence getPageTitle(int position) {
97. return titles.get(position);
98. }
100. @Override
101. public Object instantiateItem(View container, int position) {
102. ((ViewPager)container).addView(views.get(position));
103. return views.get(position);
104. }
105. };
107. mViewPager.setAdapter(mPagerAdapter);//与ListView用法相同，设置重写的Adapter。这样就实现了ViewPager的滑动效果。
108. }