前言
基本上现在所有的应用都会有一个欢迎界面，在欢迎界面对应用做一个整体的介绍，然后在跳入到主界面，这次要说的这个引导页就是带翻页的引导页。效果如下所示
概要实现
主要分为两部分功能，一个是翻页效果，一个是页面位置指示器。为了实现翻页效果我采用系统自带的ViewPager对象来实现；页面指示器则通过一个LinearLayout在其中放置相应个数的图片，然后根据页面的滑动动态修改各个图片的资源。布局文件如下所示
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 tools:context=".MainActivity" >
6
7 <android.support.v4.view.ViewPager
8 xmlns:android="http://schemas.android.com/apk/res/android"
9 android:id="@+id/welcome_pager"
10 android:layout_width="match_parent"
11 android:layout_height="match_parent" />
12
13 <!-- 图片位置指示器 -->
14 <LinearLayout
15 android:id="@+id/director"
16 android:layout_width="match_parent"
17 android:layout_height="wrap_content"
18 android:gravity="center_horizontal"
19 android:orientation="horizontal"
20 android:layout_marginBottom="15dip"
21 android:layout_alignParentBottom="true"
22 >
23
24 <ImageView
25 android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:background="@drawable/pageindicator_on" />
28
29 <ImageView
30 android:layout_width="wrap_content"
31 android:layout_height="wrap_content"
32 android:background="@drawable/pageindicator_off" />
33
34 <ImageView
35 android:layout_width="wrap_content"
36 android:layout_height="wrap_content"
37 android:background="@drawable/pageindicator_off" />
38
39 <ImageView
40 android:layout_width="wrap_content"
41 android:layout_height="wrap_content"
42 android:background="@drawable/pageindicator_off" />
43 </LinearLayout>
44
45 </RelativeLayout>
ViewPager
先来看下官方解释:Layout manager that allows the user to flip left and right through
pages of data.意思是说，Viewpage是一个允许用户在多个页面数据之间通过左滑或者右滑的方式切换页面数据的布局管理器。
主要功能点有两部分，数据适配器Adapter，和事件监听器OnPageChangeListener。数据适配器用来管理这个ViewPager对象的显示内容，而OnPageChangeListener用来处理当页面切换的时候的行为动作，我修改页面指示器就是通过这个事件来完成的。
适配器
1 class pagerAdapter extends FragmentPagerAdapter{
2
3 public pagerAdapter(FragmentManager fm) {
4 super(fm);
5 }
6
7 @Override
8 public Fragment getItem(int arg0) {
9 //得到要显示的对象并初始化图片
10 WelcomeFragment fm = new WelcomeFragment();
11 fm.setImg(imgs.get(arg0));
12
13 return fm;
14 }
15
16 @Override
17 public int getCount() {
18 return imgs.size();
19 }
20
21 }
上面这段就是ViewPager要用的适配器了，其中imgs是一个id数组，存放了要在欢迎界面展示的图片的id，WelcomeFragment是一个Fragment类，用来展示页面内容，这两个代码会在完整代码中体现。两个方法需要实现，getCout，用来表示有多少个页面；getItem，用来获取指定位置的Pager对象。
imgs数组定义及实现：
1 List<Integer> imgs = null;
2 //初始化欢迎界面图片数组
3 imgs = new ArrayList<Integer>();
4 imgs.add(R.drawable.help1);
5 imgs.add(R.drawable.help2);
6 imgs.add(R.drawable.help3);
7 imgs.add(R.drawable.help4);
WelcomeFragment类定义
1 public class WelcomeFragment extends Fragment {
2
3 View view = null;
4 int imgId ;
5 @Override
6 public View onCreateView(LayoutInflater inflater, ViewGroup container,
7 Bundle savedInstanceState) {
8 view = inflater.inflate(R.layout.welcome_fragment, null);
9
10 ImageView fragmentVw = (ImageView) view.findViewById(R.id.welcome_Img);
11 fragmentVw.setBackgroundResource(imgId);
12 return view;
13 }
14
15 /**
16 * 为该Fragment设置显示图片
17 * */
18 public void setImg(int imgID){
19
20 imgId = imgID;
21 }
22 }
WelcomeFragment布局文件
1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:layout_width="match_parent"
3 android:layout_height="match_parent" >
4
5 <ImageView
6 android:id="@+id/welcome_Img"
7 android:contentDescription="welcome"
8 android:layout_width="match_parent"
9 android:layout_height="match_parent" />
10
11 </FrameLayout>
事件监听器OnPageChangeListener
这个监听器用来监听页面切换事件，实现这个接口用来处理页面切换时，页面指示器跟着改变状态。实现代码如下
1 /**
2 * 页面切换的事件监听器
3 * */
4 class pageChangeListener implements OnPageChangeListener{
5
6 /**
7 * 当某一个页面被选中的时候触发
8 * */
9 @Override
10 public void onPageSelected(int arg0) {
11 int count = directorLayout.getChildCount();
12 /**
13 * 指示器自对象顺序和页面显示顺序一样的设置为on，其余的设置为off
14 * */
15 for(int i=0;i<count;i++){
16 ImageView iv = (ImageView) directorLayout.getChildAt(i);
17 if(i == arg0){
18 iv.setBackgroundResource(R.drawable.pageindicator_on);
19 }else{
20 iv.setBackgroundResource(R.drawable.pageindicator_off);
21 }
22 }
23 }
24
25 @Override
26 public void onPageScrolled(int arg0, float arg1, int arg2) {
27 // TODO Auto-generated method stub
28 }
29
30 @Override
31 public void onPageScrollStateChanged(int arg0) {
32 // TODO Auto-generated method stub
33 }
34 }
这样的话，一个引导页就做好了。
后记
完整代码：Welcome
原文连接：http://www.cnblogs.com/luoaz/p/3750539.html
时间： 2024-10-13 21:44:08