滑动切换图片效果的实现
ONE Goal ,ONE Passion !
最近在多个app上看到了一个效果,比如探探,陌陌上.效果就是好像是:一个Imageview中放置了多张图片.可以随意滑动掉一张.然后显示下一张图片.就好像是个装扑克牌的盒子一样.什么鬼,描述的太混乱了.github上有相似的好像叫SwipeableCardStack.先看一下实现的效果吧.
1,概述:
效果实现步骤:
1,既然是多张图片叠加在一起,自定义ViewGroup来放多张图片,而且图片要能叠放在一起.所有选择继承RelativeLayout.
2,手指滑动图片时,图片要能够移动,而且要有一定的旋转
3,当滑动距离超过我们规定的大小后,将当前view隐藏.
突然想到了什么.手指滑动,让控件也跟着移动,使用ViewDragHelper不久好了.我们就不用去在onTouchEvent中去判断处理移动了逻辑了.
2,自定义容器布局解析:
public class StrickLayout extends RelativeLayout {
private ViewDragHelper mDragger;
private View mDragView;
private View mAutoBackView;
private View mEdgeTrackerView;
private Point mAutoBackOriginPos = new Point();
private Point mMovePos;
public StrickLayout(Context context) {
this(context, null);
}
public StrickLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// 1,创建mDragger实例
mDragger = ViewDragHelper.create(this, f, new ViewDragHelper.Callback() {
@Override
public boolean tryCaptureView(View child, int pointerId) {
//返回true 所有的view都可以移动
// return mDragView == child; 那么只有mDragView可以移动
return true;
}
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return left;
}
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
return top;
}
// 当手指释放时回调
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
//手指释放时可以自动mAutoBackView回去
if (mMovePos != null) {
// 逻辑处理,如果向右滑动超过 400 或者向 下超过 400时,隐藏
if (mMovePos.x > || mMovePos.y > ) {
releasedChild.setVisibility(GONE);
} else {
/**将当前子(捕获到的)view位置还原到 left:0, top:0 ----捕获到的view,系统会自动识别
* 1,内部使用 mScrool执行的位置偏移.
* 2,所以重写computeScroll,在computeScroll中调用mDragger.continueSettling(true).
* 3,mDragger.continueSettling(true)方法中,会一直更改需要当前子view的位置.
* 4,当前子view的位置,发生改变时,此viewgroup当然也要重绘了.
*/
mDragger.settleCapturedViewAt(, );
// 开始重新绘制当前viewgroup. 1,子view需要绘制,2,自己本身要在子view绘制时再去绘制自己.
invalidate();
}
}
}
//在边界拖动时回调
@Override
public void onEdgeDragStarted(int edgeFlags, int pointerId) {
super.onEdgeDragStarted(edgeFlags, pointerId);
// mDragger.captureChildView(mEdgeTrackerView, pointerId);
}
// 当view的位置改变时，在这里处理位置改变后要做的事情。
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
mMovePos = new Point();
//当移动时设置 旋转角度
float mRotation = (left / f);
changedView.setRotation(mRotation);
// 记录当前图片的x,y.以便在松开时去根据位置处理
mMovePos.x = left;
mMovePos.y = top;
}
});
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return mDragger.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mDragger.processTouchEvent(event);
return true;
}
/**
* Called by a parent to request that a child update its values for mScrollX
* and mScrollY if necessary. This will typically be done if the child is
* animating a scroll using a {@link android.widget.Scroller Scroller}
* object.
* 如果需要的话 :当一个父容器要求子view去更新自己的mScrollX,mScrollY时,该方法被回调
* 典型地: 子view使用Scroller 去做一个动画时需要回调.
*/
/**
* mScrollX解释:
* The offset, in pixels, by which the content of this view is scrolled
* horizontally.
* <p/>
* view在水平方向滑动的偏移像素
*/
@Override
public void computeScroll() {
// 1,在这里判断动画是否需要继续执行。会在View.draw(Canvas mCanvas)之前执行。
// 2,同时会更新子view的偏移像素(对子view做动画)
if (mDragger.continueSettling(true)) {//(返回true 表示动画还没执行完，需要继续执行)
//更新子view的同时,此viewgroup也要同时重新绘制
invalidate();
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
}
/**
* 当布局加载完成后,找到子控件
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mDragView = getChildAt();
mAutoBackView = getChildAt();
mEdgeTrackerView = getChildAt();
}
}
第一:既然我们要使用ViewDragHelper那么:简单介绍一下ViewDragHelper用法.
1,创建实例
mDragger = ViewDragHelper.create(this, , new ViewDragHelper.Callback()
{
});
2,触摸相关的方法的调用.将触摸事件交给ViewDragHelper来处理.
@Override
public boolean onInterceptTouchEvent(MotionEvent event)
{
return mDragger.shouldInterceptTouchEvent(event);
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
mDragger.processTouchEvent(event);
return true;
}
3,ViewDragHelper.Callback实例的编写
第二:我们已经将触摸交给ViewDragHelper处理了.所以在滑动回调onViewPositionChanged中,我们让图片旋转.图片的移动会自动处理.
// 当view的位置改变时，在这里处理位置改变后要做的事情。
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
mMovePos = new Point();
//当移动时设置 旋转角度
float mRotation = (left / f);
changedView.setRotation(mRotation);
// 记录当前图片的x,y.以便在松开时去根据位置处理
mMovePos.x = left;
mMovePos.y = top;
}
第三:当手指松开时.我们要根据滑动条件去判断当前view是否要被隐藏
// 当手指释放时回调
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
//手指释放时可以自动mAutoBackView回去
if (mMovePos != null) {
// 逻辑处理,如果向右滑动超过 400 或者向 下超过 400时,隐藏
if (mMovePos.x > || mMovePos.y > ) {
releasedChild.setVisibility(GONE);
} else {
/**将当前子(捕获到的)view位置还原到 left:0, top:0 ----捕获到的view,系统会自动识别
* 1,内部使用 mScrool执行的位置偏移.
* 2,所以重写computeScroll,在computeScroll中调用mDragger.continueSettling(true).
* 3,mDragger.continueSettling(true)方法中,会一直更改需要当前子view的位置.
* 4,当前子view的位置,发生改变时,此viewgroup当然也要重绘了.
*/
mDragger.settleCapturedViewAt(, );
// 开始重新绘制当前viewgroup. 1,子view需要绘制,2,自己本身要在子view绘制时再去绘制自己.
invalidate();
}
}
}
回调后我们要重新绘制视图.
第四: 当滑动幅度很小时, 将图像还原.
/**将当前子(捕获到的)view位置还原到 left:0, top:0 ----捕获到的view,系统会自动识别
* 1,内部使用 mScrool执行的位置偏移.
* 2,所以重写computeScroll,在computeScroll中调用mDragger.continueSettling(true).
* 3,mDragger.continueSettling(true)方法中,会一直更改需要当前子view的位置.
* 4,当前子view的位置,发生改变时,此viewgroup当然也要重绘了.
*/
mDragger.settleCapturedViewAt(, );
// 开始重新绘制当前viewgroup. 1,子view需要绘制,2,自己本身要在子view绘制时再去绘制自己.
invalidate();
第五:为什么要重写computeScroll:
当一个父容器要求子view去更新自己的mScrollX,mScrollY时,该方法被回调
/**
* Called by a parent to request that a child update its values for mScrollX
* and mScrollY if necessary. This will typically be done if the child is
* animating a scroll using a {@link android.widget.Scroller Scroller}
* object.
* 如果需要的话 :当一个父容器要求子view去更新自己的mScrollX,mScrollY时,该方法被回调
* 典型地: 子view使用Scroller 去做一个动画时需要回调.
*/
/**
* mScrollX解释:
* The offset, in pixels, by which the content of this view is scrolled
* horizontally.
* <p/>
* view在水平方向滑动的偏移像素
*/
@Override
public void computeScroll() {
// 1,在这里判断动画是否需要继续执行。会在View.draw(Canvas mCanvas)之前执行。
// 2,同时会更新子view的偏移像素(对子view做动画)
if (mDragger.continueSettling(true)) {//(返回true 表示动画还没执行完，需要继续执行)
//更新子view的同时,此viewgroup也要同时重新绘制
invalidate();
}
}
3,布局中使用:
将我们要显示的内容控件放入StrickLayout容器中就可以了.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.customview.activity.StrickActivity">
<com.example.customview.view.StrickLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:background="#ff00ff" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="15dp"
android:background="#ffff00" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:background="#ff0000" />
</com.example.customview.view.StrickLayout>
</RelativeLayout>
简单的效果实现了,不过和开源的控件比起来还是略逊的.功能实现了.如果需要很细腻的效果就要在onFinishInflate()方法中拿到所有控件,对每一个控件进行细微动画.如果想直接使用开源控件的话,就去下载吧.
![Android轮播图控件CustomBanner的使用讲解[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)