给ViewPage导航栏加滑动动画

来源:互联网 发布:360自动优化工具 编辑:程序博客网 时间:2024/05/16 17:04
一、目的:
自己在学习时遇到的问题,希望能帮到需要的人。
二、大致内容:
看很多app都是可以进行滑动来进行页面之间的切换,并且导航栏下面会有一个像标记一样图片随着页面滑动。
自己还是初学者,所以就百度了下,并模仿制作了一个简陋的页面。


三、遇到的问题:
1、怎么实现动画的滑动?
2、点击导航栏进行切换和viewpage滑动切换会不会冲突


四、解决问题:

1.实现滑动可以根据viewpage.setOnPageChangeListener重写方法:
            public void onPageSelected(int arg0) {
                int currentIndex = 0;
                switch (arg0) {
                case 0:
                    currentIndex = 0;
                    break;
                case 1:
                    currentIndex = 1;
                    break;
                }
                                
                Animation animation = new TranslateAnimation((mScreenWidth / 2) * index,
                        (mScreenWidth / 2) * currentIndex, 0, 0);
                animation.setFillAfter(true);//动画停在结束位置
                animation.setDuration(300);//运行时长
                test.startAnimation(animation);
                index = currentIndex;
            }
2. 分别给导航栏添加自定义点击事件
OnClickListener mOnClickListener = new OnClickListener() {
    
     @Override
     public void onClick(View v) {
     int currentIndex = 0;
     switch (v.getId()) {
     case R.id.img_tv:
     currentIndex = 0;
     mViewPage.setCurrentItem(0);
     break;
     case R.id.video_tv:
     currentIndex = 1;
     mViewPage.setCurrentItem(1);
     break;
     }
     Animation animation = new TranslateAnimation((mScreenWidth / 2) * temp,
     (mScreenWidth / 2) * currentIndex,
     0, 0);
     animation.setFillAfter(true);
     animation.setDuration(300);
     test.startAnimation(animation);
     temp = currentIndex;
     }
     };
在运行过程中发现有冲突两个时间中间会出现冲突:
比如从第一页滑动到第二页,此时不会有什么问题,可当你在点击第二页的导航时,会出现图片会从第一个导航下面继续进行动画滑到第二个导航下面。

注意:
这个时候需要考虑的是到底该怎么去实现动画而且两个点击事件不会冲突呢?
其实只需要实现第一个重写方法中的动画即可,因为你点击事件也进行了viewpage的页面切换,也就是说默认的发生了第一个的动画。
所以只需要在第二个点击事件中实现切换viewpage显示的当前页即可:
OnClickListener mOnClickListener = new OnClickListener() {
    
     @Override
     public void onClick(View v) {
     case R.id.img_tv:
     mViewPage.setCurrentItem(0);
     break;
     case R.id.video_tv:
     mViewPage.setCurrentItem(1);
     break;
     }
     };
总结:多思考才能发现问题,才能解决问题,才能增长知识。



1 0
原创粉丝点击