android ViewPager控件实现手势滑动切换页签

1，主布局文件

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

    >

    <!-- 页签 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <TextView

            android:id="@+id/activity_viewpager_tab1_tv"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:textSize="30dp"

            android:gravity="center"

            android:text="页签1"/>

        <TextView

            android:id="@+id/activity_viewpager_tab2_tv"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:textSize="30dp"

            android:gravity="center"

            android:text="页签2"/>

        <TextView

            android:id="@+id/activity_viewpager_tab3_tv"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:textSize="30dp"

            android:gravity="center"

            android:text="页签3"/>

    </LinearLayout>

    <!-- 滑动选中动画 -->

    <ImageView

        android:id="@+id/cursor"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:scaleType="matrix"

        android:src="@drawable/tab_scoll_bar"

        />

    <!-- viewPager -->

    <android.support.v4.view.ViewPager

        android:id="@+id/activity_viewpager_vp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_weight="1.0"

        android:flipInterval="30"

        android:persistentDrawingCache="animation">

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

</LinearLayout>

 

2，子页面布局文件

<?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="@android:color/holo_red_light"

    >

</LinearLayout>

 

页签对应的布局文件简单地以填满不同颜色来演示效果，一共3个布局文件。

3，activity

package com.sonar.android.push.demo.getui.activities;

import android.app.Activity;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.os.Bundle;

import android.os.Handler;

import android.support.v4.view.ViewPager;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.TranslateAnimation;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;

import com.handmark.pulltorefresh.library.PullToRefreshBase;

import com.handmark.pulltorefresh.library.PullToRefreshListView;

import com.sonar.android.push.demo.getui.R;

import com.sonar.android.push.demo.getui.adapters.MyPagerAdapter;

import java.util.ArrayList;

import java.util.List;

/**

 * 使用PullToRefresh库实现下拉刷新和上拉加载更多

 * Created by Administrator on 2016/10/26.

 */

public class ViewPagerActivity extends Activity implements View.OnClickListener{

    ViewPager viewPager;

    TextView tab1;

    TextView tab2;

    TextView tab3;

    List<View> pageList = new ArrayList<>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.layout_activity_viewpager);

        setView();

        initView();

        setListener();

    }

    private void setView(){

        this.viewPager = (ViewPager)findViewById(R.id.activity_viewpager_vp);

        this.tab1 = (TextView)findViewById(R.id.activity_viewpager_tab1_tv);

        this.tab2 = (TextView)findViewById(R.id.activity_viewpager_tab2_tv);

        this.tab3 = (TextView)findViewById(R.id.activity_viewpager_tab3_tv);

    }

    private void initView(){

        //设置

        LayoutInflater layoutInflater = getLayoutInflater();

        pageList.add(layoutInflater.inflate(R.layout.layout_viewpager_page1,null));

        pageList.add(layoutInflater.inflate(R.layout.layout_viewpager_page2,null));

        pageList.add(layoutInflater.inflate(R.layout.layout_viewpager_page3,null));

        this.viewPager.setAdapter(new MyPagerAdapter(pageList));

        this.viewPager.setCurrentItem(0);

        InitImageView();

    }

    private void setListener() {

        this.tab1.setOnClickListener(this);

        this.tab2.setOnClickListener(this);

        this.tab3.setOnClickListener(this);

        this.viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()){

            case R.id.activity_viewpager_tab1_tv:

                changePage(0);

                break;

            case R.id.activity_viewpager_tab2_tv:

                changePage(1);

                break;

            case R.id.activity_viewpager_tab3_tv:

                changePage(2);

                break;

            default:

                break;

        }

    }

    private void changePage(int pageNo){

        viewPager.setCurrentItem(pageNo);

    }

    private ImageView cursor;// 动画图片

    private int offset = 0;// 动画图片偏移量

    private int currIndex = 0;// 当前页卡编号

    private int bmpW;// 动画图片宽度

    /**

     * 初始化动画

     */

    private void InitImageView() {

        cursor = (ImageView) findViewById(R.id.cursor);

        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.alipay_icon)

                .getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();

        getWindowManager().getDefaultDisplay().getMetrics(dm);

        int screenW = dm.widthPixels;// 获取分辨率宽度

        offset = (screenW / 3 - bmpW) / 2;// 计算偏移量

        Matrix matrix = new Matrix();

        matrix.postTranslate(offset, 0);

        cursor.setImageMatrix(matrix);// 设置动画初始位置

    }

    /**

     * 页卡切换监听

     */

    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        int one = offset * 2 + bmpW;// 页卡1 ->
页卡2
偏移量

        int two = one * 2;// 页卡1 ->
页卡3
偏移量

        @Override

        public void onPageSelected(int arg0) {

            Animation animation = null;

            switch (arg0) {

                case 0:

                    if (currIndex == 1) {

                        animation = new TranslateAnimation(one, 0, 0, 0);

                    } else if (currIndex == 2) {

                        animation = new TranslateAnimation(two, 0, 0, 0);

                    }

                    break;

                case 1:

                    if (currIndex == 0) {

                        animation = new TranslateAnimation(offset, one, 0, 0);

                    } else if (currIndex == 2) {

                        animation = new TranslateAnimation(two, one, 0, 0);

                    }

                    break;

                case 2:

                    if (currIndex == 0) {

                        animation = new TranslateAnimation(offset, two, 0, 0);

                    } else if (currIndex == 1) {

                        animation = new TranslateAnimation(one, two, 0, 0);

                    }

                    break;

            }

            currIndex = arg0;

            animation.setFillAfter(true);// True:图片停在动画结束位置

            animation.setDuration(300);

            cursor.startAnimation(animation);

        }

        @Override

        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override

        public void onPageScrollStateChanged(int arg0) {

        }

    }

}

 

4，viewPager适配器

package com.sonar.android.push.demo.getui.adapters;

import android.os.Parcelable;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

import android.view.ViewGroup;

import java.util.List;

/**

 * Created by Administrator on 2016/10/26.

 */

public class MyPagerAdapter extends PagerAdapter{

    List<View> pageList;

    public MyPagerAdapter(List<View> pageList) {

        this.pageList = pageList;

    }

    @Override

    public void startUpdate(ViewGroup container) {

    }

    @Override

    public void destroyItem(View container, int position, Object object) {

        ((ViewPager)container).removeView(pageList.get(position));

    }

    @Override

    public Object instantiateItem(View container, int position) {

        ((ViewPager) container).addView(pageList.get(position), 0);

        return pageList.get(position);

    }

    @Override

    public Parcelable saveState() {

        return null;

    }

    @Override

    public void restoreState(Parcelable state, ClassLoader loader) {

    }

    @Override

    public int getCount() {

        return pageList.size();

    }

    @Override

    public boolean isViewFromObject(View view, Object object) {

        return view == object;

    }

}

 

5，效果图