ViewPager的详细学习（一）

http://blog.csdn.net/harvic880925/article/details/38557517 转载

最近在学习ViewPager的基本用法，上面这篇文章中讲解了如何自主实现ViewPager的滚动条。里面的一些细节还是需要学习。效果图与上面的文章中相同。下面的文章结构和链接文章相同，主要给自己记录一下其中不懂得部分。

一、XML布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout    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:orientation="vertical"    tools:context="com.example.shch.viewpagedemo.MainActivity">        <ImageView            android:id="@+id/cursor"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="#00ff00"            android:scaleType="matrix"/>            <!--android:src="@drawable/a"/>-->        <android.support.v4.view.ViewPager            android:id="@+id/viewPager"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            /></LinearLayout>

线性垂直布局，在滑动页面的上方添加一个小的水平条。

二、JAVA代码

1、MainActivity

package com.example.shch.viewpagedemo;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;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.ImageView;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;public class MainActivity extends Activity {    private View view1,view2,view3;    private ViewPager viewPager;    private ViewPagerAdapter viewPagerAdapter;    private ImageView cursor;    private int bmpw=0;    private float offset=0;    private int currIndex =0;    private List<View> viewList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager= (ViewPager) findViewById(R.id.viewPager);        LayoutInflater layoutInflater=getLayoutInflater();        view1=layoutInflater.inflate(R.layout.layout1,null);        view2=layoutInflater.inflate(R.layout.layout2,null);        view3=layoutInflater.inflate(R.layout.layout3,null);        viewList=new ArrayList<>();        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        initCursorPos();        viewPagerAdapter=new ViewPagerAdapter(viewList);        viewPager.setAdapter(viewPagerAdapter);        viewPager.addOnPageChangeListener(new MyOnPageChangedListener());    }    public void initCursorPos(){        cursor= (ImageView) findViewById(R.id.cursor);        bmpw= BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();        //获取屏幕宽度        DisplayMetrics dm=new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW=dm.widthPixels;        int screenH=dm.heightPixels;        offset=screenW/18;        int imageWidth=(screenW)*5/18;        int imageHeight=screenH/30;        cursor.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageHeight));        cursor.setImageResource(R.drawable.a);        Matrix matrix=new Matrix();        matrix.postTranslate(offset,0);        cursor.setImageMatrix(matrix);    }    public class MyOnPageChangedListener implements ViewPager.OnPageChangeListener{        float one=offset*6;        float two=one*2;        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            Animation animation=null;            switch (position){                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(0,one,0,0);                    }else if(currIndex==2){                        animation=new TranslateAnimation(two,one,0,0);                    }                    break;                case 2:                    if(currIndex==0){                        animation=new TranslateAnimation(0,two,0,0);                    }else if(currIndex==1){                        animation=new TranslateAnimation(one,two,0,0);                }                    break;            }            animation.setDuration(500);            animation.setFillAfter(true);            currIndex=position;            cursor.setAnimation(animation);            animation.startNow();        }        @Override        public void onPageScrollStateChanged(int state) {        }    }}

2、ViewPagerAdapter

package com.example.shch.viewpagedemo;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * Created by SHCH on 2016/6/3. */public class ViewPagerAdapter extends PagerAdapter {    private List<View> viewList;    public ViewPagerAdapter(List<View> list){        viewList=list;    }    @Override    public int getCount() {        return viewList.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view==object;    }    //返回Object作为View的key值，container中View的key值    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(viewList.get(position));        return viewList.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(viewList.get(position));    }}

三、遇到的问题和解析：

1、 initCursorPos()–初始化指示器的位置
代码

 public void initCursorPos(){        cursor= (ImageView) findViewById(R.id.cursor);        bmpw= BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();        //获取屏幕宽度        DisplayMetrics dm=new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW=dm.widthPixels;        int screenH=dm.heightPixels;        offset=screenW/18;        int imageWidth=(screenW)*5/18;        int imageHeight=screenH/30;        cursor.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageHeight));        cursor.setImageResource(R.drawable.a);        Matrix matrix=new Matrix();        matrix.postTranslate(offset,0);        cursor.setImageMatrix(matrix);    }

这里我遇到的问题是图片大小的问题，我想到的解决方案是不管图片的大小，而是是图片填充这个ImageView，因此，需要设置的是ImageView的宽度和高度。我在使用XML布局中，ImageView的宽度是match_parent的，而我们需要获取到屏幕的宽度。需要动态的获取到当前屏幕的宽度和高度。然后我按照屏幕的宽度和高度设置了ImageView的宽度和高度。（在网上看有几种方式，先挖个坑，等下来填。坑1）

 DisplayMetrics dm=new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW=dm.widthPixels;        int screenH=dm.heightPixels;        offset=screenW/18;        int imageWidth=(screenW)*5/18;        int imageHeight=screenH/30;        cursor.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageHeight));        cursor.setImageResource(R.drawable.a);

然后是将图片资源在ImageView中进行平移，注意，应该是在ImageView中进行的，区别于后面的Animation （是整个ImageView进行平移）（坑2 ，详细了解下Matrix）。

  Matrix matrix=new Matrix();        matrix.postTranslate(offset,0);        cursor.setImageMatrix(matrix);

2、MyOnPageChangedListener()—页面改变监听器
这里想要监听页面的改变，要复写三个方法

 public class MyOnPageChangedListener implements ViewPager.OnPageChangeListener{        float one=offset*6;        float two=one*2;        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            Animation animation=null;            switch (position){                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(0,one,0,0);                    }else if(currIndex==2){                        animation=new TranslateAnimation(two,one,0,0);                    }                    break;                case 2:                    if(currIndex==0){                        animation=new TranslateAnimation(0,two,0,0);                    }else if(currIndex==1){                        animation=new TranslateAnimation(one,two,0,0);                }                    break;            }            animation.setDuration(500);            animation.setFillAfter(true);            currIndex=position;            cursor.setAnimation(animation);            animation.startNow();        }        @Override        public void onPageScrollStateChanged(int state) {        }    }

这里面只需要用到 onPageSelected(int position)
这个方法传入的是当前页面的位置int position，判断之前是从哪个页面改变到该页面的。（坑3 ，详细解释一下这三个方法的参数）

这里面Animation是将整个View进行移动具体要详细写一下（坑４）然后调用 cursor.startAnimation(animation); 设置动画效果。

准备边学边填坑！！！