实现页面侧滑的两种方式GestureDetector和ViewPager

页面侧滑的功能在Android的APP里面应用越来越广泛，最近几天也在弄一个APP里面有要实现侧滑功能，下面就通过这两种方法来实现一下。

1.通过GestureDetector来实现此功能，由于现在手机版本更新速度太快，由于SDK17版本把GestureDetector的手势侧滑功能阉割掉了。但是只要手动导入

import android.view.GestureDetector.SimpleOnGestureListener;包还是可以实现的下面直接贴出代码。

用一个基类实现代码跳转的方法，这样可以很好的简化代码。

<pre name="code" class="java">package com.lanzhu1933.mobilesafe;import android.app.Activity;import android.content.SharedPreferences;import android.os.Bundle;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import android.view.GestureDetector.SimpleOnGestureListener;import android.widget.Toast;public abstract class BaseSetupActivity extends Activity {//手势识别器private GestureDetector detector;protected SharedPreferences sp;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);sp = getSharedPreferences("config", MODE_PRIVATE);//2.实例化这个手势识别器detector = new GestureDetector(BaseSetupActivity.this, new SimpleOnGestureListener(){/** * 当我们手指在上面滑动的时候回调 */@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2,float velocityX, float velocityY) {//屏蔽在X滑动很慢的情if(Math.abs(velocityX)<100){Toast.makeText(getApplicationContext(), "滑动得太慢了", 0).show();return true;}//屏蔽斜划if(Math.abs((e2.getRawY()- e1.getRawY()))>100){Toast.makeText(getApplicationContext(), "不能这样划", 1).show();return true;}if((e2.getRawX()- e1.getRawX())>200){showPre();return true;}if((e1.getRawX()- e2.getRawX())>200){//显示下一个页面showNext();return true;}return super.onFling(e1, e2, velocityX, velocityY);}});}protected  abstract void showNext() ;protected  abstract void showPre() ;public void next(View view ){showNext();}public void previous(View view ){showPre() ;}//3.使用手势识别器@Overridepublic boolean onTouchEvent(MotionEvent event) {detector.onTouchEvent(event);return super.onTouchEvent(event);}}

<pre name="code" class="java">package com.lanzhu1933.mobilesafe;import android.content.Intent;import android.os.Bundle;import android.view.GestureDetector;public class Setup1Activity extends BaseSetupActivity {protected static final String TAG = "Setup1Activity";//手势识别器private GestureDetector detector;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_setup1);}@Overrideprotected void showNext() {Intent intent = new Intent(this,Setup2Activity.class);startActivity(intent);finish();//该方法要在finish();和startActivity后执行overridePendingTransition(R.anim.tran_in, R.anim.tran_out);}@Overrideprotected void showPre() {}}

<pre name="code" class="java">package com.lanzhu1933.mobilesafe;import com.lanzhu1933.mobilesafe.ui.SettingItemView;import android.content.Intent;import android.content.SharedPreferences.Editor;import android.os.Bundle;import android.telephony.TelephonyManager;import android.text.TextUtils;import android.view.View;import android.view.View.OnClickListener;import android.widget.Toast;public class Setup2Activity extends BaseSetupActivity {private SettingItemView siv_setup2_sim;/** * 读取手机SIM的信息 */private TelephonyManager tm;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_setup2);tm = (TelephonyManager) getSystemService(TELEPHONY_SERVICE);siv_setup2_sim = (SettingItemView) findViewById(R.id.siv_setup2_sim);String sim = sp.getString("sim", null);if(TextUtils.isEmpty(sim)){//如果勾选，既已经绑定siv_setup2_sim.setChecked(false);}else{//没有勾选就没有绑定siv_setup2_sim.setChecked(true);}siv_setup2_sim.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {String sim  = tm.getSimSerialNumber();Editor editor= sp.edit();if(siv_setup2_sim.isChecked()){siv_setup2_sim.setChecked(false);/** * 得到Sim序列号 */editor.putString("sim", null);editor.commit();}else{siv_setup2_sim.setChecked(true);/** * 得到Sim序列号 */editor.putString("sim", sim);editor.commit();}}});}@Overrideprotected void showNext() {//取出是否绑定SIM卡String sim = sp.getString("sim", null);if(TextUtils.isEmpty(sim)){Toast.makeText(this, "请勾选绑定SIM卡", 1).show();return;}Intent intent = new Intent(this, Setup3Activity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_in, R.anim.tran_out);}@Overrideprotected void showPre() {Intent intent = new Intent(this, Setup1Activity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_pre_in, R.anim.tran_pre_out);}}

package com.lanzhu1933.mobilesafe;import android.content.Intent;import android.os.Bundle;public class Setup3Activity extends BaseSetupActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_setup3);}@Overrideprotected void showNext() {Intent intent = new Intent(this,Setup4Activity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_in, R.anim.tran_out);}@Overrideprotected void showPre() {Intent intent = new Intent(this,Setup2Activity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_pre_in, R.anim.tran_pre_out);}}

界面4

package com.lanzhu1933.mobilesafe;import android.content.Intent;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;import android.os.Bundle;public class Setup4Activity extends BaseSetupActivity {private SharedPreferences sp;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_setup4);sp = getSharedPreferences("config", MODE_PRIVATE);}@Overrideprotected void showNext() {Editor editor = sp.edit();editor.putBoolean("configed", true);editor.commit();Intent intent = new Intent(this,LostFindActivity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_in, R.anim.tran_out);}@Overrideprotected void showPre() {Intent intent = new Intent(this,Setup3Activity.class);startActivity(intent);finish();overridePendingTransition(R.anim.tran_pre_in, R.anim.tran_pre_out);}}

2.Viewpager实现侧滑

package com.lanzhu1994;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.view.Window;import android.view.WindowManager;import android.widget.Button;import android.widget.ImageView;import android.widget.LinearLayout;public class Viewpager extends Activity {private static final String TAG = "ViewPager";ViewPager mViewPager;private ImageView imageView;private ImageView[] imageViews;private Button button;private ArrayList<View> pageViews;// 包裹小圆点的LinearLayoutprivate ViewGroup group;// 导航页图片资源public int[] guides = new int[] { R.drawable.guidepage1,R.drawable.guidepage2, R.drawable.guidepage3, R.drawable.guidepage4 };@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);// 设置无标题getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);// 去掉信息栏setContentView(R.layout.viewpager);mViewPager = (ViewPager) findViewById(R.id.viewFlipper);button = (Button) findViewById(R.id.button1);group = (ViewGroup) findViewById(R.id.viewGroup);imageViews = new ImageView[guides.length];initWithPageGuideMode();}/** * 程序导航页效果 */public void initWithPageGuideMode() {List<View> mList = new ArrayList<View>();LayoutInflater inflat = LayoutInflater.from(this);// 先添加一个最左侧空的viewView item = inflat.inflate(R.layout.pageguide, null);for (int i = 0; i < guides.length; i++) {LinearLayout layout = new LinearLayout(this);LayoutParams ltp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);item = inflat.inflate(R.layout.pageguide, null);item.setBackgroundResource(guides[i]);layout.addView(item, ltp);mList.add(layout);Log.v(TAG,"输出图片的I的值："+i+"------>");}/** * 添加导航页小圆圈 */imageViews = new ImageView[mList.size()];for (int i = 0; i < mList.size(); i++) {LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);//设置每个小圆点距离左边的间距margin.setMargins(20, 0, 0, 0);imageView = new ImageView(Viewpager.this);//设置每个小圆点的宽高imageView.setLayoutParams(new LayoutParams(15, 15));imageViews[i] = imageView;if (i==0) {// 默认选中第一张图片imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);} else {//其他图片都设置未选中状态imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);}group.addView(imageViews[i], margin);}// 经过遍历，此时item是最后一个view，设置buttonButton btn = (Button) item.findViewById(R.id.button1);btn.setVisibility(View.VISIBLE);// btn.setOnClickListener(this)，设置最后一个页面上button的监听btn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent = new Intent();intent.setClass(Viewpager.this, MainActivity.class);startActivity(intent);}});// ViewPager最重要的设置Adapter，这和ListView一样的原理MViewPageAdapter adapter = new MViewPageAdapter(mList);mViewPager.setAdapter(adapter);mViewPager.setOnPageChangeListener(adapter);mViewPager.setCurrentItem(1);}/** * 内部类，继承PagerAdapter，当然你也可以直接 new PageAdapter *  * @author zych *  */class MViewPageAdapter extends PagerAdapter implements OnPageChangeListener {private List<View> mViewList;public MViewPageAdapter(List<View> views) {mViewList = views;}@Overridepublic int getCount() {return mViewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mViewList.get(position), 0);return mViewList.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mViewList.get(position));}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {//if (position == 0) {//mViewPager.setCurrentItem(1);//} else if (position == mViewList.size() - 1) {//mViewPager.setCurrentItem(position - 1);//Toast.makeText(getApplicationContext(), "页面即将跳转",//Toast.LENGTH_SHORT).show();//// 应该在这里跳转到MainActivity//// startActivity(intent);//}//遍历数组让当前选中图片下的小圆点设置颜色for (int i = 0; i < imageViews.length; i++) {imageViews[position].setBackgroundResource(R.drawable.page_indicator_focused);if (position != i) {imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);}}}}}