ViewPager的简单使用

1、布局文件


a、主布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical"
  7.     tools:context="lpc.com.animation2demo.MainActivity">
  9.     <LinearLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="48dp">
  13.         <TextView
  14.             android:id="@+id/tv1"
  15.             android:text="苹果"
  16.             android:gravity="center"
  17.             android:layout_weight="1"
  18.             android:layout_width="match_parent"
  19.             android:layout_height="match_parent" />
  22.         <TextView
  23.             android:id="@+id/tv2"
  24.             android:text="香蕉"
  25.             android:gravity="center"
  26.             android:layout_weight="1"
  27.             android:layout_width="match_parent"
  28.             android:layout_height="match_parent" />
  31.         <TextView
  32.             android:text="梨"
  33.             android:id="@+id/tv3"
  34.             android:gravity="center"
  35.             android:layout_weight="1"
  36.             android:layout_width="match_parent"
  37.             android:layout_height="match_parent" />
  38.     </LinearLayout>
  41.     <ImageView
  42.         android:id="@+id/iv"
  43.         android:src="@mipmap/line"
  44.         android:scaleType="matrix"
  45.         android:layout_width="match_parent"
  46.         android:layout_height="wrap_content" />
  48.     <android.support.v4.view.ViewPager
  49.         android:id="@+id/viewPager1"
  50.         android:layout_weight="1"
  51.         android:layout_width="match_parent"
  52.         android:flipInterval="30"
  53.         android:layout_gravity="center"
  54.         android:persistentDrawingCache="animation"
  55.         android:layout_height="0dp">
  57.     </android.support.v4.view.ViewPager>
  59. </LinearLayout>


b、子布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical" android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  6.     <ImageView
  7.         android:background="@drawable/a1"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent" />
  10. </LinearLayout>

另外两子布局类似，只是图片和id不一样

2、主Java文件


  1. package lpc.com.animation2demo;
  3. import android.graphics.BitmapFactory;
  4. import android.graphics.Matrix;
  5. import android.os.Bundle;
  6. import android.support.v4.view.ViewPager;
  7. import android.support.v7.app.AppCompatActivity;
  8. import android.util.DisplayMetrics;
  9. import android.view.LayoutInflater;
  10. import android.view.View;
  11. import android.view.animation.Animation;
  12. import android.view.animation.TranslateAnimation;
  13. import android.widget.ImageView;
  14. import android.widget.TextView;
  16. import java.util.ArrayList;
  18. public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
  20.     private TextView tv1; //文本对象1
  21.     private TextView tv2; //文本对象2
  22.     private TextView tv3; //文本对象3
  23.     private ImageView iv; //图片对象（用于移动条）
  24.     private ViewPager vp; //Viewpager对象
  26.     private ArrayList<View> viewArrayList; //创建一个View储存数组
  27.     private int offset = 0; //移动条图片的偏移量
  28.     private int currentIndex = 0; //当前页面
  29.     private int bmpWidth ; //图片宽度
  30.     private int one = 0; //移动条滑动一页的距离
  31.     private int two = 0; //滑动条移动两页的距离
  34.     @Override
  35.     protected void onCreate(Bundle savedInstanceState) {
  36.         super.onCreate(savedInstanceState);
  37.         setContentView(R.layout.activity_main);
  39.         initView();
  40.     }
  42.     private void initView() {
  44.        tv1 = (TextView) findViewById(R.id.tv1);
  45.        tv2 = (TextView) findViewById(R.id.tv2);
  46.        tv3 = (TextView) findViewById(R.id.tv3);
  47.         iv = (ImageView) findViewById(R.id.iv);
  48.         vp = (ViewPager) findViewById(R.id.viewPager1);
  50.         //下划线动画的相关设置：
  51.         bmpWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.line).getWidth();// 获取图片宽度
  52.         DisplayMetrics dm = new DisplayMetrics();
  53.         getWindowManager().getDefaultDisplay().getMetrics(dm);
  54.         int screenW = dm.widthPixels;// 获取分辨率宽度
  55.         offset = (screenW / 3 - bmpWidth) / 2;// 计算偏移量
  56.         Matrix matrix = new Matrix();
  57.         matrix.postTranslate(offset, 0);
  58.         iv.setImageMatrix(matrix);// 设置动画初始位置
  59.         //移动的距离
  60.         one = offset * 2 + bmpWidth;// 移动一页的偏移量,比如1->2,或者2->3
  61.         two = one * 2;// 移动两页的偏移量,比如1直接跳3
  64.         //往ViewPager填充View，同时设置点击事件与页面切换事件
  66.         viewArrayList = new ArrayList<View>();
  67.         LayoutInflater inflater = getLayoutInflater();
  68.         viewArrayList.add(inflater.inflate(R.layout.view1,null,false));
  69.         viewArrayList.add(inflater.inflate(R.layout.view2,null,false));
  70.         viewArrayList.add(inflater.inflate(R.layout.view3,null,false));
  72.         vp.setAdapter(new MyAdapter(viewArrayList));
  73.         vp.setCurrentItem(0); //设置ViewPager当前页，从0开始算
  75.         tv1.setOnClickListener(this);
  76.         tv2.setOnClickListener(this);
  77.         tv3.setOnClickListener(this);
  79.         vp.addOnPageChangeListener(this);
  81.     }
  83.     @Override
  84.     public void onClick(View view) {
  85.         switch (view.getId()){
  86.             case R.id.tv1:
  87.                 vp.setCurrentItem(0);
  88.                 break;
  89.             case R.id.tv2:
  90.                 vp.setCurrentItem(1);
  91.                 break;
  92.             case R.id.tv3:
  93.                 vp.setCurrentItem(2);
  94.                 break;
  95.         }
  96.     }
  98.     @Override
  99.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  101.     }
  103.     @Override
  104.     public void onPageSelected(int position) {
  106.         Animation animation = null;
  107.         switch (position){
  108.             case 0:
  109.                 if (currentIndex == 1){
  110.                     animation = new TranslateAnimation(one,0,0,0);
  111.                 }else if (currentIndex == 2){
  112.                     animation = new TranslateAnimation(two,0,0,0);
  113.                 }
  114.                 break;
  115.             case 1:
  116.                 if (currentIndex == 0){
  117.                     animation = new TranslateAnimation(offset,one,0,0);
  118.                 }else if (currentIndex == 2){
  119.                     animation = new TranslateAnimation(two,one,0,0);
  120.                 }
  121.                 break;
  122.             case 2:
  123.                 if (currentIndex == 0){
  124.                     animation = new TranslateAnimation(offset,two,0,0);
  125.                 }else if (currentIndex == 1){
  126.                     animation = new TranslateAnimation(one,two,0,0);
  127.                 }
  128.                 break;
  129.         }
  130.         currentIndex = position;
  131.         animation.setFillAfter(true);// true表示图片停在动画结束位置
  132.         animation.setDuration(300); //设置动画时间为300毫秒
  133.         iv.startAnimation(animation);//开始动画
  135.     }
  137.     @Override
  138.     public void onPageScrollStateChanged(int state) {
  140.     }
  141. }

3、适配器文件


  1. package lpc.com.animation2demo;
  3. import android.support.v4.view.PagerAdapter;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  7. import java.util.ArrayList;
  9. /**
  10.  * Created by Administrator on 2016/3/16.
  11.  * 适配器
  12.  */
  13. public class MyAdapter extends PagerAdapter {
  15.     //创建一个对象数组 存储View
  16.     private ArrayList<View> viewArrayList;
  18.     //空构造函数
  19.     public MyAdapter() {
  20.     }
  22.     //初始化对象数组
  23.     public MyAdapter(ArrayList<View> viewArrayList) {
  24.         this.viewArrayList = viewArrayList;
  25.     }
  27.     //获取对象数组的大小
  28.     @Override
  29.     public int getCount() {
  30.         return viewArrayList.size();
  31.     }
  32.     //将视图转化成对象
  33.     @Override
  34.     public boolean isViewFromObject(View view, Object object) {
  35.         return view == object;
  36.     }
  38.     //获取选定 对象数组并将其添加到viewpager中
  39.     @Override
  40.     public Object instantiateItem(ViewGroup container, int position) {
  41.         container.addView(viewArrayList.get(position));
  42.         return viewArrayList.get(position);
  43.     }
  45.     //移除选定的对象数组对象
  46.     @Override
  47.     public void destroyItem(ViewGroup container, int position, Object object) {
  48.         container.removeView(viewArrayList.get(position));
  49.     }
  50. }

4、manifest文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="lpc.com.animation2demo">
  5.     <application
  6.         android:allowBackup="true"
  7.         android:icon="@mipmap/ic_launcher"
  8.         android:label="@string/app_name"
  9.         android:supportsRtl="true"
  10.         android:theme="@style/AppTheme">
  11.         <activity android:name=".MainActivity">
  12.             <intent-filter>
  13.                 <action android:name="android.intent.action.MAIN" />
  15.                 <category android:name="android.intent.category.LAUNCHER" />
  16.             </intent-filter>
  17.         </activity>
  18.     </application>
  20. </manifest>

5、实现效果










【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liupengcheng/p/5286486.html