Android三种左右滑动效果 手势识别

手势识别

1.onCreate中添加GestureDetector mGestureDetector;

 //监听手势事件

mGestureDetector = new GestureDetector(this, onGestureListener);

2.//实现处理事件

OnGestureListener onGestureListener = new OnGestureListener() {

 //添加未实现的方法

};

 3.重写onTouch事件

//交由手势探测接口处理触摸事件

public boolean onTouchEvent(MotionEvent event) {

return mGestureDetector.onTouchEvent(event);

}

左右滑动效果

1、在xml中定义ViewFlipper控件;

2、重写onTouchEvent方法,用于捕获Touch事件

View Code

3、写push_left_in.xml、push_left_out.xml、push_right_in.xml、push_right_out.xml文件,用于滑动时的效果显现;

4、在Activity中定义OnGestureListener,重写onFling方法,根据e1、e2的坐标差判断左右滑动,同时在里面写滑动的效果。

View Code
@Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        if (e1.getX() - e2.getX() > 120) {
            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
            this.flipper.showNext();
            return true;
        } else if (e1.getX() - e2.getX() < -120) {
            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
            this.flipper.showPrevious();
            return true;
        }
        
        return false;
    }

工程下载:GuideViewTest.rar

来自:http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html

左右滑动指引效果

1、加入android-support-v4.jar,关于android-support-v4.jar的详细信息,大家可以访问google官方网站:http://developer.android.com/sdk/compatibility-library.html

2、XML中,用FrameLayout完成布局,放入ViewPager和指引图标

View Code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <include layout="@layout/item_header" />

        <android.support.v4.view.ViewPager
            android:id="@+id/guidePages"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <!-- 指引图标 -->

    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>

</FrameLayout>

3、将页面布局加入View的列表中,有几个布局页面就有几个圆点图片,通过for循环设置圆点图片的布局;

View Code
//添加到View的List中
LayoutInflater inflater = getLayoutInflater();
pageViews = new ArrayList<View>();
pageViews.add(inflater.inflate(R.layout.item05, null));
pageViews.add(inflater.inflate(R.layout.item06, null));
pageViews.add(inflater.inflate(R.layout.item01, null));
pageViews.add(inflater.inflate(R.layout.item02, null));
pageViews.add(inflater.inflate(R.layout.item03, null));
pageViews.add(inflater.inflate(R.layout.item04, null));

// 有几个布局页面就有几个圆点图片
imageViews = new ImageView[pageViews.size()];

// 通过for循环设置圆点图片的布局
for (int i = 0; i < pageViews.size(); i++) {
    imageView = new ImageView(GuideViewTestActivity.this);
    imageView.setLayoutParams(new LayoutParams(20, 20));
    imageView.setPadding(20, 0, 20, 0);
    imageViews[i] = imageView;

    if (i == 0) {
      // 默认选中第一张图片
      imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
    } else{
      imageViews[i].setBackgroundResource(R.drawable.page_indicator);
    }
    group.addView(imageViews[i]);
}

4、数据适配器和页面切换事件监听器

5、在指引页面更改事件监听器(GuidePageChangeListener)中要确保在切换页面时下面的圆点图片也跟着改变

View Code
@Override  
public void onPageSelected(int arg0) {  
      for (int i = 0; i < imageViews.length; i++) {  
           imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);
                
           if (arg0 != i) {  
                imageViews[i].setBackgroundResource(R.drawable.page_indicator);  
           }  
       }
}

工程下载:MyAndroidFlip.rar

来自:http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html

渐显按钮的左右滑动效果

1、XML中,定义ViewFlipper控件,在里面加入多个页面布局,也可以用代码ViewFlipper的addView方法;

2、写push_left_in.xml、push_left_out.xml、push_right_in.xml、push_right_out.xml文件;

3、加入权限

 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

4、在Activity中,初始化左右悬浮按钮,创建左右按钮,并设置监听事件(替换图片);

View Code
/**
     * 初始化悬浮按钮
     */
    private void initImageButtonView() {
        // 获取WindowManager
        wm = (WindowManager) getApplicationContext().getSystemService("window");

        // 设置LayoutParams相关参数
        wmParams = new WindowManager.LayoutParams();

        // 设置window type
        wmParams.type = LayoutParams.TYPE_PHONE;

        // 设置图片格式,效果为背景透明
        wmParams.format = PixelFormat.RGBA_8888;

        // 设置Window flag参数
        wmParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
                | LayoutParams.FLAG_NOT_FOCUSABLE;

        // 设置x、y初始值
        wmParams.x = 0;
        wmParams.y = 0;

        // 设置窗口长宽数据
        wmParams.width = 50;
        wmParams.height = 50;

        // 创建左右按钮
        createLeftButtonView();
        createRightButtonView();
    }

5、重写onTouchEvent事件,用于触发显示和隐藏悬浮按钮事件(MotionEvent.ACTION_DOWN和MotionEvent.ACTION_UP);

6、利用线程,控制悬浮按钮的透明度(Alpha和invalidate)

工程下载:MyPageFliper.rar

来自:http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2350171.html

posted @ 2012-08-02 14:01  ok_lanyan  阅读(62243)  评论(1编辑  收藏  举报