android下ViewPager的使用,带下部选项栏的切换动画

（文章针对类似我这种初学者，大神看到不要嘲笑）

演示

　　我的规矩是先上GIF动画效果(Linux下用转的GIF,清晰度还可以但是不知道为什么放博客上,界面会这么大):

代码:

　　android中有ViewPager这么个控件,可以帮助用户实现多个页面的高效管理,该控件需要导入包android.support.v4.view.ViewPager;下面先把androidstudio中的项目截图贴出:

　　

这是代码的结构,下面会对代码大概进行介绍:

    private Context mContext = MainActivity.this;
    private ViewPager mPager;
    private List<View> listViews;//存放多个View界面
    private ImageView cursor;//动画图片
    private int currentIndex = 0;//当前选项编号
    private TextView t1;
    private TextView t2;
    private TextView t3;
    private int width;

mPager来自一个ViewPager对象，下面主要是对其进行初始化、适配、以及切换事件监听；

cursor这个对象到后面就会了解，它就是选项栏的黄色View。就是它在移动，在后面要对该View的移动设置动画、以及判断何时移动、怎么移动；

currentIndex这个是用于判断当前页面；

width是用于存储屏幕的宽度；

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        width = displayMetrics.widthPixels;
        cursor = (ImageView) findViewById(R.id.move_view);
        params=(LinearLayout.LayoutParams) cursor.getLayoutParams();
        InitTextView();///初始化下部选项栏
        params.width=width/3;
        cursor.setLayoutParams(params);
        InitViewPager();//初始化页面配置
    }

DisplayMetrics displayMetrics = getResources().getDisplayMetrics();

width = displayMetrics.widthPixels;获取当前屏幕资源并求得宽度。

ImageView无法直接动态设置其宽高，所以可以通过这个方法来间接实现：

　　新建一个LayoutParams对象，并将其配置到cursor上面，这样即可修改cursor的宽度，这里高度不用修改。

    private void InitTextView() {
        t1 = (TextView) findViewById(R.id.text1);
        t2 = (TextView) findViewById(R.id.text2);
        t3 = (TextView) findViewById(R.id.text3);

        t1.setOnClickListener(new MyOnClickListener(0));
        t2.setOnClickListener(new MyOnClickListener(1));
        t3.setOnClickListener(new MyOnClickListener(2));
    }

    class MyOnClickListener implements View.OnClickListener {

        private int index = 0;

        public MyOnClickListener(int index) {
            this.index = index;
        }

        @Override
        public void onClick(View v) {
            mPager.setCurrentItem(index);
        }
    }

上面这个没什么好说的。

下面这个才是重点（讲解我就放在代码里面啦）：

private void InitViewPager() {
        mPager = (ViewPager) findViewById(R.id.vPager);
        listViews = new ArrayList<>();
        listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab1, null));
        listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab2, null));
        listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab3, null));
        mPager.setCurrentItem(0);//初始化的默认界面就是第一个，标号为0
        mPager.setAdapter(new MyPagerAdapter());//为mPager设置适配器
//        MyOnPageChangeListener myOnPageChangeListener=new MyOnPageChangeListener();以前是直接使用这个方法，但是现在已经弃用，改用下面两个方法的综合，这个大家可以ctrl+鼠标左键看官方的说明。
        mPager.addOnPageChangeListener(new MyOnPageChangeListener());//新增页面事件监听
        mPager.removeOnPageChangeListener(new MyOnPageChangeListener());//销毁页面事件监听

    }
//这段代码是仿照一位大神写的，在此谢过，原文链接后来找了一会忘记在哪了。。。
    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        int one = params.width;
        int two = one * 2;

        /**
         * This method will be invoked when the current page is scrolled, either as part
         * of a programmatically initiated smooth scroll or a user initiated touch scroll.
         *
         * @param position             Position index of the first page currently being displayed.
         *                             Page position+1 will be visible if positionOffset is nonzero.
         * @param positionOffset       Value from [0, 1) indicating the offset from the page at position.
         * @param positionOffsetPixels Value in pixels indicating the offset from position.
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        /**
         * This method will be invoked when a new page becomes selected. Animation is not
         * necessarily complete.
         *
         * @param position Position index of the new selected page.
         */
        @Override
        public void onPageSelected(int position) {
            Animation animation = null;
            switch (position) {
                case 0:
                    if (currentIndex == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);//这些个参数可以通过API了解到，大家可以通过修改某些值就可以很快上手动画的效果实现
                    } else if (currentIndex == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    if (currentIndex == 0) {
                        animation = new TranslateAnimation(0, one, 0, 0);
                    } else if (currentIndex == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    if (currentIndex == 0) {
                        animation = new TranslateAnimation(0, two, 0, 0);
                    } else if (currentIndex == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            currentIndex = position;
            animation.setFillAfter(true);
            animation.setDuration(300);
            cursor.startAnimation(animation);
        }

        /**
         * Called when the scroll state changes. Useful for discovering when the user
         * begins dragging, when the pager is automatically settling to the current page,
         * or when it is fully stopped/idle.
         *
         * @param state The new scroll state.
         * @see ViewPager#SCROLL_STATE_IDLE
         * @see ViewPager#SCROLL_STATE_DRAGGING
         * @see ViewPager#SCROLL_STATE_SETTLING
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    class MyPagerAdapter extends PagerAdapter {//适配器的写法应该都是轻车熟路，但是与平常的还是有所不同，我们需要手动去重写两个方法

        /**
         * Return the number of views available.
         */
        @Override
        public int getCount() {
            return listViews.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {//重写该方法，销毁不用的界面
            ((ViewPager) container).removeView(listViews.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {//加载界面
            ((ViewPager) container).addView(listViews.get(position), 0);//?
            return listViews.get(position);
        }

        /**
         * Determines whether a page View is associated with a specific key object
         * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
         * required for a PagerAdapter to function properly.
         *
         * @param view   Page View to check for association with <code>object</code>
         * @param object Object to check for association with <code>view</code>
         * @return true if <code>view</code> is associated with the key object <code>object</code>
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {//注意重写该方法，如果两者相等返回一个true。默认是返回false
            return view == object;
        }
    }

项目链接：

链接: https://pan.baidu.com/s/1pLIxJIj 密码: h4xn