学步园

1.
ViewPage 知识概要

    Android的左右滑动在实际编程经常能用到，比如查看多张图片，左右切换tab页。自Android 3.0之后的SDK中提供了android-support-v4包用以实现版本兼容，让老版本系统下的应用通过加入jar包实现扩展，其中有一个可以实现左右滑动的类ViewPager。

1) 查看ViewPage的api文档

可以看出它是继承ViewGroup，它是一个布局管理器允许用户向左或者向右滑动，每个页面都可以装载一些数据，它需要去实现一个pagerAdapter 来实现页面的显示

2) 查看ViewPage的 setAdapter()方法:设置一个PagerAdapter适配器用来支持所需要的页面的视图

3) 查看 PagerAdapter 的api文档

这是一个抽象类,这个个基类提供了适配器来构成ViewPager的页面，通常都是要实现指定的接口，比如FragmentPagerAdapter 或者 FragmentStatePagerAdapter.
当你实现了一个PagerAdapter 适配器，你必须要要重写至少以下的几种方法：

    1) instantiateItem(ViewGroup, int)：  初始化这些选项

    2) destroyItem(ViewGroup, int, Object)： 销毁这些选项

    3) getCount(): 得到PagerAdapter 这些数目

    4) isViewFromObject(View, Object):
判断View与Object是否相等。

2. 实现案例：利用ViewPager实现页面的左右滑动

1) 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 策划过程中显示每一页的标题 -->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTitleStrip>
    </android.support.v4.view.ViewPager>

</LinearLayout>

2) 三个 tab 页面

tab1.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" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

tab2.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" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

tab3.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" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="343dp"
        android:layout_height="wrap_content" />

</LinearLayout>

3) 程序主要代码

public class Main extends Activity {

    private ViewPager viewPager;
    private PagerTitleStrip pagerTitleStrip; // 表示滑动的每一页的标题
    private List<View> list; // 表示装载滑动的布局
    private List<String> titleList; // 表示滑动的每一页的标题

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();

        // 动态加载布局
        View view1 = LayoutInflater.from(Main.this).inflate(R.layout.tab1, null);
        View view2 = LayoutInflater.from(Main.this).inflate(R.layout.tab2, null);
        View view3 = LayoutInflater.from(Main.this).inflate(R.layout.tab3, null);

        // 把动态布局装载到List<View>中
        list = new ArrayList<View>();
        list.add(view1);
        list.add(view2);
        list.add(view3);

        // 把动态布局的标题装载到List<String>中
        titleList = new ArrayList<String>();
        titleList.add("title1");
        titleList.add("title2");
        titleList.add("title3");

        viewPager.setAdapter(new MyAdapter());

    }

    class MyAdapter extends PagerAdapter {

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // TODO Auto-generated method stub

            ((ViewPager) container).addView(list.get(position));
            return list.get(position);
        }

        /*
         * 从ViewPager的实现过程中，可以发现，当我们在向左或者向右滑动的过程中，实际是在往PagerAdapter容器
         * 中添加动态的布局文件，所以这边需要销毁的目标应该是要销毁的动态布局文件
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO Auto-generated method stub
            ((ViewPager) container).removeView(list.get(position));
        }

        // ViewPager中的包含的List<View>布局的个数
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }

        /*
         * @see
         * android.support.v4.view.PagerAdapter#isViewFromObject(android.view
         * .View, java.lang.Object) 通过调用：instantiateItem(ViewGroup, int)
         * 决定是否一个page视图是否去关联特殊的对象，对于一个正常运行的PagerAdapter 这个方法是需要被执行的。
         * 如果这个方法返回true表示，表示视图view是有关联到Object这个对象的
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            // TODO Auto-generated method stub
            return view == object;
        }

        // 获得每一个pager的标题名称
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return titleList.get(position);
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    private void initComponent() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle);

    }

}

3. 程序案例的实现