ViewPager 詳解（一）---基本入門

前言：這兩天研究研究ViewPager滾動功能，現在很多的app都有用到這個功能，我們的大蝦米也有這個模塊。要研究就徹底的研究研究，我從不滿足於一個功能只是簡單的應用，要學就學的徹底，所以我打算將ViewPager 分幾篇寫，研究的哪個程度就寫到哪個程度吧。今天是第一篇，基本入門篇 。

相關文章：

1、《ViewPager 詳解（一）---基本入門》

2、《ViewPager 詳解（二）---詳解四大函數》

3、《ViewPager 詳解（三）---PagerTabStrip與PagerTitleStrip添加標題欄的異同》

4、《ViewPager 詳解（四）----自主實現滑動指示條》

5、《ViewPager 詳解（五）-----使用Fragment實現ViewPager滑動》

首先讓大家有個全局的認識，直接上個項目，看看僅僅通過這幾行代碼，竟然就能完成如此強悍的功能。下篇再結合API仔細講講爲什麼要這麼寫。

效果圖：

實現了三個view間的相互滑動

                     第一個VIEW向第二個VIEW滑動　　　　　  第二個VIEW向第三個VIEW滑動

   

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

ViewPager。它是google SDk中自帶的一個附加包的一個類，可以用來實現屏幕間的切換。

1.在主佈局文件里加入

<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" />

</RelativeLayout>

其中 <android.support.v4.view.ViewPager /> 是ViewPager對應的組件，要將其放到想要滑動的位置

2、新建三個layout，用於滑動切換的視圖

從效果圖中也可以看到，我們的三個視圖都非常簡單，裏面沒有任何的控件，大家當然可以往裏添加各種控件，但這裏是個DEMO，只詳解原理即可，所以我這裏僅僅用背景來區別不用layout佈局。

佈局代碼分別如下：

layout1.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:background="#ffffff"
    android:orientation="vertical" >


</LinearLayout>

layout2.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:background="#ffff00"
    android:orientation="vertical" >


</LinearLayout>

layout3.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:background="#ff00ff"
    android:orientation="vertical" >


</LinearLayout><span style="color:#660000;">
</span>

二、代碼實戰

先上整體代碼，然後逐步講解。

package com.example.testviewpage_1;
/**
 * @author  harvic
 * @date 2014.8.9
 */
import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

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 {

    private View view1, view2, view3;
    private ViewPager viewPager;  //對應的viewPager

    private List<View> viewList;//view數組


    @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.layout1, null);
        view2 = inflater.inflate(R.layout.layout2,null);
        view3 = inflater.inflate(R.layout.layout3, null);

        viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數組中
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);


        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return viewList.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                // TODO Auto-generated method stub
                container.removeView(viewList.get(position));
            }

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


                return viewList.get(position);
            }
        };


        viewPager.setAdapter(pagerAdapter);

    }


}

代碼量很小，全部放在了OnCreate()函數中。

1、先看聲明的變量的意義：

private View view1, view2, view3;
private List<View> viewList;//view數組
private ViewPager viewPager;  //對應的viewPager

首先viewPager對應 <android.support.v4.view.ViewPager/>控件。

view1,view2 ,view3對應我們的三個layout，即layout1.xml,layout2.xml,layout3.xml

viewList是一個View數組，盛裝上面的三個VIEW

2、接下來是他們的初始化過程：

viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater=getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3, null);

viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數組中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);

初始化過程難度不大，就是將資源與變量聯繫起來佈局，最後將實例化的view1,view2,view3添加到viewList中

3、PageAdapter——PageView的適配器

適配器這個東東想必大家都不莫生，在ListView中也有適配器，listView通過重寫GetView（）函數來獲取當前要加載的Item。而PageAdapter不太相同，畢竟PageAdapter是單個VIew的合集。

PageAdapter 必須重寫的四個函數：

• boolean isViewFromObject(View arg0, Object arg1)
• int getCount() 
• void destroyItem(ViewGroup container, int position,Object object)
• Object instantiateItem(ViewGroup container, int position)

先看看各個函數，我們上面都做了什麼吧：

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return viewList.size();
}

getCount():返回要滑動的VIew的個數

@Override
public void destroyItem(ViewGroup container, int position,
        Object object) {
    // TODO Auto-generated method stub
    container.removeView(viewList.get(position));
}

destroyItem（）：從當前container中刪除指定位置（position）的View;

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


        return viewList.get(position);
    }
};

instantiateItem()：做了兩件事，第一：將當前視圖添加到container中，第二：返回當前View

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-generated method stub
    return arg0 == arg1;
}

isViewFromObject():對於這個函數就先不做講解，大家目前先知道它要這樣重寫就行了，後面我們會對它進行改寫。

下一篇，我將仔細講解這幾個函數的意義，與有關Key的知識，當然最後也會有個例子給大家。這篇就到這了。

源碼地址：http://download.csdn.net/detail/harvic880925/7733249

請大家尊重原創者版權，轉載請標明出處：http://blog.csdn.net/harvic880925/article/details/38453725  萬分感激！！！！！