技术联盟

Android 向右滑动销毁(finish)Activity, 随着手势的滑动而滑动的效果

转载(http://blog.csdn.net/xiaanming/article/details/20934541

今天给大家带来一个向右滑动销毁Activity的效果,Activtiy随着手指的移动而移动,该效果在Android应用中还是比较少见的,在IOS中就比较常见了,例如“网易新闻” ,”美食杰” , “淘宝”等应用采用此效果,而Android应用中“知乎”采用的也是这种滑动切换Activity的效果, 不过我发现“淘宝”并没有随着手势的移动而移动,只是捕捉到滑动手势,然后产生平滑切换界面的动画效果,这个在Android中还是很好实现的,  网上很多滑动切换Activity的Demo貌似都是这种效果的吧,如果要实现类似“网易新闻”的随手势的滑动而滑动,似乎就要复杂一些了,我之前在IOS中看到”网易新闻”的这种效果就很感兴趣,然后群里也有朋友问我怎么实现类似“知乎”这个应用的滑动切换的效果,我也特意去下了一个“知乎”,在之前的实现中我遇到了一些瓶颈,没有实现出来就搁置了在那里,今天无意中看到给Activity设置透明的背景,于是乎我恍然大悟,真是灵感来源于瞬间,不能强求啊,然后自己就将此效果实现了出来,给大家分享一下,希望给有此需求的你一点点帮助。

不知道大家对Scroller这个类以及View的scrollBy() 和scrollTo()的使用熟悉不?我之前介绍了Scroller类的滑动实现原理Android 带你从源码的角度解析Scroller的滚动实现原理,在那里面也介绍了scrollBy() 和scrollTo()方法,不明白的同学可以去看看,这对实现此效果有很大的帮助,了解scrollBy() 和scrollTo()的朋友应该知道,如果想对某个View(例如Button)就行滚动,我们直接调用该View(Button)的scrollBy()方法,并不是该View(Button)进行滚动,而是该View里面的内容(Button上面的文字)进行滚动,所以我们假如要让View整体滚动就需要对其View的父布局调用scrollBy()方法,回到这篇文章来,假如我们想要对一个Activity进行滚动,我们就需求对这个Activity布局文件的顶层布局的父布局进行滚动

例如下面的XML布局文件

  1. <LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=“http://schemas.android.com/tools”
  3.     android:layout_width=“match_parent”
  4.     android:layout_height=“match_parent”
  5.     android:gravity=“center”
  6.     android:orientation=“vertical” >
  7. </LinearLayout>

如果我们对LinearLayout进行滚动,并不能实现我们想要的效果,而只能对LinearLayout里面的内容或者说是子View进行滚动,所以我们需要获取利用LinearLayout的getParent()方法获取父布局,其实Android系统会对我们的布局文件的最外层套一个FrameLayout,所以我们其实就是对FrameLayout进行滚动就行了

了解了实现的原理之后,我们就来编写代码吧,首先新建一个android工程,取名SildingFinish

由于我们的需求可能不是在一个界面提供这个滑动切换的效果,所以我们应该将这部分滑动的逻辑抽取出来,我这里就他写成了一个扩展RelativeLayout的自定义布局SildingFinishLayout,首先我们看其代码

  1. package com.example.view;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.View.OnTouchListener;
  7. import android.view.ViewConfiguration;
  8. import android.view.ViewGroup;
  9. import android.widget.AbsListView;
  10. import android.widget.RelativeLayout;
  11. import android.widget.ScrollView;
  12. import android.widget.Scroller;
  13. /**
  14.  * 自定义可以滑动的RelativeLayout, 类似于IOS的滑动删除页面效果,当我们要使用
  15.  * 此功能的时候,需要将该Activity的顶层布局设置为SildingFinishLayout,
  16.  * 然后需要调用setTouchView()方法来设置需要滑动的View
  17.  * 
  18.  * @author xiaanming
  19.  * 
  20.  * @blog http://blog.csdn.net/xiaanming
  21.  * 
  22.  */
  23. public class SildingFinishLayout extends RelativeLayout implements
  24.         OnTouchListener {
  25.     /**
  26.      * SildingFinishLayout布局的父布局
  27.      */
  28.     private ViewGroup mParentView;
  29.     /**
  30.      * 处理滑动逻辑的View
  31.      */
  32.     private View touchView;
  33.     /**
  34.      * 滑动的最小距离
  35.      */
  36.     private int mTouchSlop;
  37.     /**
  38.      * 按下点的X坐标
  39.      */
  40.     private int downX;
  41.     /**
  42.      * 按下点的Y坐标
  43.      */
  44.     private int downY;
  45.     /**
  46.      * 临时存储X坐标
  47.      */
  48.     private int tempX;
  49.     /**
  50.      * 滑动类
  51.      */
  52.     private Scroller mScroller;
  53.     /**
  54.      * SildingFinishLayout的宽度
  55.      */
  56.     private int viewWidth;
  57.     /**
  58.      * 记录是否正在滑动
  59.      */
  60.     private boolean isSilding;
  61.     private OnSildingFinishListener onSildingFinishListener;
  62.     private boolean isFinish;
  63.     public SildingFinishLayout(Context context, AttributeSet attrs) {
  64.         this(context, attrs, 0);
  65.     }
  66.     public SildingFinishLayout(Context context, AttributeSet attrs, int defStyle) {
  67.         super(context, attrs, defStyle);
  68.         mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  69.         mScroller = new Scroller(context);
  70.     }
  71.     @Override
  72.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  73.         super.onLayout(changed, l, t, r, b);
  74.         if (changed) {
  75.             // 获取SildingFinishLayout所在布局的父布局
  76.             mParentView = (ViewGroup) this.getParent();
  77.             viewWidth = this.getWidth();
  78.         }
  79.     }
  80.     /**
  81.      * 设置OnSildingFinishListener, 在onSildingFinish()方法中finish Activity
  82.      * 
  83.      * @param onSildingFinishListener
  84.      */
  85.     public void setOnSildingFinishListener(
  86.             OnSildingFinishListener onSildingFinishListener) {
  87.         this.onSildingFinishListener = onSildingFinishListener;
  88.     }
  89.     /**
  90.      * 设置Touch的View
  91.      * 
  92.      * @param touchView
  93.      */
  94.     public void setTouchView(View touchView) {
  95.         this.touchView = touchView;
  96.         touchView.setOnTouchListener(this);
  97.     }
  98.     public View getTouchView() {
  99.         return touchView;
  100.     }
  101.     /**
  102.      * 滚动出界面
  103.      */
  104.     private void scrollRight() {
  105.         final int delta = (viewWidth + mParentView.getScrollX());
  106.         // 调用startScroll方法来设置一些滚动的参数,我们在computeScroll()方法中调用scrollTo来滚动item
  107.         mScroller.startScroll(mParentView.getScrollX(), 0, -delta + 10,
  108.                 Math.abs(delta));
  109.         postInvalidate();
  110.     }
  111.     /**
  112.      * 滚动到起始位置
  113.      */
  114.     private void scrollOrigin() {
  115.         int delta = mParentView.getScrollX();
  116.         mScroller.startScroll(mParentView.getScrollX(), 0, -delta, 0,
  117.                 Math.abs(delta));
  118.         postInvalidate();
  119.     }
  120.     /**
  121.      * touch的View是否是AbsListView, 例如ListView, GridView等其子类
  122.      * 
  123.      * @return
  124.      */
  125.     private boolean isTouchOnAbsListView() {
  126.         return touchView instanceof AbsListView ? true : false;
  127.     }
  128.     /**
  129.      * touch的view是否是ScrollView或者其子类
  130.      * 
  131.      * @return
  132.      */
  133.     private boolean isTouchOnScrollView() {
  134.         return touchView instanceof ScrollView ? true : false;
  135.     }
  136.     @Override
  137.     public boolean onTouch(View v, MotionEvent event) {
  138.         switch (event.getAction()) {
  139.         case MotionEvent.ACTION_DOWN:
  140.             downX = tempX = (int) event.getRawX();
  141.             downY = (int) event.getRawY();
  142.             break;
  143.         case MotionEvent.ACTION_MOVE:
  144.             int moveX = (int) event.getRawX();
  145.             int deltaX = tempX – moveX;
  146.             tempX = moveX;
  147.             if (Math.abs(moveX – downX) > mTouchSlop
  148.                     && Math.abs((int) event.getRawY() – downY) < mTouchSlop) {
  149.                 isSilding = true;
  150.                 // 若touchView是AbsListView,
  151.                 // 则当手指滑动,取消item的点击事件,不然我们滑动也伴随着item点击事件的发生
  152.                 if (isTouchOnAbsListView()) {
  153.                     MotionEvent cancelEvent = MotionEvent.obtain(event);
  154.                     cancelEvent
  155.                             .setAction(MotionEvent.ACTION_CANCEL
  156.                                     | (event.getActionIndex() << MotionEvent.ACTION_POINTER_INDEX_SHIFT));
  157.                     v.onTouchEvent(cancelEvent);
  158.                 }
  159.             }
  160.             if (moveX – downX >= 0 && isSilding) {
  161.                 mParentView.scrollBy(deltaX, 0);
  162.                 // 屏蔽在滑动过程中ListView ScrollView等自己的滑动事件
  163.                 if (isTouchOnScrollView() || isTouchOnAbsListView()) {
  164.                     return true;
  165.                 }
  166.             }
  167.             break;
  168.         case MotionEvent.ACTION_UP:
  169.             isSilding = false;
  170.             if (mParentView.getScrollX() <= -viewWidth / 2) {
  171.                 isFinish = true;
  172.                 scrollRight();
  173.             } else {
  174.                 scrollOrigin();
  175.                 isFinish = false;
  176.             }
  177.             break;
  178.         }
  179.         // 假如touch的view是AbsListView或者ScrollView 我们处理完上面自己的逻辑之后
  180.         // 再交给AbsListView, ScrollView自己处理其自己的逻辑
  181.         if (isTouchOnScrollView() || isTouchOnAbsListView()) {
  182.             return v.onTouchEvent(event);
  183.         }
  184.         // 其他的情况直接返回true
  185.         return true;
  186.     }
  187.     @Override
  188.     public void computeScroll() {
  189.         // 调用startScroll的时候scroller.computeScrollOffset()返回true,
  190.         if (mScroller.computeScrollOffset()) {
  191.             mParentView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
  192.             postInvalidate();
  193.             if (mScroller.isFinished()) {
  194.                 if (onSildingFinishListener != null && isFinish) {
  195.                     onSildingFinishListener.onSildingFinish();
  196.                 }
  197.             }
  198.         }
  199.     }
  200.     public interface OnSildingFinishListener {
  201.         public void onSildingFinish();
  202.     }
  203. }

我们在onLayout()方法中利用getParent()方法获取该布局的父布局和获取其控件的宽度,主要是为之后的实现做准备工作。

我们的滑动逻辑主要是利用View的scrollBy() 方法, scrollTo()方法和Scroller类来实现的,当手指拖动视图的时候,我们监听手指在屏幕上滑动的距离利用View的scrollBy() 方法使得View随着手指的滑动而滑动,而当手指离开屏幕,我们在根据逻辑使用Scroller类startScroll()方法设置滑动的参数,然后再根据View的scrollTo进行滚动。

对于View的滑动,存在一些Touch事件消费的处理等问题,因此我们需要对View的整个Touch事件很熟悉 ,最主要的就是Activity里面有一些ListView、 GridView、ScrollView等控件了, 假如我们Activity里面存在ListView、GridView等控件的话,我们对Activity的最外层布局进行滚动根本就无效果,因为Touch事件被ListView、GridView等控件消费了,所以Activity的最外层布局根本得不到Touch事件,也就实现不了Touch逻辑了,所以为了解决此Touch事件问题我提供了setTouchView(View touchView) 方法,这个方法是将Touch事件动态的设置到到View上面,所以针对上面的问题,我们将OnTouchListener直接设置到ListView、GridView上面,这样子就避免了Activity的最外层接受不到Touch事件的问题了

接下来看onTouch()方法

首先我们在ACTION_DOWN记录按下点的X,Y坐标

然后在ACTION_MOVE中判断,如果我们在水平方向滑动的距离大于mTouchSlop并且在竖直方向滑动的距离小于mTouchSlop,表示Activity处于滑动状态,我们判断如果touchView是ListView、GridView或者其子类的时候,因为我们手指在ListView、GridView上面,伴随着item的点击事件的发生,所以我们对touchView设置ACTION_CANCEL来取消item的点击事件,然后对该布局的父布局调用scrollBy()进行滚动,并且如果TouchView是AbsListView或者ScrollView直接返回true,来取消AbsListView或者ScrollView本身的ACTION_MOVE事件,最直观的感受就是我们在滑动Activity的时候,禁止AbsListView或者ScrollView的上下滑动

最后在ACTION_UP中判断如果手指滑动的距离大于控件长度的二分之一,表示将Activity滑出界面,否则滑动到起始位置,我们利用Scroller类的startScroll()方法设置好开始位置,滑动距离和时间,然后调用postInvalidate()刷新界面,之后就到computeScroll()方法中,我们利用scrollTo()方法对该布局的父布局进行滚动,滚动结束之后,我们判断界面是否滑出界面,如果是就调用OnSildingFinishListener接口的onSildingFinish()方法,所以只要在onSildingFinish()方法中finish界面就行了

整个滑动布局的代码就是这个样子,接下来我们就来使用了,主界面Activity只有三个按钮,分别跳转到普通布局的Activity,有ListView的Activity和有ScrollView的Activity中

  1. <LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=“http://schemas.android.com/tools”
  3.     android:layout_width=“match_parent”
  4.     android:layout_height=“match_parent”
  5.     android:gravity=“center”
  6.     android:orientation=“vertical” >
  7.     <Button
  8.         android:id=“@+id/normal_activity”
  9.         android:layout_width=“match_parent”
  10.         android:layout_height=“wrap_content”
  11.         android:text=“普通的Activity” />
  12.     <Button
  13.         android:id=“@+id/absListview_activity”
  14.         android:layout_width=“match_parent”
  15.         android:layout_height=“wrap_content”
  16.         android:text=“有AbsListView的Activity” />
  17.     <Button
  18.         android:id=“@+id/scrollview_activity”
  19.         android:layout_width=“match_parent”
  20.         android:layout_height=“wrap_content”
  21.         android:text=“有ScrollView的Activity” />
  22. </LinearLayout>

然后就是MainActivity的代码,根据ID实例化Button,然后为Button设置OnClickListener事件,不同的按钮跳转到不同的Activity,然后设置从右向左滑动的动画,重写onBackPressed()方法,当我们按下手机物理键盘的返回键,添加从左向右滑出的动画

  1. package com.example.slidingfinish;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.Window;
  8. import android.widget.Button;
  9. import com.example.slidingfinish.R;
  10. public class MainActivity extends Activity implements OnClickListener {
  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.activity_main);
  16.         Button mButtonNormal = (Button) findViewById(R.id.normal_activity);
  17.         mButtonNormal.setOnClickListener(this);
  18.         Button mButtonAbs = (Button) findViewById(R.id.absListview_activity);
  19.         mButtonAbs.setOnClickListener(this);
  20.         Button mButtonScroll = (Button) findViewById(R.id.scrollview_activity);
  21.         mButtonScroll.setOnClickListener(this);
  22.     }
  23.     @Override
  24.     public void onClick(View v) {
  25.         Intent mIntent = null;
  26.         switch (v.getId()) {
  27.         case R.id.normal_activity:
  28.             mIntent = new Intent(MainActivity.this, NormalActivity.class);
  29.             break;
  30.         case R.id.absListview_activity:
  31.             mIntent = new Intent(MainActivity.this, AbsActivity.class);
  32.             break;
  33.         case R.id.scrollview_activity:
  34.             mIntent = new Intent(MainActivity.this, ScrollActivity.class);
  35.             break;
  36.         }
  37.         startActivity(mIntent);
  38.         overridePendingTransition(R.anim.base_slide_right_in, R.anim.base_slide_remain);
  39.     }
  40.     //Press the back button in mobile phone
  41.     @Override
  42.     public void onBackPressed() {
  43.         super.onBackPressed();
  44.         overridePendingTransition(0, R.anim.base_slide_right_out);
  45.     }
  46. }

在这里我之贴出含有ListView的Activity的代码,先看布局,我们自定义滑动布局SildingFinishLayout应该放在XML的最顶层

  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <com.example.view.SildingFinishLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  3.     xmlns:tools=“http://schemas.android.com/tools”
  4.     android:id=“@+id/sildingFinishLayout”
  5.     android:layout_width=“match_parent”
  6.     android:layout_height=“match_parent”
  7.     android:background=“#556677” >
  8.     <ListView
  9.         android:id=“@+id/listView”
  10.         android:cacheColorHint=“@android:color/transparent”
  11.         android:layout_width=“match_parent”
  12.         android:layout_height=“match_parent” >
  13.     </ListView>
  14. </com.example.view.SildingFinishLayout>
  1. package com.example.slidingfinish;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.Activity;
  5. import android.content.Intent;
  6. import android.os.Bundle;
  7. import android.view.View;
  8. import android.view.Window;
  9. import android.widget.AdapterView;
  10. import android.widget.AdapterView.OnItemClickListener;
  11. import android.widget.ArrayAdapter;
  12. import android.widget.ListView;
  13. import com.example.slidingfinish.R;
  14. import com.example.view.SildingFinishLayout;
  15. import com.example.view.SildingFinishLayout.OnSildingFinishListener;
  16. public class AbsActivity extends Activity {
  17.     private List<String> list = new ArrayList<String>();
  18.     @Override
  19.     protected void onCreate(Bundle savedInstanceState) {
  20.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_abslistview);
  23.         for (int i = 0; i <= 30; i++) {
  24.             list.add(“测试数据” + i);
  25.         }
  26.         ListView mListView = (ListView) findViewById(R.id.listView);
  27.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(
  28.                 AbsActivity.this, android.R.layout.simple_list_item_1, list);
  29.         mListView.setAdapter(adapter);
  30.         SildingFinishLayout mSildingFinishLayout = (SildingFinishLayout) findViewById(R.id.sildingFinishLayout);
  31.         mSildingFinishLayout
  32.                 .setOnSildingFinishListener(new OnSildingFinishListener() {
  33.                     @Override
  34.                     public void onSildingFinish() {
  35.                         AbsActivity.this.finish();
  36.                     }
  37.                 });
  38.         // touchView要设置到ListView上面
  39.         mSildingFinishLayout.setTouchView(mListView);
  40.         mListView.setOnItemClickListener(new OnItemClickListener() {
  41.             @Override
  42.             public void onItemClick(AdapterView<?> parent, View view,
  43.                     int position, long id) {
  44.                 startActivity(new Intent(AbsActivity.this, NormalActivity.class));
  45.                 overridePendingTransition(R.anim.base_slide_right_in,
  46.                         R.anim.base_slide_remain);
  47.             }
  48.         });
  49.     }
  50.     // Press the back button in mobile phone
  51.     @Override
  52.     public void onBackPressed() {
  53.         super.onBackPressed();
  54.         overridePendingTransition(0, R.anim.base_slide_right_out);
  55.     }
  56. }

利用ID找到SildingFinishLayout实例,利用setTouchView()方法设置touchView到ListView上面,然后调用setOnSildingFinishListener()设置OnSildingFinishListener,在onSildingFinish()中finish界面就可以啦。

在运行项目之前还有一个很重要的操作,也是之前我被卡到的问题,就是我们需要对Activity设置为透明,即设置主题android:theme=”@android:style/Theme.Translucent”

  1. <activity
  2.            android:name=“.AbsActivity”
  3.            android:theme=“@android:style/Theme.Translucent” >
  4.        </activity>
  5.        <activity
  6.            android:name=“.NormalActivity”
  7.            android:theme=“@android:style/Theme.Translucent” >
  8.        </activity>
  9.        <activity
  10.            android:name=“.ScrollActivity”
  11.            android:theme=“@android:style/Theme.Translucent” >
  12.        </activity>

好了,现在我们可以运行项目看看效果啦

 
正是我们想要的效果,如果想要加入滑动切换界面的效果只需要三步就行了,首先将Activity布局的最外层修改为SildingFinishLayout,然后在Activity里面调用setTouchView()方法设置touchView,设置OnSildingFinishListener监听在onSildingFinish()方法中finish界面,最后设置Activity的背景为透明(不是设置Activity布局文件的最顶层布局背景颜色透明,这点要区分一下)是不是很方便呢?好了,今天的讲解到这里就结束了,有疑问的朋友请在下面留言,有兴趣的朋友可以下载源码看看!

项目源码,点击下载

博主后面又改了下代码,写了一个简洁加强版的demo,代码更加简洁了,也对里面是ViewPager做了处理,并且加了边界的阴影效果,也不必要调用setTouchView()来设置那个View响应滚动,对SildingFinishLayout里面的子View是什么没有任何关系,如果大家想使用此效果的话,建议下载如下版本

加强简洁版,点击下载

 

Share this:

码字很辛苦,转载请注明来自技术联盟《Android 向右滑动销毁(finish)Activity, 随着手势的滑动而滑动的效果》

评论