Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端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
|
@Override
public
Object instantiateItem(ViewGroup container, int
position) {
if
(position < images.length) {
ImageView
imageView = new
ImageView(MainActivity.this);
ViewGroup.LayoutParams
lp = new
ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dip2px(300));
imageView.setLayoutParams(lp);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setImageResource(images[position]);
container.addView(imageView);
return
imageView;
}
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);
return
hintView;
}
}
|
只要这样写了，就可以看到一个大概的效果了，然后主要就是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
|
public
class
ViewPagerOnPageChangeListener implements
ViewPager.OnPageChangeListener {
int
currPosition = 0;
//
当前滑动到了哪一页
boolean
canJump = false;
boolean
canLeft = true;
boolean
isObjAnmatitor = true;
boolean
isObjAnmatitor2 = false;
@Override
public
void
onPageScrolled(int
position, float
positionOffset, int
positionOffsetPixels) {
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(new
AnimatorListenerAdapter() {
@Override
public
void
onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
imageAdapter.slideText.setText("松开跳到详情");
isObjAnmatitor2
= true;
}
});
animator.setDuration(500).start();
}
}
}
else
if
(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(new
AnimatorListenerAdapter() {
@Override
public
void
onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
imageAdapter.slideText.setText("继续滑动跳到详情");
isObjAnmatitor
= true;
}
});
animator.setDuration(500).start();
}
}
}
canLeft
= false;
}
else
{
canLeft
= true;
}
}
@Override
public
void
onPageSelected(int
position) {
currPosition
= position;
}
@Override
public
void
onPageScrollStateChanged(int
state) {
if
(currPosition == (images.length-1)
&& !canLeft) {
if
(state == ViewPager.SCROLL_STATE_SETTLING) {
if
(canJump) {
Toast.makeText(MainActivity.this,
"跳转啦",
Toast.LENGTH_SHORT).show();
}
new
Handler().post(new
Runnable() {
@Override
public
void
run() {
//
在handler里调用setCurrentItem才有效
viewPager.setCurrentItem(images.length-1);
}
});
}
}
}
}
|
逻辑不算复杂，主要是OnPageChangeListener里面三个方法加的一些判断。
看到参考的那篇文章里面评论很多人在要源码，我在这里把我写的分享一下，欢迎大家指导。源码下载。
另外还有一个比较好的viewpager效果就是，同时显示三个item，然后滑动到最后一个图片时，让那个向左滑的小箭头露出了，让用户知道这个viewpager还可以继续滑动，体验稍微好一点。
这个效果实现起来也非常简单，只需要设置viewpager的marginRight和marginLeft，然后给viewpager和它的父控件加上Android:clipChildren="false"就行了。
以上所述是小编给大家介绍的Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
原文链接：http://blog.****.net/wangkaichenjuan/article/details/62037947