美文网首页自定义View系列View精选案例
Android向右滑动关闭界面(仿iOS)

Android向右滑动关闭界面(仿iOS)

作者: 王晨彦 | 来源:发表于2016-01-20 11:26 被阅读6355次

    SlidingClose

    向右滑动关闭界面(仿iOS)

    该项目只作为学习参考,不具有实际应用的意义,不建议大家直接拿来使用。

    大概效果就是, Activity 向右滑动,滑动超过屏幕的一半,就关闭,否则,恢复原来的状态。

    解决了滑动冲突

    截图

    源码解析

    配置透明主题

    要想 Activity 滑出屏幕后不遮挡下层 Activity ,需设置透明主题

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    
    <style name="AppTheme.Slide" parent="@style/AppTheme">
        <!--Required-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@style/AppTheme.Slide.Animation</item>
    </style>
    
    <style name="AppTheme.Slide.Animation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/anim_slide_in</item>
        <item name="android:activityOpenExitAnimation">@anim/anim_slide_out</item>
        <item name="android:activityCloseEnterAnimation">@anim/anim_slide_in</item>
        <item name="android:activityCloseExitAnimation">@anim/anim_slide_out</item>
    </style>
    

    如果需要滑动关闭则指定 Activity 的 theme 为 AppTheme.Slide ,否则使用 AppTheme

    这里也添加了 Activity 切换动画,增强体验。

    SlideLayout

    继承自 FrameLayout ,主要是处理滑动逻辑和滑动冲突。

    public class SlidingLayout extends FrameLayout {
        // 页面边缘阴影的宽度默认值
        private static final int SHADOW_WIDTH = 16;
        private Activity mActivity;
        private Scroller mScroller;
        // 页面边缘的阴影图
        private Drawable mLeftShadow;
        // 页面边缘阴影的宽度
        private int mShadowWidth;
        private int mInterceptDownX;
        private int mLastInterceptX;
        private int mLastInterceptY;
        private int mTouchDownX;
        private int mLastTouchX;
        private int mLastTouchY;
        private boolean isConsumed = false;
    
        public SlidingLayout(Context context) {
            this(context, null);
        }
    
        public SlidingLayout(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SlidingLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initView(context);
        }
    
        private void initView(Context context) {
            mScroller = new Scroller(context);
            mLeftShadow = getResources().getDrawable(R.drawable.left_shadow);
            int density = (int) getResources().getDisplayMetrics().density;
            mShadowWidth = SHADOW_WIDTH * density;
        }
    
        /**
         * 绑定Activity
         */
        public void bindActivity(Activity activity) {
            mActivity = activity;
            ViewGroup decorView = (ViewGroup) mActivity.getWindow().getDecorView();
            View child = decorView.getChildAt(0);
            decorView.removeView(child);
            addView(child);
            decorView.addView(this);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            boolean intercept = false;
            int x = (int) ev.getX();
            int y = (int) ev.getY();
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    intercept = false;
                    mInterceptDownX = x;
                    mLastInterceptX = x;
                    mLastInterceptY = y;
                    break;
                case MotionEvent.ACTION_MOVE:
                    int deltaX = x - mLastInterceptX;
                    int deltaY = y - mLastInterceptY;
                    // 手指处于屏幕边缘,且横向滑动距离大于纵向滑动距离时,拦截事件
                    if (mInterceptDownX < (getWidth() / 10) && Math.abs(deltaX) > Math.abs(deltaY)) {
                        intercept = true;
                    } else {
                        intercept = false;
                    }
                    mLastInterceptX = x;
                    mLastInterceptY = y;
                    break;
                case MotionEvent.ACTION_UP:
                    intercept = false;
                    mInterceptDownX = mLastInterceptX = mLastInterceptY = 0;
                    break;
            }
            return intercept;
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            int x = (int) ev.getX();
            int y = (int) ev.getY();
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mTouchDownX = x;
                    mLastTouchX = x;
                    mLastTouchY = y;
                    break;
                case MotionEvent.ACTION_MOVE:
                    int deltaX = x - mLastTouchX;
                    int deltaY = y - mLastTouchY;
    
                    if (!isConsumed && mTouchDownX < (getWidth() / 10) && Math.abs(deltaX) > Math.abs(deltaY)) {
                        isConsumed = true;
                    }
    
                    if (isConsumed) {
                        int rightMovedX = mLastTouchX - (int) ev.getX();
                        // 左侧即将滑出屏幕
                        if (getScrollX() + rightMovedX >= 0) {
                            scrollTo(0, 0);
                        } else {
                            scrollBy(rightMovedX, 0);
                        }
                    }
                    mLastTouchX = x;
                    mLastTouchY = y;
                    break;
                case MotionEvent.ACTION_UP:
                    isConsumed = false;
                    mTouchDownX = mLastTouchX = mLastTouchY = 0;
                    // 根据手指释放时的位置决定回弹还是关闭
                    if (-getScrollX() < getWidth() / 2) {
                        scrollBack();
                    } else {
                        scrollClose();
                    }
                    break;
            }
            return true;
        }
    
        /**
         * 滑动返回
         */
        private void scrollBack() {
            int startX = getScrollX();
            int dx = -getScrollX();
            mScroller.startScroll(startX, 0, dx, 0, 300);
            invalidate();
        }
    
        /**
         * 滑动关闭
         */
        private void scrollClose() {
            int startX = getScrollX();
            int dx = -getScrollX() - getWidth();
            mScroller.startScroll(startX, 0, dx, 0, 300);
            invalidate();
        }
    
        @Override
        public void computeScroll() {
            if (mScroller.computeScrollOffset()) {
                scrollTo(mScroller.getCurrX(), 0);
                postInvalidate();
            } else if (-getScrollX() >= getWidth()) {
                mActivity.finish();
            }
        }
    
        @Override
        protected void dispatchDraw(Canvas canvas) {
            super.dispatchDraw(canvas);
            drawShadow(canvas);
        }
    
        /**
         * 绘制边缘的阴影
         */
        private void drawShadow(Canvas canvas) {
            mLeftShadow.setBounds(0, 0, mShadowWidth, getHeight());
            canvas.save();
            canvas.translate(-mShadowWidth, 0);
            mLeftShadow.draw(canvas);
            canvas.restore();
        }
    }
    

    重写 onInterceptTouchEventonTouchEvent 处理滑动逻辑和滑动冲突。

    • 当有子 View 消费 Touch 事件时,事件会经过 SlidingLayout 的 onInterceptTouchEvent 。当手指在屏幕边缘按下(mTouchDownX < (getWidth() / 10)),且横向滑动距离大于纵向滑动距离,则拦截事件,交由 onTouchEvent 处理。
    • 当没有子 View 消费 Touch 事件时,事件会直接回传到 SlidingLayout 的 onTouchEvent 中,这时需要在 onTouchEvent 中判断是否需要消费该事件,条件同上。
    • 滑动过程中如果 View 即将滑出屏幕左侧,则直接把 View 滑动到 (0,0) 位置。
    • 手指释放后,如果滑动距离超过屏幕的一半,则关闭 Activity ,否则,恢复原来状态。
    • 使用 Scroller 来处理手指释放后的滑动操作。
    • dispatchDraw 中绘制 View 左侧的阴影,增加层次感。

    SlideActivity

    继承自 AppCompatActivity ,作为滑动关闭 Activity 的基类,主要是做了绑定操作。

    public class SlidingActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if (enableSliding()) {
                SlidingLayout rootView = new SlidingLayout(this);
                rootView.bindActivity(this);
            }
        }
    
        protected boolean enableSliding() {
            return true;
        }
    }
    

    如果不需要滑动关闭,则重写 enableSliding 并返回 false 。

    使用

    • 下载源码。
    • 将 Activity 的基类继承 SlideActivity 。
    • 将需要滑动关闭的 Activity 的 theme 指定为 AppTheme.Slide
    • 将不需要滑动关闭的 Activity (如 App 主界面)的 theme 指定为 AppTheme ,重写 enableSliding 并返回 false 。

    License

    Copyright 2016 wangchenyan
    
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    
       http://www.apache.org/licenses/LICENSE-2.0
    
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

    相关文章

      网友评论

      • 4df7be373900:作者你好,看了你的文章,觉得写得很好,能否把进出动画发出来,参考一下呢
      • 帅帅de军军:有一个问题,设置主题透明后,如果activity有popupwindow的话,点击popupwindow会出现两个activity重叠,即acitivity穿透问题,怎么解决
      • urnotxx:请问一下
        if (getScrollX() + rightMovedX >= 0) {
        scrollTo(0, 0);
        } else {
        scrollBy(rightMovedX, 0);
        }
        这个判断是干嘛的 有什么用吗 ?
      • MigrationUK:为什么decorView.removeView(child);
        又 addView(child);
        GoogleCrypto:@端好这碗粥 闪屏的你是怎么解决的? 侧滑关闭后顶部有个小闪屏
        端好这碗粥:快速点击会开启两个界面,而且有时候会闪屏,问题特别严重
        王晨彦: @MigrationUK 这样才能把我们的自定义layout加进去。
      • 4f06db1f1394:你好,将activity设置为AppTheme.Slide时,跳转之后的activity可能看得到下面的activity.这个求教如何解决
        GoogleCrypto:需要给 侧滑activity 的布局设置背景颜色,比如父布局需要设置一个颜色背景,一般白色就行
      • 砺雪凝霜:这种方案有一个缺点,容易导致滑动冲突
        巴黎没有摩天轮Li:使用这个方法 跳转界面的时候 快速点击跳转事件点击两次 导致闪屏 就是突然间像是闪退一样 但是 Activity
        只是变透明
        cc_a818:@ChayWong 侧滑能否改成手势缩小关闭activity
        王晨彦:这里已经处理了滑动冲突。
      • 3ce2620b05f3:设置为透明色之后,就会出现延时调用onStop方法或根本不调用的情况。作者你发现这个问题了么?
      • 3d2004e7f969:你好,怎么才能做到右滑activity边缘没有阴影效果
        王晨彦:@3d2004e7f969 把drawShadow方法注释即可。
      • 2107664d8869:不在dispatchTouchEvent和interceptTouchEvnet中处理事件,复杂的布局根本行不通
        子View直接拦截OnTouchEvent事件,或者限制父View拦截OnTouchEvent事件。
        王晨彦:@androidlli 是的:clap:
        67e2948ff20a:在拦截方法中捕获move,如果满足侧滑,那么返回true,进行拦截,并在自己的ontouchevent中处理,非侧滑,就返回false不拦截,事件会传递给子view。
        王晨彦:@studio_ou 之前回复的有问题。如果在dispatchTouchEvent或interceptTouchEvnet中处理事件,子View就无法收到事件了。关于子View拦截onTouchEvent,这是无法避免的,只能交给子View去处理了,比如ViewPager。
      • jimbo_zjb:直接移除了decorview下面的linearlayout会不会造成什么问题
        王晨彦:@jimbo_zjb 就目前来看,是没有问题的。
      • 饥渴计科极客杰铿:怎么才能使手指在边缘开始滑动它才能滑动呢
        王晨彦:@饥渴计科极客杰铿 ACTION_DOWN判断手指位置即可
        饥渴计科极客杰铿:@饥渴计科极客杰铿 而且有时第一个activity会变透明了
      • 无辜的小黄人:首页如何不让它滑动呢?
        王晨彦:@无辜的小黄人 首页继承普通Activity即可。
      • Yang_Bob:你好,当activity的主题设置为“<style name="Theme.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowIsTranslucent">true</item>
        </style>”时,右滑返回会有一个白色的背景出现
        4df7be373900:作者你好, 能否把进出动画发一下
        tuxw:给要关闭的Activity设置背景颜色,就不会有白色的背景出现
        王晨彦:@bobyang912 需要透明主题的
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
        添加这几个属性试试。

      本文标题:Android向右滑动关闭界面(仿iOS)

      本文链接:https://www.haomeiwen.com/subject/gwhlkttx.html