Android应用开发-------------仿苹果右滑退出页面效果

博客为 有时个哥 原创，如需转载请标明出处：http://blog.csdn.net/ls703/article/details/41312921

前一段时间一个朋友说他们做应用，跟着苹果的效果做，苹果上有一个右滑退出页面的效果，滑到一般不想退出可以滑回来的那种。他说他和自己的项目经理写了一个，效果都不理想，我忙完自己的工作，有时间自己写了写，效果还算可以。一般这种页面是需要自定义的。如果在一个activity里面实现这种效果，是不算难的。但是我们不可能把所有的页面都放在一个activity里面，所以我就单独写了一个有这个效果的activity，假如我们想要用这种效果的，我们只要继承这个activity即可，这个activity除了有右滑功能，其他的和正常的activity使用一样。所以不会影响正常开发。下面就开始说一下具体思路。由于自己按自己的想法写的，所以有不足之处还请大家指教。

首先，要实现这个效果需要自定义页面，所以，我们首先先自定义一个布局页面，先晒代码：

package com.example.slidingactivity.ui.weiget;

import com.example.slidingactivity.R;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.widget.RelativeLayout;
import android.widget.Scroller;


public class BaseRelativeLayout extends RelativeLayout {
	private Activity activity;
	int currentScreen  = LEFT_SCREEN;
	private static final int LEFT_SCREEN = 0;
	private static final int RIGHT_SCREEN = 1;
	private Scroller mScroller;		// 专门用模拟数据.
	
	public BaseRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, R.style.Transparent);
	}

	public BaseRelativeLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public BaseRelativeLayout(Context context) {
		super(context);
		this.activity = (Activity)context;
		mScroller = new Scroller(context);
		//获得触发滑动事件的最短距离
		scaledTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
	}
	
	int oldX;
	@Override
	public boolean onTouchEvent(MotionEvent event) {
//		System.out.println("width:"+	getWidth()+"height:"+getHeight());
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			oldX = (int)event.getX();
			break;
		case MotionEvent.ACTION_UP:
			if(getScrollX()<0&&getScrollX()>-getMeasuredWidth()/2){
				currentScreen = LEFT_SCREEN;
			}
			if(getScrollX()<=-getMeasuredWidth()/2&&getScrollX()>=-getMeasuredWidth()){
				currentScreen = RIGHT_SCREEN;
			}
			scrollScreen();
			break;
		case MotionEvent.ACTION_MOVE:
			//移动后的坐标
			int moveX = (int)event.getX();
			//偏移量
			int deltaX  = (oldX-moveX);
			//滑动距离加上偏移量
			int newScrollX = getScrollX() + deltaX;// 获得当前屏幕x轴的偏移量
			if(newScrollX>0){
				scrollTo(0, 0);
			}else if(newScrollX<=-getMeasuredWidth()){
				scrollTo(-getMeasuredWidth(), 0);
				activity.finish();
			}else{
				scrollBy(deltaX, 0);
			}
			oldX = moveX;
			break;
		default:
			break;
		}
		return true;
	}

	/**
	 * 根据currentScreen变量来切换屏幕的显示
	 */
	private void scrollScreen() {
		int scrollX = getScrollX();
		int dx = 0;
		if(currentScreen == LEFT_SCREEN) {
			// 向左滑动
			dx = 0 - scrollX;
		} else if(currentScreen == RIGHT_SCREEN) {
			// 向右滑动
			dx = -getChildAt(0).getMeasuredWidth() - scrollX;
		}
		// 开始模拟数据了.
		mScroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx) * 2);
		// 刷新当前控件, 会引起当前控件的重绘.
		invalidate(); // -> drawChild -> child.draw -> computeScroll()
	}

	/**
	 * 更新当前屏幕的x轴的值
	 * 如果mScroller类一直正在模拟数据. 想让computeScroll方法一直被调用, mScroller停止模拟时停止调用此方法
	 */
	@Override
	public void computeScroll() {
		if(mScroller.computeScrollOffset()) { // true 代表当前正在模拟数据. false 已经停止模拟数据了
			scrollTo(mScroller.getCurrX(), 0);
			invalidate();	// 递归, 自己掉自己.
			if(getScrollX()<=-getMeasuredWidth()){
				activity.finish();
			}
		}
	}
	
	/**
	 * 在此拦截事件，左右滑动自身消费点事件
	 */
	
	private int scaledTouchSlop;
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			oldX =  (int)ev.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			int moveX = (int) ev.getX();
			int diff = Math.abs(moveX - oldX);
			if(diff > scaledTouchSlop) {
				return true;
			}
			break;
		default:
			break;
		}
		return super.onInterceptTouchEvent(ev);
	}
}

既然要实现滑动，那么就需要重新写ontouch方法，利用触屏监听的不同效果，先实现页面能移动。然后根据位移量来实现移动布局。上面代码光剑地方也已做了注释，上面就是自定义的一个可滑动的自定义布局。实现自定义布局后，那然后我们就开始想怎样让他添加在一个activity钟，而不影响activity的正常使用。我们要的效果就是让他和平常的activity用法一样。直接继承使用即可。所以我写了一个基类BaseActivity一下是他的代码。

package com.example.slidingactivity.base;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TextView;

import com.example.slidingactivity.R;
import com.example.slidingactivity.ui.weiget.BaseRelativeLayout;

public class BaseActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // setTheme(R.style.Transparent);
 }

 public void setContentView(View view) {
  super.setContentView(getBaseView(view));
  // setTheme(R.style.Transparent);
 }

 public void setContentView(int layoutResId) {
 // setTheme(R.style.Transparent);
  View view = View.inflate(this, layoutResId, null);
  TextView tv = new TextView(this);
  tv.setText("nihao");
  super.setContentView(getBaseView(view));
 }

 private RelativeLayout getBaseView(View view) {
  BaseRelativeLayout baseView = new BaseRelativeLayout(this);
  view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
    LayoutParams.MATCH_PARENT));
  baseView.addView(view);
  return baseView;
 }
}

这就是整个类的代码，看着代码不多。既然要做到和普通的activity一样，那么布局就是使用这给的，所以我这里选择，BaseActivity没有自己静态布局的布局，使用代码动态添加使用继承者提供的布局。

为了和普通的activity一样，所以这里我重写了setContentView方法，这样方法是我们熟悉的名字，就直接使用即可，通过重写这个方法，来得到子类传入的布局，得到子类传入的布局，我们下一步就是让子类的布局和我们自定义的滑动布局结合。其实思路是这样的，把子类布局嵌入自定义的华东布局中。而滑动布局就是BaseActivity的布局。

这样大体的完成了一大半了。没错就是这么简单。还有一个比较重要的一步。那就是给Activity设置透明风格。因为是不同的Activity，在滑动的页面的时候我们需要看到下面的Activity，所以要把Activity设置成透明的。这里我也遇到一个问题。我没有找到在代码里把整个Activity设置成透明的办法。网上一些资料总是在工程里实现不了那种效果。所以我是在xml设置style，在清单文件里给Activity设置成透明的风格。

    <style name="Transparent"  parent="AppTheme">
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@+android:style/Animation.Translucent</item>
    </style>

在清单文件里，  

 <activity android:name="com.example.slidingactivity.ContentActivity"
           android:theme="@style/Transparent"
           ></activity>

如果想整个应用使用这种效果，那可以吧整个应用设置成透明的风格。

这样就万事大吉了。让后我们写几个子类，继承BaseActivity，

package com.example.slidingactivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

import com.example.slidingactivity.base.BaseActivity;

public class ContentActivity extends BaseActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_content);
  Button content = (Button)findViewById(R.id.content);
  content.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
//    Toast.makeText(ContentActivity.this, "点击了", 0).show();
    Intent intent = new Intent(ContentActivity.this,ContentActivity1.class);
    startActivity(intent);
   }
  });
 }
  }
}

MainActivity的代码

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button tvClick = (Button) findViewById(R.id.tvClick);
        tvClick.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				Intent intent = new Intent(MainActivity.this,ContentActivity.class);
				startActivity(intent);
			}
		});
    }

    
}

下面是源码：

http://download.csdn.net/detail/ls703/8179981

大家有什么好的方法，或实现效果，可以一块交流。

在最后，我也在这里求大家指教，BaseActivity中把Activity变成透明的方法，也就是滑动的时候能看见下面的Activity。是求在代码中实现。如果在代码中能实现那种效果，那样就不用麻烦在清单文件里配置了。使用起来就会更加方便。

 

题外话：写完之后听朋友说，有这方面的架包，大家也可以去下载，在githup上面。具体地址我忘了，嘿嘿，大家可以自己找找。