android ViewPager 使用详解

ViewPager 使用详解

使用ViewPagerg构建一个视图组，实现对视图的侧滑切换。ViewPager是一个V4的组件，在XML中通过android.support.v4.view.ViewPager的方式调用。

工程目录：

效果图：

MainActivity ：

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {
    private View view1, view2, view3;
    private ViewPager viewPager; // 对应的viewPager
    private List<View> viewList;// view数组
    private ArrayList<String> list;
    private PagerTabStrip pagerTabStrip;// 标题栏

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        view1 = getLayoutInflater().inflate(R.layout.layout1, null);
        view2 = getLayoutInflater().inflate(R.layout.layout2, null);
        view3 = getLayoutInflater().inflate(R.layout.layout3, null);

        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
        // 改变下划线的颜色
        pagerTabStrip
                .setTabIndicatorColorResource(android.R.color.holo_green_dark);

        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        list = new ArrayList<String>();
        list.add("1");
        list.add("2");
        list.add("3");

        // 定义适配器
        PagerAdapter pagerAdapter = new PagerAdapter() {
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                // 1、必须重写。
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                // 2、必须重写。返回要滑动的VIew的个数
                return viewList.size(); 
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                // TODO Auto-generated method stub
                // 3、必须重写。从当前container中删除指定位置（position）的View
                container.removeView(viewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                // TODO Auto-generated method stub
                // 4、必须重写。将当前视图添加到container中，第二：返回当前View
                container.addView(viewList.get(position));
                return viewList.get(position);
            }

            @Override
            public CharSequence getPageTitle(int position) {
                // 使用标题栏必须重写。根据位置返回当前所对应的标题
                return list.get(position);
            }
        };
        // 添加适配器到viewPager
        viewPager.setAdapter(pagerAdapter);
    }
}

activity_mian.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.example.testviewpage_1.MainActivity" >

    <!-- 要滑动的视图组件 -->

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

        <!-- 标题栏  将PagerTabStrip作为ViewPager的一个子控件直接插入其中 -->

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

</RelativeLayout>

view1:

<?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:background="#330044">


</LinearLayout>

view2:

<?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:background="#990077" >


</LinearLayout>

view3:

<?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:background="#772255">


</LinearLayout>