Android入门（33）——第十章 使用ViewPager实现导航

第一部分：

1. 效果图：聊天、发现、通讯录。

ViewPager是一种容器，里面可以包含两种东西，一种是View的对象，一种是Fragment。

2. 加入ViewPager：

3. 加载显示的页卡：

4. 配置适配器Adapter：

第二部分：

5. 案例：做一个四个页面的滑动：

第一步：创建四个布局页面，分别叫view1、view2、view3和view4.下面是view1.xml的内容：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="第一个界面"/>    </LinearLayout>

第二步：配置适配器PagerAdapter，我们新建一个MyPagerAdapter.java文件来继承实现PagerAdapter。页卡就代表着页面。

package com.example.viewpager;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;public class MyPagerAdapter extends PagerAdapter{private List<View> viewList;public MyPagerAdapter(List<View> viewList){this.viewList = viewList;// 构造函数，用来获取数据源}/* * 返回的是页卡的数量 * */@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}/* * 判断当前View是否来自于对象 * */@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;// 官方文档}/* * 实例化一个页卡 * */@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(viewList.get(position));return viewList.get(position);}/* * 销毁一个页卡 * */@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubcontainer.removeView(viewList.get(position));}}

第三步：创建MainActivity的Activity，用来实现ViewPager：

package com.example.viewpager;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.support.v4.view.ViewPager;import android.view.Menu;import android.view.View;public class MainActivity extends Activity {private List<View> viewList;private ViewPager pager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                /*         * 通过View对象作为ViewPager的数据源         * */        // 先新建一个ViewList集合        viewList = new ArrayList<View>();        // 将布局转成View对象：        View view1 = View.inflate(this, R.layout.view1, null);        View view2 = View.inflate(this, R.layout.view2, null);        View view3 = View.inflate(this, R.layout.view3, null);        View view4 = View.inflate(this, R.layout.view4, null);        // 将上面的View对象加入到ViewList集合中：        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        viewList.add(view4);                /*         * 配置适配器，如果数据源是List<View>的话，适配器用PagerAdapter。         * */        // 初始化ViewPager        pager = (ViewPager) findViewById(R.id.pager);        // 创建PagerAdapter的适配器，适配器先获取数据源，然后由ViewPager加载该适配器。        MyPagerAdapter adapter = new MyPagerAdapter(viewList);        // ViewPager加载适配器        pager.setAdapter(adapter);            }}

效果图：没什么特别之处，就是可以左右滑动，一共四个页面。

6. 案例二：添加标题：

第一步：改写main页面布局：在ViewPager中添加<android.support.v4.view.PagerTabStrip>控件，id为tab：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <android.support.v4.view.ViewPager        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:id="@+id/pager"        >                <android.support.v4.view.PagerTabStrip            android:id="@+id/tab"            android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="top">                    </android.support.v4.view.PagerTabStrip>            </android.support.v4.view.ViewPager>        </LinearLayout>

第二步：改写适配器文件MyPagerAdapter，让构造函数可以接收titleList，同时添加方法getPageTitle用来设置ViewPager页卡的标题：

package com.example.viewpager;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;public class MyPagerAdapter extends PagerAdapter {private List<View> viewList;private List<String> titleList;public MyPagerAdapter(List<View> viewList, List<String> titleList) {this.viewList = viewList; // 构造函数this.titleList = titleList;}/* * 返回的是页卡的数量 */@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}/* * 判断当前View是否来自于对象 */@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1; // 官方文档}/* * 实例化一个页卡 */@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(viewList.get(position));return viewList.get(position);}/* * 销毁一个页卡 */@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubcontainer.removeView(viewList.get(position));}/* * 设置ViewPager页卡的标题，获取标题，有标题的前提是必须要在ViewPager布局中加入android.support.v4.view. * PagerTabStrip控件。 */@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn titleList.get(position);}}

第三步：改写MainActivity的活动文件，为ViewPager页卡设置标题内容，为PagerTabStrip设置一些颜色格式属性，因为tab是设置在ViewPager布局里面的，所以这里不需要有语句进行特殊的关联，只需要设置属性即可。

package com.example.viewpager;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.Menu;import android.view.View;public class MainActivity extends Activity {private List<View> viewList;private ViewPager pager;private PagerTabStrip tab;// 标题private List<String> titleList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                /*         * 通过View对象作为ViewPager的数据源         * */        // 先新建一个ViewList集合        viewList = new ArrayList<View>();        // 将布局转成View对象的方法：        View view1 = View.inflate(this, R.layout.view1, null);        View view2 = View.inflate(this, R.layout.view2, null);        View view3 = View.inflate(this, R.layout.view3, null);        View view4 = View.inflate(this, R.layout.view4, null);        // 将上面的View对象加入到ViewList集合中：        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        viewList.add(view4);                // 为ViewPager页卡设置标题：        titleList = new ArrayList<String>();        titleList.add("第一页");        titleList.add("第二页");        titleList.add("第三页");        titleList.add("第四页");                // 为PagerTabStrip设置一些属性        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化        tab.setBackgroundColor(Color.YELLOW);// 背景颜色        tab.setTextColor(Color.RED);// 文字颜色        tab.setDrawFullUnderline(false);// 去掉下面的长线        tab.setTabIndicatorColor(Color.GREEN);// 设置下面的小标线颜色                /*         * 配置适配器，如果数据源是List<View>的话，适配器用PagerAdapter。         * */        // 初始化ViewPager        pager = (ViewPager) findViewById(R.id.pager);        // 创建PagerAdapter的适配器        MyPagerAdapter adapter = new MyPagerAdapter(viewList,titleList);        // ViewPager加载适配器        pager.setAdapter(adapter);            }    }

效果图：丑丑的，哈哈。

第四步：还有另一种显示标题的方法，在main布局页面中添加<android.support.v4.view.PagerTitleStrip>控件，别的不需要改，因为适配器前面已经接收了标题数据源。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <android.support.v4.view.ViewPager        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:id="@+id/pager"        >                <android.support.v4.view.PagerTabStrip            android:id="@+id/tab"            android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="top">                    </android.support.v4.view.PagerTabStrip>                <android.support.v4.view.PagerTitleStrip            android:id="@+id/title"            android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom">                    </android.support.v4.view.PagerTitleStrip>            </android.support.v4.view.ViewPager>        </LinearLayout>

效果图：注意：两者都存在的时候，上面那个会失效的。

7. Adapter里的常用方法：

第三部分：

8. 使用适配器FragmentPagerAdapter实现：

案例三：

第一步：首先在前面的基础上，我们有四个布局页面分别为view1，view2，view3，view4，然后我们创建四个java文件分别是：fragment1，fragment2，fragment3和fragment4：其中fragment1中的内容为：

package com.example.viewpager;import com.example.viewpager.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;// Fragment在导包的时候可以选用android.support.v4.app的包public class fragment1 extends Fragment{// 继承于Fragment@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubreturn inflater.inflate(R.layout.view1, container,false);// 这里设定了这个Fragment的布局页面为view1.}}

第二步：

创建MyFragmentPagerAdapter.java文件，

package com.example.viewpager;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;/* * FragmentPagerAdapter和PagerAdapter的区别： * 前者是一次性加载所有的页卡，而后者是默认加载三个页卡。 * 后者在页卡数量超过三个的时候，滑动的时候就存在动态销毁和创建的过程 * 而前者不存在这个问题。 * */public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private List<Fragment> fragList;private List<String> titleList;// 构造函数public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragList,List<String> titleList) {super(fm);// TODO Auto-generated constructor stubthis.fragList = fragList;this.titleList = titleList;}/* * 获取Fragment对象 * */@Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn fragList.get(arg0);}/* * 获取标题 * */@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn titleList.get(position);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fragList.size();}}

第三步：修改MainActivity的活动文件：主要是修改了后来适配器的加载：

package com.example.viewpager;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.Menu;import android.view.View;// 这里的继承改了，不是继承Activity了public class MainActivity extends FragmentActivity {private List<View> viewList;private ViewPager pager;private PagerTabStrip tab;// 标题private List<String> titleList;private List<Fragment> fragList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                /*         * 通过View对象作为ViewPager的数据源         * */        // 先新建一个ViewList集合        viewList = new ArrayList<View>();        // 将布局转成View对象的方法：        View view1 = View.inflate(this, R.layout.view1, null);        View view2 = View.inflate(this, R.layout.view2, null);        View view3 = View.inflate(this, R.layout.view3, null);        View view4 = View.inflate(this, R.layout.view4, null);        // 将上面的View对象加入到ViewList集合中：        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        viewList.add(view4);                /*         * 通过Fragment作为ViewPager的数据源         * */        fragList = new ArrayList<Fragment>();        fragList.add(new fragment1());        fragList.add(new fragment2());        fragList.add(new fragment3());        fragList.add(new fragment4());                // 为ViewPager页卡设置标题：        titleList = new ArrayList<String>();        titleList.add("第一页");        titleList.add("第二页");        titleList.add("第三页");        titleList.add("第四页");                // 为PagerTabStrip设置一些属性        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化        tab.setBackgroundColor(Color.YELLOW);// 背景颜色        tab.setTextColor(Color.RED);// 文字颜色        tab.setDrawFullUnderline(false);// 去掉下面的长线        tab.setTabIndicatorColor(Color.GREEN);// 设置下面的小标线颜色                /*         * 配置适配器，如果数据源是List<View>的话，适配器用PagerAdapter。         * */        // 初始化ViewPager        pager = (ViewPager) findViewById(R.id.pager);        // 创建FragmentPagerAdapter的适配器        // 关于第一个参数fm，如果是以前用getFragmentManager()。        // 现在是import android.support.v4.app.FragmentManager;，所以用getSupportFragmentManager        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);        // ViewPager加载适配器        pager.setAdapter(adapter);     }    }

效果图：与案例二的效果图一样的：

这里有一个注意点：

但下面如果继承的是FragmentStatePagerAdapter类的话，就会和PagerAdapter一样会动态销毁和创建。它还需要多创建两个方法

package com.example.viewpager;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentStatePagerAdapter;import android.view.ViewGroup;/* * FragmentPagerAdapter和PagerAdapter的区别： * 前者是一次性加载所有的页卡，而后者是默认加载三个页卡。 * 后者在页卡数量超过三个的时候，滑动的时候就存在动态销毁和创建的过程 * 而前者不存在这个问题。 * 但下面如果继承的是FragmentStatePagerAdapter类的话，就会和PagerAdapter一样会动态销毁和创建。它还需要多创建两个方法 *  * */public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {private List<Fragment> fragList;private List<String> titleList;public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragList,List<String> titleList) {super(fm);// TODO Auto-generated constructor stubthis.fragList = fragList;this.titleList = titleList;}/* * 获取Fragment对象 * */@Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn fragList.get(arg0);}/* * 获取标题 * */@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn titleList.get(position);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fragList.size();}@Overridepublic Object instantiateItem(ViewGroup arg0, int arg1) {// TODO Auto-generated method stubreturn super.instantiateItem(arg0, arg1);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubsuper.destroyItem(container, position, object);}}

9. 监听器的使用：

修改MainActivity页面即可：

package com.example.viewpager;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Toast;// 添加监听器，监听页卡切换到多少页public class MainActivity extends FragmentActivity implements OnPageChangeListener{private List<View> viewList;private ViewPager pager;private PagerTabStrip tab;// 标题private List<String> titleList;private List<Fragment> fragList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                /*         * 通过View对象作为ViewPager的数据源         * */        // 先新建一个ViewList集合        viewList = new ArrayList<View>();        // 将布局转成View对象的方法：        View view1 = View.inflate(this, R.layout.view1, null);        View view2 = View.inflate(this, R.layout.view2, null);        View view3 = View.inflate(this, R.layout.view3, null);        View view4 = View.inflate(this, R.layout.view4, null);        // 将上面的View对象加入到ViewList集合中：        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        viewList.add(view4);                /*         * 通过Fragment作为ViewPager的数据源         * */        fragList = new ArrayList<Fragment>();        fragList.add(new fragment1());        fragList.add(new fragment2());        fragList.add(new fragment3());        fragList.add(new fragment4());                // 为ViewPager页卡设置标题：        titleList = new ArrayList<String>();        titleList.add("第一页");        titleList.add("第二页");        titleList.add("第三页");        titleList.add("第四页");                // 为PagerTabStrip设置一些属性        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化        tab.setBackgroundColor(Color.YELLOW);// 背景颜色        tab.setTextColor(Color.RED);// 文字颜色        tab.setDrawFullUnderline(false);// 去掉下面的长线        tab.setTabIndicatorColor(Color.GREEN);// 设置下面的小标线颜色                /*         * 配置适配器，如果数据源是List<View>的话，适配器用PagerAdapter。         * */        // 初始化ViewPager        pager = (ViewPager) findViewById(R.id.pager);        // 创建FragmentPagerAdapter的适配器        // 关于第一个参数fm，如果是以前用getFragmentManager()。        // 现在是import android.support.v4.app.FragmentManager;，所以用        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);        // ViewPager加载适配器        pager.setAdapter(adapter);        // 加载监听器        pager.setOnPageChangeListener(this);                    }@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// 从0开始计算的。Toast.makeText(this, "当前是第"+(arg0+1)+"个页面", Toast.LENGTH_SHORT).show();}    }

效果图：