ViewPager实例

来源：互联网发布：天敏智能网络机顶盒d6 编辑：程序博客网时间：2024/06/05 07:51

前言：本文主要目的是记录学习内容，如写的不好请多多包涵。

一.效果

1.实现滑动切换页面。

2.实现指示器，当页面切换时指示器也会改变位置。

3.当点击页面1、页面2、页面3时跳转到对于页面。

二.实现滑动切换页面。

相关知识：ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view。ViewPager相当于一个容器，可多个view装在到其中，实现容器内view切换效果。ps:如使用eclipse开发可能需导入android support v4扩展包。可先到最后看布局文件代码和java代码。最后会上传全部代码，开发软件为Android Studio。

实现步骤：

1.在布局文件声明ViewPager。

2. 创建3个xml文件（每个页面的相应布局文件），并加载到ArrayList<View> vList中。（vList在下一步使用到）。

3.实现继承于PagerAdapter的适配器，供ViewPager使用。

1.布局文件

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

<pre name="code" class="java">    private ViewPager vPager;    private ImageView cursor;    private Button btn1;    private Button btn2;    private Button btn3;    private List<View> vList;    private View page1,page2,page3; //页面    private int offset; //偏移量    private int curLength; //游标长度    private int index; //当前页号

3.第一个页面的布局文件，其它两个类似，此布局文件只是设置了某种图片为背景，如需实现更复杂的布局可添加相应代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@drawable/p1"    ></LinearLayout>

4.java代码

    private void setViewPager(){        vPager = (ViewPager)findViewById(R.id.vp);        LayoutInflater  lInflater = getLayoutInflater();        page1 = lInflater.inflate(R.layout.page1,null);        page2 = lInflater.inflate(R.layout.page2,null);        page3 = lInflater.inflate(R.layout.page3,null);        vList = new ArrayList<View>();        vList.add(page1);        vList.add(page2);        vList.add(page3);        PagerAdapter myAdapter = new PagerAdapter() {            @Override            public int getCount() {                return vList.size();            }            @Override            public boolean isViewFromObject(View view, Object o) {                return view==o;            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(vList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(vList.get(position));                return vList.get(position);            }        };        vPager.setAdapter(myAdapter);    }

首先，通过LayoutInflater将三个页面的布局文件转换为View类型。再将page1,page2,page3这三个View类型的变量添加到vList中。

下一步为，创建适配器(其用于实现ViewPager的效果)，适配器必须重载父类的四个函数：getCount,isViewFromObject,destroyItem,instantiateItem.

getCount中需返回ViewPager中页面的个数，所以此处返回vList.size()

destroyItem:ViewPager销毁页面时调用。

instantiateItem:ViewPager创建页面时调用。

isViewFromObject::用于判断pager的一个View是否与instentiateItem方法返回的object有关联。

函数内的代码大家应该大概能看明白，我就不多说了。到此为止已实现第一个功能。

2.实现指示器

实现步骤：

1.布局文件中声明指示器的图片。

2.初始化指示器的位置。

3.为ViewPager设置onPageChangeListener,在其内实现指示器移动的功能。

布局文件：

    <ImageView        android:id="@+id/IVCursor"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:layout_below="@id/linearLayout1"        android:src="@drawable/a"/>

初始化指示器位置的代码：

    private void initCursor(){        cursor = (ImageView)findViewById(R.id.IVCursor);        curLength = BitmapFactory.decodeResource(getResources(),R.drawable.a).getWidth(); //得到指示器的长度        DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW = dm.widthPixels; //width方向的分辨率        offset = (screenW/vList.size()-curLength) / 2; //计算偏移量        Matrix matrix = new Matrix();        matrix.postTranslate(offset, 0);        cursor.setImageMatrix(matrix);    }

备注已大概说明白，我就不多说。此段代码的作用为让指示器定位于“页面一”的下方

3.为ViewPager设置onPageChangeListener,在其内实现指示器移动的功能。

    private void setListenerForViewPager(){        final int second = offset*2 + curLength; //第二个页面的偏移量        final int third = second*2; //第三个页面的偏移量        ViewPager.OnPageChangeListener myPageChangeListener = new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int i, float v, int i1) {            }            @Override            public void onPageSelected(int i) {                Animation animation = null;                switch (i){                    case 0:                         if (index==1){                            animation = new TranslateAnimation(second,0,0,0);                        }else if (index == 2){                            animation = new TranslateAnimation(third,0,0,0);                        }                        break;                    case 1:                        if (index==0){                            animation = new TranslateAnimation(offset,second,0,0);                        }else if (index == 2){                            animation = new TranslateAnimation(third,second,0,0);                        }                        break;                    case 2:                        if (index==1){                            animation = new TranslateAnimation(second,third,0,0);                        }else if (index == 0){                            animation = new TranslateAnimation(offset,third,0,0);                        }                        break;                }                index = i;                animation.setFillAfter(true); //指示器停留在animation效果后的位置                animation.setDuration(300); //持续时间                cursor.startAnimation(animation);            }

此处主要用到Animation的知识移动指示器。到此处，已实现指示器移动的功能。

三、当点击页面1、页面2、页面3时跳转到对于页面。

实现步骤：

1.布局文件声明3个Button控件。

2.为控件设置监听器，在监听器中实现相关功能。

布局文件

        <Button            android:id="@+id/btn1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面1"            android:textColor="#000000"            android:textSize="22.0dip" />        <Button            android:id="@+id/btn2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面2"            android:textColor="#000000"            android:textSize="22.0dip" />        <Button            android:id="@+id/btn3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面3"            android:textColor="#000000"            android:textSize="22.0dip" />

2.实现代码

    private void setListenerForButton(){        btn1 = (Button)findViewById(R.id.btn1);        btn2 = (Button)findViewById(R.id.btn2);        btn3 = (Button)findViewById(R.id.btn3);        View.OnClickListener btnListener = new View.OnClickListener() {            @Override            public void onClick(View v) {                switch (v.getId()){                    case R.id.btn1:                        vPager.setCurrentItem(0); //跳转到相应的页面                        break;                    case R.id.btn2:                        vPager.setCurrentItem(1);                        break;                    case R.id.btn3:                        vPager.setCurrentItem(2);                        break;                }            }        };        btn1.setOnClickListener(btnListener);        btn2.setOnClickListener(btnListener);        btn3.setOnClickListener(btnListener);    }}

此处主要是通过ViewPager的setCurrenItem(int Position)函数实现跳转效果。

布局文件代码：

<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" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        />    <ImageView        android:id="@+id/IVCursor"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:layout_below="@id/linearLayout1"        android:src="@drawable/a"/>    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="100.0dip"        android:background="#FFFFFF"        android:layout_alignParentTop="true">        <Button            android:id="@+id/btn1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面1"            android:textColor="#000000"            android:textSize="22.0dip" />        <Button            android:id="@+id/btn2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面2"            android:textColor="#000000"            android:textSize="22.0dip" />        <Button            android:id="@+id/btn3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页面3"            android:textColor="#000000"            android:textSize="22.0dip" />    </LinearLayout></RelativeLayout>

java代码：

package com.example.jc.viewpager_cursor;import android.content.DialogInterface;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.graphics.drawable.Animatable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.ActionBarActivity;import android.os.Bundle;import android.util.DisplayMetrics;import android.util.Log;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;import java.util.zip.Inflater;public class MainActivity extends ActionBarActivity {    private ViewPager vPager;    private ImageView cursor;    private Button btn1;    private Button btn2;    private Button btn3;    private List<View> vList;    private View page1,page2,page3; //页面    private int offset; //偏移量    private int curLength; //游标长度    private int index; //当前页号    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        setViewPager();        initCursor();        setListenerForViewPager();        setListenerForButton();    }    //设置ViewPager    private void setViewPager(){        vPager = (ViewPager)findViewById(R.id.vp);        LayoutInflater  lInflater = getLayoutInflater();        page1 = lInflater.inflate(R.layout.page1,null);        page2 = lInflater.inflate(R.layout.page2,null);        page3 = lInflater.inflate(R.layout.page3,null);        vList = new ArrayList<View>();        vList.add(page1);        vList.add(page2);        vList.add(page3);        PagerAdapter myAdapter = new PagerAdapter() {            @Override            public int getCount() {                return vList.size();            }            @Override            public boolean isViewFromObject(View view, Object o) {                return view==o;            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(vList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(vList.get(position));                return vList.get(position);            }        };        vPager.setAdapter(myAdapter);    }    //初始化指示器位置    private void initCursor(){        cursor = (ImageView)findViewById(R.id.IVCursor);        curLength = BitmapFactory.decodeResource(getResources(),R.drawable.a).getWidth(); //得到指示器的长度        DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW = dm.widthPixels; //width方向的分辨率        offset = (screenW/vList.size()-curLength) / 2; //计算偏移量        Matrix matrix = new Matrix();        matrix.postTranslate(offset, 0);        cursor.setImageMatrix(matrix);    }    //为ViewPager设置相关监听器    private void setListenerForViewPager(){        final int second = offset*2 + curLength; //第二个页面的偏移量        final int third = second*2; //第三个页面的偏移量        ViewPager.OnPageChangeListener myPageChangeListener = new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int i, float v, int i1) {            }            @Override            public void onPageSelected(int i) {                Animation animation = null;                switch (i){                    case 0:                        if (index==1){                            animation = new TranslateAnimation(second,0,0,0);                        }else if (index == 2){                            animation = new TranslateAnimation(third,0,0,0);                        }                        break;                    case 1:                        if (index==0){                            animation = new TranslateAnimation(offset,second,0,0);                        }else if (index == 2){                            animation = new TranslateAnimation(third,second,0,0);                        }                        break;                    case 2:                        if (index==1){                            animation = new TranslateAnimation(second,third,0,0);                        }else if (index == 0){                            animation = new TranslateAnimation(offset,third,0,0);                        }                        break;                }                index = i;                animation.setFillAfter(true); //指示器停留在animation效果后的位置                animation.setDuration(300); //持续时间                cursor.startAnimation(animation);            }            @Override            public void onPageScrollStateChanged(int i) {            }        };        vPager.setOnPageChangeListener(myPageChangeListener);    }    private void setListenerForButton(){        btn1 = (Button)findViewById(R.id.btn1);        btn2 = (Button)findViewById(R.id.btn2);        btn3 = (Button)findViewById(R.id.btn3);        View.OnClickListener btnListener = new View.OnClickListener() {            @Override            public void onClick(View v) {                switch (v.getId()){                    case R.id.btn1:                        vPager.setCurrentItem(0); //跳转到相应的页面                        break;                    case R.id.btn2:                        vPager.setCurrentItem(1);                        break;                    case R.id.btn3:                        vPager.setCurrentItem(2);                        break;                }            }        };        btn1.setOnClickListener(btnListener);        btn2.setOnClickListener(btnListener);        btn3.setOnClickListener(btnListener);    }}

项目下载地址：

DEMO代码

1 0