Android ViewPager初探：讓頁面滑動起來

下一篇：《Android ViewPager再探：增加滑動指示條》

 

ViewPager需要用到適配器PagerAAdapter，以下四個函數需要重寫：

instantiateItem(ViewGroup container, int position)：創建指定位置的頁面視圖。適配器增加即將創建的View視圖到這里給定的container中。
destroyItem(ViewGroup container, int position, Object object)：移除一個給定位置的頁面。
getCount()：返回當前有效視圖的個數。
isViewFromObject(View view, Object object)：判斷instantiateItem(ViewGroup, int)函數所返回來的Key與一個頁面視圖是否是代表的同一個視圖。

 

主界面的布局只要加上

<android.support.v4.view.ViewPager />

即可：

activity_main.xml：

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

 

決定ViewPager有3個頁面，每個頁面都要寫布局：

以第一個first_page.xml為例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="這是第一頁"
        android:textSize="20sp"/>

</RelativeLayout>

 

MainActivity需要在onCreate里對其初始化，並調用適配器：

package com.example.hopecapital.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

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


public class MainActivity extends Activity {
    private View first,second,third;
    private ViewPager viewPager;//對應 <android.support.v4.view.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();
        first = inflater.inflate(R.layout.first_page,null);
        second = inflater.inflate(R.layout.second_page,null);
        third = inflater.inflate(R.layout.third_page,null);

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

        /*適配器部分*/
        NewPagerAdapter pagerAdapter = new NewPagerAdapter(viewList);
        viewPager.setAdapter(pagerAdapter);
    }

}

 

最后也是最重要的，繼承自PagerAdapter的適配器：

NewPagerAdapter.java：

package com.example.hopecapital.myapplication;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by LT on 2015/7/27.
 */
public class NewPagerAdapter extends PagerAdapter{
    public List<View> viewList;

    public NewPagerAdapter(List<View> viewList){
        this.viewList = viewList;
    }

    /*下面四個函數是一定要重寫的*/
    @Override
    public boolean isViewFromObject(View arg0,Object arg1){
    //判斷instantiateItem(ViewGroup, int)函數所返回來的Key與一個頁面視圖是否是代表的同一個視圖(判斷key）
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }

    @Override
    public int getCount() {//返回要滑動的VIew的個數
        // TODO Auto-generated method stub
        return viewList.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position,
                            Object object) {//從當前container中刪除指定位置（position）的View;
        // TODO Auto-generated method stub
        container.removeView(viewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
    //實例化：將當前視圖添加到container中，並返回當前View（傳送key）
        // TODO Auto-generated method stub
        container.addView(viewList.get(position));

        return viewList.get(position);
    }
}

 

以上，便完成了簡單的ViewPager。