ViewPager基础入门

效果图：

实现了三个view间的相互滑动

第一个VIEW向第二个VIEW滑动                       第二个VIEW向第三个VIEW滑动

                              

一、新建项目，引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换.

1.在主布局文件里加入：

其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件，要将其放到想要滑动的位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

2.新建三个layout,用于滑动切换视图

布局代码分别如下：

layout_one.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#edf2e70e">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是第一个布局"
        android:textColor="#da0a34"
        android:textSize="18dip"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

　　layout_two.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2ce297">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是第二个布局"
        android:textSize="18dip"
        android:textColor="#be21d2"
        android:layout_gravity="center_horizontal"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="195dp" />

</RelativeLayout>

　　layout_three.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2f8bc9">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是第三个布局"
        android:textSize="18dip"
        android:textColor="#ffffff"
        android:layout_gravity="center_horizontal"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="206dp" />

</RelativeLayout>

　二.代码实战

package com.nyl.viewpager.activity.viewpager;

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.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

    //view1,view2,view3对应我们的三个layout,既layout_one.xml;layout_two.xml;layout_three.xml
    private View view1,view2,view3;

    //viewList是一个View数组，盛装上面三个View
    private List<View> viewList;

    //对应的viewPager
    private ViewPager viewPager;

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

        //获取控件
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater = getLayoutInflater();
        view1 = inflater.inflate(R.layout.layout_one,null);
        view2 = inflater.inflate(R.layout.layout_two,null);
        view3 = inflater.inflate(R.layout.layout_three,null);

        //将要分布显示的view装入数组中
        viewList = new ArrayList<View>();
       //将实例化的view1,view2,view3添加的viewList中
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override
            public boolean  isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            //返回要滑动的View的个数
                @Override
            public int getCount() {
                return viewList.size();
            }

            //从当前container（容器）中删除指定位置（position）的View
            @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }

            //instantiateItem()做了两件事，第一：将当前视图添加到container中，第二：返回当前View
            @Override
        public Object instantiateItem(ViewGroup container, int position){
                container.addView(viewList.get(position));
                return viewList.get(position);
            }
            };
        viewPager.setAdapter(pagerAdapter);

    }
}