給你的頁面帶上側滑返回——SlideBack

時間 2019-12-10

標籤頁面帶上側滑返回 slideback 简体版

原文原文鏈接

簡介

這個小東西是我很早以前寫的，功能就是能夠給你的頁面帶上滑動返回。開始的時候沒在乎，後來發現star的人還很多...git

因而我決定完善完善，而後寫個博客介紹介紹...github

GitHub地址：SlideBackbash

效果以下：maven

使用方法

Step 1. 在你項目的根build.gradle中添加jitpack.io庫ide

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
複製代碼

Step 2. 添加SlideBack的依賴gradle

dependencies {
    implementation 'com.github.ChenTianSaber:SlideBack:v0.8.1'
}
複製代碼

Step 3. 將項目中繼承的Activity換成SlideBackActivity動畫

public class YourActivity extends SlideBackActivity
複製代碼

Step 4. 你能夠在onCreate方法中調用setSlideBackDirection，能夠給每個Activity單獨配置，若是沒有配置這個，那麼默認是 SlideBackActivity.ALLui

protected void onCreate(Bundle savedInstanceState) {
    //Other Code...

    //有三個值能夠設置
    //SlideBackActivity.RIGHT  表示只能從屏幕右側滑出
    //SlideBackActivity.LEFT  表示只能從屏幕左側滑出
    //SlideBackActivity.ALL  表示從屏幕兩邊均可以滑出
    setSlideBackDirection(SlideBackActivity.RIGHT);
}
複製代碼

Step 5. 重寫slideBackSuccess(當滑動有效時會回調這個方法，能夠在這裏進行回退操做或其餘)this

@Override
protected void slideBackSuccess() {
   finish();//或者其餘
}
複製代碼

實現原理

原理很簡單，具體的你們能夠上GitHub看源碼，沒幾行代碼，很短噠url

至於這篇文章裏，我就簡單的講一下好了：

Step 1.首先咱們畫一個自定義view，就是你從屏幕邊緣拉出來的那個東西，咱們將其稱爲側滑View 好了

這個View只有一個可變的參數，就是View的寬度。其他全部的座標都是根據這個寬度來計算的，因而咱們只要改變這個寬度就能夠作出一種動畫的效果

Step 2.而後咱們獲取DecorView，並將上面的這個側滑View添加進去，關鍵代碼以下：

FrameLayout container = (FrameLayout) getWindow().getDecorView();
containerView = LayoutInflater.from(this).inflate(R.layout.chentian_view_slide_container, null);
slideContainerView = containerView.findViewById(R.id.slide_container);
slideContainerView.addView(backView);
container.addView(slideContainerView);
複製代碼

Step 3.最後一步就是監聽DecorView的Touch事件，來判斷滑動的區域以及滑動距離來設置側滑View的參數，關鍵代碼以下：

slideContainerView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        x = Math.abs(screenWidth * offset - motionEvent.getRawX());
        y = motionEvent.getRawY();

        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = motionEvent.getRawX();

                //判斷點擊範圍與設置的滑出區域是否符合
                if (SLIDEBACK_DIRECTION == LEFT) {
                    if (downX > screenWidth / 2) {
                        //在右側區域，直接return
                        return false;
                    } else {
                        offset = 0;
                    }
                } else if (SLIDEBACK_DIRECTION == RIGHT) {
                    if (downX < screenWidth / 2) {
                        //在左側區域，直接return
                        return false;
                    } else {
                        offset = 1;
                    }
                } else if (SLIDEBACK_DIRECTION == ALL) {
                    if (downX > screenWidth / 2) {
                        //在右側區域，設爲RIGHT
                        offset = 1;
                    } else if (downX < screenWidth / 2) {
                        //在左側區域，設爲LEFT
                        offset = 0;
                    }
                }

                x = Math.abs(screenWidth * offset - motionEvent.getRawX());

                if (x <= dp2px(CANSLIDE_LENGTH)) {
                    isEage = true;
                    slideBackView.updateControlPoint(Math.abs(x), offset);
                    setBackViewY(backView, (int) (motionEvent.getRawY()));
                }
                break;

            case MotionEvent.ACTION_MOVE:
                float moveX = Math.abs(screenWidth * offset - x) - downX;
                if (isEage) {
                    if (Math.abs(moveX) <= shouldFinishPix) {
                        slideBackView.updateControlPoint(Math.abs(moveX) / 2, offset);
                    }
                    setBackViewY(backView, (int) (motionEvent.getRawY()));
                }
                break;

            case MotionEvent.ACTION_UP:
                //從左邊緣划過來，而且最後在屏幕的三分之一外
                if (isEage) {
                    if (x >= shouldFinishPix) {
                        slideBackSuccess();
                    }
                }
                isEage = false;
                slideBackView.updateControlPoint(0, offset);
                break;
        }
        if (isEage) {
            return true;
        } else {
            return false;
        }
    }
});
複製代碼