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>