android 欢迎界面翻页效果，仿微信第一次登陆介绍翻页界面

本实例做的相对比较简单主要是对翻页控件的使用，有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用，做起来比较简单不用费太大的劲去找别的资料，或者别的办法设计。有空多读读android API了解熟悉了做什么都比较容易。（注意：ViewPager用于实现多页面的切换效果，该类存在于Google的兼容包里面，所以在引用时记得在BuilldPath中加入“android-support-v4.jar” 如果sdk是4.0及以上的都包含了该包）本例步骤如下：

 

第一步：main.xml设计，其中ViewPager为多页显示控件，PagerTitleStrip用于显示当前页面的标题，下面的imagee是圆点展示当前页状态和总页数：

 

Xml代码  

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     android:orientation="vertical" >    
5.     <android.support.v4.view.ViewPager  
6.         android:id="@+id/whatsnew_viewpager"  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:layout_gravity="center" >   
10.           
11.         <!--如果不需要显示什么标题的话可以去点这个控件这里是为了连接控件的作用所以添加上去的  -->  
12.         <android.support.v4.view.PagerTitleStrip  
13.             android:id="@+id/pagertitle"  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_gravity="bottom"  
17.             android:background="@null"  
18.             android:textColor="#3399cc" />  
19.     </android.support.v4.view.ViewPager>    
20.       
21.           
22.          <LinearLayout  
23.             android:layout_width="fill_parent"  
24.             android:layout_height="wrap_content"  
25.             android:layout_gravity="bottom"  
26.             android:layout_marginBottom="30dp"   
27.             android:gravity="center_horizontal"     >  
28.               
29.             <ImageView  
30.                 android:id="@+id/page0"  
31.              android:layout_width="wrap_content"  
32.              android:layout_height="wrap_content"                  
33.              android:scaleType="matrix"  
34.              android:src="@drawable/page_now" />  
35.             <ImageView  
36.                 android:id="@+id/page1"  
37.              android:layout_width="wrap_content"  
38.              android:layout_height="wrap_content"  
39.              android:layout_marginLeft="10dp"                  
40.              android:scaleType="matrix"  
41.              android:src="@drawable/page" />  
42.             <ImageView  
43.                 android:id="@+id/page2"  
44.              android:layout_width="wrap_content"  
45.              android:layout_height="wrap_content"  
46.              android:layout_marginLeft="10dp"                      
47.              android:scaleType="matrix"  
48.              android:src="@drawable/page" />  
49.             <ImageView  
50.                 android:id="@+id/page3"  
51.              android:layout_width="wrap_content"  
52.              android:layout_height="wrap_content"   
53.              android:layout_marginLeft="10dp"                  
54.              android:scaleType="matrix"  
55.              android:src="@drawable/page" />  
56.             <ImageView  
57.                 android:id="@+id/page4"  
58.              android:layout_width="wrap_content"  
59.              android:layout_height="wrap_content"   
60.              android:layout_marginLeft="10dp"                  
61.              android:scaleType="matrix"  
62.              android:src="@drawable/page" />  
63.             <ImageView  
64.                 android:id="@+id/page5"  
65.              android:layout_width="wrap_content"  
66.              android:layout_height="wrap_content"   
67.              android:layout_marginLeft="10dp"                  
68.              android:scaleType="matrix"  
69.              android:src="@drawable/page" />             
70.             <ImageView  
71.                 android:id="@+id/page6"  
72.              android:layout_width="wrap_content"  
73.              android:layout_height="wrap_content"   
74.              android:layout_marginLeft="10dp"                  
75.              android:scaleType="matrix"  
76.              android:src="@drawable/page" />   
77.         </LinearLayout>  
78.           
79.      
80. </FrameLayout>  

 

 

 

 

第二步：创建MyPagerAdapter 继承PagerAdapter这个适配器比较简单，如下：

 

Java代码  

1. import java.util.ArrayList;  
2. import android.support.v4.view.PagerAdapter;  
3. import android.support.v4.view.ViewPager;  
4. import android.view.View;  
5. public class MyPagerAdapter extends PagerAdapter{  
6. private ArrayList<View> views;  
7. private ArrayList<String> titles;  
8. public MyPagerAdapter(ArrayList<View> views,ArrayList<String> titles){  
9. this.views = views;  
10. this.titles = titles;  
11. }  
12. @Override  
13. public int getCount() {  
14. return this.views.size();  
15. }  
16. @Override  
17. public boolean isViewFromObject(View arg0, Object arg1) {  
18. return arg0 == arg1;  
19. }  
20. public void destroyItem(View container, int position, Object object) {  
21. ((ViewPager)container).removeView(views.get(position));  
22. }  
23. //标题， 如果不要标题可以去掉这里  
24. @Override  
25.     public CharSequence getPageTitle(int position) {  
26.         return titles.get(position);  
27.     }  
28. //页面view  
29. public Object instantiateItem(View container, int position) {  
30. ((ViewPager)container).addView(views.get(position));  
31. return views.get(position);  
32. }  
33. }  

 

 

 

第三步：编写MainActivity ：

 

Java代码  

1. import java.util.ArrayList;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.support.v4.view.PagerTitleStrip;  
5. import android.support.v4.view.ViewPager;  
6. import android.support.v4.view.ViewPager.OnPageChangeListener;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.Window;  
10. import android.widget.ImageView;  
11. public class MainActivity extends Activity {  
12. //翻页控件  
13. private ViewPager mViewPager;  
14. private PagerTitleStrip mPagerTitleStrip;  
15. //这5个是底部显示当前状态点imageView  
16. private ImageView mPage0;  
17. private ImageView mPage1;  
18. private ImageView mPage2;  
19. private ImageView mPage3;  
20. private ImageView mPage4;  
21. private ImageView mPage5;  
22. private ImageView mPage6;  
23.     @Override  
24.     public void onCreate(Bundle savedInstanceState) {  
25.         //去掉标题栏全屏显示  
26.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
27.         super.onCreate(savedInstanceState);  
28.         setContentView(R.layout.activity_main);          
29.         mViewPager = (ViewPager)findViewById(R.id.whatsnew_viewpager);  
30.         mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);  
31.           
32.           
33.         mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());          
34.         mPage0 = (ImageView)findViewById(R.id.page0);  
35.         mPage1 = (ImageView)findViewById(R.id.page1);  
36.         mPage2 = (ImageView)findViewById(R.id.page2);  
37.         mPage3 = (ImageView)findViewById(R.id.page3);  
38.         mPage4 = (ImageView)findViewById(R.id.page4);  
39.         mPage5 = (ImageView)findViewById(R.id.page5);  
40.         mPage6 = (ImageView)findViewById(R.id.page6);  
41.                  
42.       /* 
43.        * 这里是每一页要显示的布局，根据应用需要和特点自由设计显示的内容 
44.        * 以及需要显示多少页等 
45.        */  
46.         LayoutInflater mLi = LayoutInflater.from(this);  
47.         View view1 = mLi.inflate(R.layout.whats_news_gallery_one, null);  
48.         View view2 = mLi.inflate(R.layout.whats_news_gallery_two, null);  
49.         View view3 = mLi.inflate(R.layout.whats_news_gallery_three, null);  
50.         View view4 = mLi.inflate(R.layout.whats_news_gallery_four, null);  
51.         View view5 = mLi.inflate(R.layout.whats_news_gallery_five, null);  
52.         View view6 = mLi.inflate(R.layout.whats_news_gallery_six, null);  
53.         View view7 = mLi.inflate(R.layout.whats_news_gallery_seven, null);  
54.         /* 
55.          * 这里将每一页显示的view存放到ArrayList集合中 
56.          * 可以在ViewPager适配器中顺序调用展示 
57.          */  
58.         final ArrayList<View> views = new ArrayList<View>();  
59.         views.add(view1);  
60.         views.add(view2);  
61.         views.add(view3);  
62.         views.add(view4);  
63.         views.add(view5);  
64.         views.add(view6);     
65.         views.add(view7);   
66.           
67.           
68.         /* 
69.          * 每个页面的Title数据存放到ArrayList集合中 
70.          * 可以在ViewPager适配器中调用展示 
71.          */  
72.         final ArrayList<String> titles = new ArrayList<String>();  
73.         titles.add("tab1");  
74.         titles.add("tab2");  
75.         titles.add("tab3");  
76.         titles.add("tab4");  
77.         titles.add("tab5");  
78.         titles.add("tab6");  
79.         titles.add("tab7");  
80.           
81.         //填充ViewPager的数据适配器  
82.         MyPagerAdapter mPagerAdapter = new MyPagerAdapter(views,titles);  
83. mViewPager.setAdapter(mPagerAdapter);  
84.     }      
85.       
86.     public class MyOnPageChangeListener implements OnPageChangeListener {  
87.       
88.       
89. public void onPageSelected(int page) {  
90. //翻页时当前page,改变当前状态园点图片  
91. switch (page) {  
92. case 0:  
93. mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
94. mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));  
95. break;  
96. case 1:  
97. mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
98. mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));  
99. mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));  
100. break;  
101. case 2:  
102. mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
103. mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));  
104. mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));  
105. break;  
106. case 3:  
107. mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
108. mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));  
109. mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));  
110. break;  
111. case 4:  
112. mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
113. mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));  
114. mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));  
115. break;  
116. case 5:  
117. mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
118. mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));  
119. mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page));  
120. break;  
121. case 6:  
122. mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page_now));  
123. mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));  
124. break;  
125. }  
126. }  
127. public void onPageScrolled(int arg0, float arg1, int arg2) {  
128. }  
129. public void onPageScrollStateChanged(int arg0) {  
130. }  
131. }  
132.       
133.       
134. }  

 

 

第四步;运行效果如图底部是标题栏：

 

 

去掉底部是标题栏如下效果：