slideback.gif
使用
//开启滑动返回
SlideBack.create()
.attachToActivity(this);
SlideBack.create()
.slideView(new DefaultSlideView(this))
.attachToActivity(this);
实现原理
1 在DecorView上添加一个充满全屏的FrameLayout
2 在FrameLayout 上添加滑动展示的view
3 通过监听FrameLayout的触摸事件，展现不同的效果
public class DefaultSlideView implements ISlideView {
private Path bezierPath;
private Paint paint, arrowPaint;
//private LinearGradient shader;
private int backViewColor = 0xff000000;
private int arrowColor = Color.WHITE;
private int arrowWidth;
private final int width;
private final int height;
public DefaultSlideView(@NonNull Context context) {
width = Utils.d2p(context, 50);
height = Utils.d2p(context, 200);
arrowWidth = Utils.d2p(context, 4);
init(context);
}
public void setBackViewColor(int backViewColor) {
this.backViewColor = backViewColor;
}
public void setArrowColor(int arrowColor) {
this.arrowColor = arrowColor;
}
private void init(Context context) {
bezierPath = new Path();
paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
paint.setColor(backViewColor);
paint.setStrokeWidth(Utils.d2p(context, 1.5f));
arrowPaint = new Paint();
arrowPaint.setAntiAlias(true);
arrowPaint.setStyle(Paint.Style.FILL_AND_STROKE);
arrowPaint.setColor(arrowColor);
arrowPaint.setStrokeWidth(Utils.d2p(context, 1.5f));
arrowPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
public boolean scrollVertical() {
return true;
}
@Override
public int getWidth() {
return width;
}
@Override
public int getHeight() {
return height;
}
@Override
public void onDraw(Canvas canvas, float currentWidth) {
float height = getHeight();
int maxWidth = getWidth();
float centerY = height / 2;
float progress = currentWidth / maxWidth;
if (progress == 0) {
return;
}
paint.setColor(backViewColor);
paint.setAlpha((int) (200 * progress));
//画半弧背景
/*
ps: 小点为起始点和结束点，星号为控制点
·
|
*
*
|
·
|
*
*
|
·
*/
float bezierWidth = currentWidth / 2;
bezierPath.reset();
bezierPath.moveTo(0, 0);
bezierPath.cubicTo(0, height / 4f, bezierWidth, height * 3f / 8, bezierWidth, centerY);
bezierPath.cubicTo(bezierWidth, height * 5f / 8, 0, height * 3f / 4, 0, height);
canvas.drawPath(bezierPath, paint);
arrowPaint.setColor(arrowColor);
arrowPaint.setAlpha((int) (255 * progress));
//画箭头
float arrowLeft = currentWidth / 6;
if (progress <= 0.2) {
//ingore
} else if (progress <= 0.7f) {
//起初变长竖直过程
float newProgress = (progress - 0.2f) / 0.5f;
canvas.drawLine(arrowLeft, centerY - arrowWidth * newProgress, arrowLeft, centerY + arrowWidth * newProgress, arrowPaint);
} else {
//后面变形到完整箭头过程
float arrowEnd = arrowLeft + (arrowWidth * (progress - 0.7f) / 0.3f);
canvas.drawLine(arrowEnd, centerY - arrowWidth, arrowLeft, centerY, arrowPaint);
canvas.drawLine(arrowLeft, centerY, arrowEnd, centerY + arrowWidth, arrowPaint);
}
}
}
public interface ISlideView {
/**
* 是否可以垂直滑动
*
* @return
*/
boolean scrollVertical();
/**
* 宽度
*
* @return
*/
int getWidth();
/**
* 高度
*
* @return
*/
int getHeight();
/**
* 绘制
*
* @param canvas
* @param currentWidth 根据手指滑动得出的当前宽度（最大值为getWidth())
*/
void onDraw(Canvas canvas, float currentWidth);
}
public interface OnSlide {
void onSlideBack();
}
public class SlideBack {
private ISlideView slideView; //样式
private OnSlide onSlide; //滑动监听
private int canSlideWidth; //左边触发距离
public static SlideBack create() {
return new SlideBack();
}
/**
* 滑动返回样式
*
* @param slideView the slide view
* @return the slide back
*/
public SlideBack slideView(ISlideView slideView) {
this.slideView = slideView;
return this;
}
/**
* 左边开始触发距离
*
* @param canSlideWidth the can slide width
* @return the slide back
*/
public SlideBack canSlideWidth(int canSlideWidth) {
this.canSlideWidth = canSlideWidth;
return this;
}
/**
* 滑动触发监听
*
* @param onSlide the on slide
* @return the slide back
*/
public SlideBack onSlide(OnSlide onSlide) {
this.onSlide = onSlide;
return this;
}
public SlideControlLayout attachToActivity(@NonNull Activity activity) {
if (slideView == null) {
slideView = new DefaultSlideView(activity);
}
if (canSlideWidth == 0) {
canSlideWidth = Utils.d2p(activity, 18);
}
return new SlideControlLayout(activity, canSlideWidth, slideView, onSlide)
.attachToActivity(activity);
}
}
class SlideBackView extends View {
private ISlideView slideView;
private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
private ValueAnimator animator;
private float rate = 0;//曲线的控制点
SlideBackView(Context context, @NonNull ISlideView slideView) {
super(context);
setSlideView(slideView);
}
public SlideBackView setSlideView(@NonNull ISlideView slideView) {
this.slideView = slideView;
setLayoutParams(new SlideControlLayout.LayoutParams(slideView.getWidth(), slideView.getHeight()));
return this;
}
public ISlideView getSlideView() {
return slideView;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
slideView.onDraw(canvas, rate);
}
public void updateRate(float updateRate, boolean hasAnim) {
if (updateRate > getWidth()) {
updateRate = getWidth();
}
if (rate == updateRate) {
return;
}
cancelAnim();
if (!hasAnim) {
rate = updateRate;
invalidate();
if (rate == 0) {
setVisibility(GONE);
}else{
setVisibility(VISIBLE);
}
}
/*这个动画效果并不明显*/
animator = ValueAnimator.ofFloat(rate, updateRate);
animator.setDuration(200);
animator.addUpdateListener(animation -> {
rate = (Float) animation.getAnimatedValue();
postInvalidate();
if (rate == 0) {
setVisibility(GONE);
}else{
setVisibility(VISIBLE);
}
});
animator.setInterpolator(DECELERATE_INTERPOLATOR);
animator.start();
}
private void cancelAnim() {
if (animator != null && animator.isRunning()) {
animator.cancel();
}
}
@Override
protected void onDetachedFromWindow() {
cancelAnim();
if (rate != 0) {
rate = 0;
invalidate();
}
super.onDetachedFromWindow();
}
}
public class SlideControlLayout extends FrameLayout {
private final SlideBackView slideBackView;
private final OnSlide onSlide;
private int canSlideWidth;
private boolean enable = true;
private float downX;
private float moveX;
private boolean startDrag = false;
SlideControlLayout(@NonNull Context context, int canSlideWidth, ISlideView slideView, OnSlide onSlide) {
super(context);
this.canSlideWidth = canSlideWidth;
this.onSlide = onSlide;
slideBackView = new SlideBackView(context, slideView);
addView(slideBackView);
}
SlideControlLayout attachToActivity(@NonNull Activity activity) {
ViewParent parent = getParent();
if (parent instanceof ViewGroup) {
((ViewGroup) parent).removeView(this);
}
ViewGroup decor = (ViewGroup) activity.getWindow().getDecorView();
decor.addView(this, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
return this;
}
private void onBack() {
if (onSlide == null) {
Utils.getActivityContext(getContext()).onBackPressed();
} else {
onSlide.onSlideBack();
}
}
private void setSlideViewY(SlideBackView view, int y) {
if (!view.getSlideView().scrollVertical()) {
/*水平移动到0 0 点*/
scrollTo(0, 0);
return;
}
/*移动的是视图内容 移动到垂直居中*/
scrollTo(0, -(y - view.getHeight() / 2));
}
//region 手势控制
@Override
public boolean onInterceptTouchEvent(MotionEvent motionEvent) {
if (!enable) {
return false;
}
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
if (motionEvent.getRawX() <= canSlideWidth) {
return true;
}
}
return super.onInterceptTouchEvent(motionEvent);
}
@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
if (!enable) {
return super.onTouchEvent(motionEvent);
}
float currentX = motionEvent.getRawX();
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
float currentY = motionEvent.getRawY();
if (currentY > Utils.d2p(getContext(), 100) && currentX <= canSlideWidth) {
downX = currentX;
startDrag = true;
slideBackView.updateRate(0, false);
setSlideViewY(slideBackView, (int) (motionEvent.getRawY()));
}
break;
case MotionEvent.ACTION_MOVE:
if (startDrag) {
moveX = currentX - downX;
if (Math.abs(moveX) <= slideBackView.getWidth() * 2) {
slideBackView.updateRate(Math.abs(moveX) / 2, false);
} else {
slideBackView.updateRate(slideBackView.getWidth(), false);
}
/*移动view*/
setSlideViewY(slideBackView, (int) (motionEvent.getRawY()));
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_OUTSIDE:
if (startDrag && moveX >= slideBackView.getWidth() * 2) {
onBack();
slideBackView.updateRate(0, false);
} else {
slideBackView.updateRate(0, startDrag);
}
moveX = 0;
startDrag = false;
break;
}
return startDrag || super.onTouchEvent(motionEvent);
}
//endregion
}
class Utils {
@ColorInt
static int setColorAlpha(int color, float alpha) {
color = Color.argb((int) (alpha * 255), Color.red(color), Color.green(color), Color.blue(color));
return color;
}
static int d2p(Context var0, float var1) {
DisplayMetrics var2 = var0.getResources().getDisplayMetrics();
return (int) TypedValue.applyDimension(1, var1, var2);
}
/**
* 屏幕宽度(像素)
*/
private static int screentwidth;
static int getScreenWidth(Context context) {
if (screentwidth > 0)
return screentwidth;
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return screentwidth = outMetrics.widthPixels;
}
static Activity getActivityContext(Context context) {
if (context == null)
return null;
else if (context instanceof Activity)
return (Activity) context;
else if (context instanceof ContextWrapper)
return getActivityContext(((ContextWrapper) context).getBaseContext());
return null;
}
}
网友评论