ViewPager实例

最新推荐文章于 2020-08-08 20:53:14 发布

静夜轻风

最新推荐文章于 2020-08-08 20:53:14 发布

阅读量538

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/qq_17362885/article/details/49705551

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

一.效果

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