一聚教程网:一个值得你收藏的教程网站

热门教程

Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能

时间:2022-06-25 23:23:55 编辑:袖梨 来源:一聚教程网

需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始没什么思路,后来搜了一下,发现有好几种实现方法,最好的一种就是在ViewPager图片的后面再加一个view,然后滑动viewpager的时候,判断一下就行了。
附一个链接,我写的代码就是参考的这个,稍微改了一点点,先看看效果图。

实现起来比较简单,先写一个滑动加载详情的布局,然后在viewpager的instantiateItem里面判断一下,如果是最后一张,就显示加载详情的那个布局。不过需要注意的是,viewpager的getCount()返回的是list.size()+1,因为多了一个布局。
下面看看代码里面的几个方法。

在PagerAdapter的instantiateItem里面加载布局,判断一下position,如果小于图片数组,就是图片布局,如果大于了数组的长度(为什么会大于,因为前面已经说了,getCount返回的+1了的),就返回那个滑动跳转的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@Override
 
publicObject instantiateItem(ViewGroup container,intposition) {
 
 if(position < images.length) {
 
  ImageView imageView =newImageView(MainActivity.this);
 
  ViewGroup.LayoutParams lp =newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dip2px(300));
 
  imageView.setLayoutParams(lp);
 
  imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
 
  imageView.setImageResource(images[position]);
 
  container.addView(imageView);
 
  returnimageView;
 
 }else{
 
  View hintView = LayoutInflater.from(container.getContext()).inflate(R.layout.more_view, container,false);
 
  slideText = (TextView) hintView.findViewById(R.id.tv);
 
  arrowImage = (ImageView) hintView.findViewById(R.id.iv);
 
  container.addView(hintView);
 
  returnhintView;
 
 }
 
}


 只要这样写了,就可以看到一个大概的效果了,然后主要就是viewp的OnPageChangeListener里面的东西了。主要思路就是,当在最后一张图片时,只要再次往左滑动,滑动到一定距离,就触发跳转的事件,然后,只要是在最后一张图片,是在向左滑动,松开手时,都要让viewpager选中最后一张图片那里,不能是滑动到了新加的那个布局去了。

在看看ViewPager.OnPageChangeListener具体的代码是怎么样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
publicclassViewPagerOnPageChangeListenerimplementsViewPager.OnPageChangeListener {
 
  intcurrPosition =0;// 当前滑动到了哪一页
 
  booleancanJump =false;
 
  booleancanLeft =true;
 
  booleanisObjAnmatitor =true;
 
  booleanisObjAnmatitor2 =false;
 
  @Override
 
  publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels) {
 
   if(position == (images.length-1)) {
 
    if(positionOffset >0.35) {
 
     canJump =true;
 
     if(imageAdapter.arrowImage !=null&& imageAdapter.slideText !=null) {
 
      if(isObjAnmatitor) {
 
       isObjAnmatitor =false;
 
       ObjectAnimator animator = ObjectAnimator.ofFloat(imageAdapter.arrowImage,"rotation", 0f, 180f);
 
       animator.addListener(newAnimatorListenerAdapter() {
 
        @Override
 
        publicvoidonAnimationEnd(Animator animation) {
 
         super.onAnimationEnd(animation);
 
         imageAdapter.slideText.setText("松开跳到详情");
 
         isObjAnmatitor2 =true;
 
        }
 
       });
 
       animator.setDuration(500).start();
 
      }
 
     }
 
    }elseif(positionOffset <=0.35&& positionoffset="">0) {
 
     canJump =false;
 
     if(imageAdapter.arrowImage !=null&& imageAdapter.slideText !=null) {
 
      if(isObjAnmatitor2) {
 
       isObjAnmatitor2 =false;
 
       ObjectAnimator animator = ObjectAnimator.ofFloat(imageAdapter.arrowImage,"rotation", 180f, 360f);
 
       animator.addListener(newAnimatorListenerAdapter() {
 
        @Override
 
        publicvoidonAnimationEnd(Animator animation) {
 
         super.onAnimationEnd(animation);
 
         imageAdapter.slideText.setText("继续滑动跳到详情");
 
         isObjAnmatitor =true;
 
        }
 
       });
 
       animator.setDuration(500).start();
 
      }
 
     }
 
    }
 
    canLeft =false;
 
   }else{
 
    canLeft =true;
 
   }
 
  }
 
  @Override
 
  publicvoidonPageSelected(intposition) {
 
   currPosition = position;
 
  }
 
  @Override
 
  publicvoidonPageScrollStateChanged(intstate) {
 
   if(currPosition == (images.length-1) && !canLeft) {
 
    if(state == ViewPager.SCROLL_STATE_SETTLING) {
 
     if(canJump) {
 
      Toast.makeText(MainActivity.this,"跳转啦", Toast.LENGTH_SHORT).show();
 
     }
 
     newHandler().post(newRunnable() {
 
      @Override
 
      publicvoidrun() {
 
       // 在handler里调用setCurrentItem才有效
 
       viewPager.setCurrentItem(images.length-1);
 
      }
 
     });
 
    }
 
   }
 
  }
 
 }


逻辑不算复杂,主要是OnPageChangeListener里面三个方法加的一些判断。

看到参考的那篇文章里面评论很多人在要源码,我在这里把我写的分享一下,欢迎大家指导。源码下载。

另外还有一个比较好的viewpager效果就是,同时显示三个item,然后滑动到最后一个图片时,让那个向左滑的小箭头露出了,让用户知道这个viewpager还可以继续滑动,体验稍微好一点。

这个效果实现起来也非常简单,只需要设置viewpager的marginRight和marginLeft,然后给viewpager和它的父控件加上Android:clipChildren="false"就行了。

热门栏目