Nitro's

Mar 11, 2013 - Comments - dev tech

Android 三屏左右滑动切换的实现

实现原理:

将三个界面放置于FrameLayout中,默认显示当前主页面,左(右)滑动,显示左(右)辅页面,隐藏右(左)辅页面,根据滑动距离 重绘主页面在屏幕的位置。当用户滑动停止抬起手指时,判断总计滑动距离,若大于屏幕宽度1/2,直接定位到主页面偏移结果位置处。

package com.n2hsu.n2flipper;

import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
import android.app.Activity;

public class MainActivity extends Activity implements OnTouchListener, OnGestureListener {

    private RelativeLayout mLeft = null;
    private RelativeLayout mMain = null;
    private RelativeLayout mRight = null;
    private GestureDetector mGestureDetector;
    //
    private int mWidth = 0;
    private int mHeight = 0;

    private final int mOverlapX = 100;
    private float mDistanceSum = 0;
    private final int mTimes = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLeft = (RelativeLayout) findViewById(R.id.left);
        mMain = (RelativeLayout) findViewById(R.id.main_view);
        mRight = (RelativeLayout) findViewById(R.id.right);

        mGestureDetector = new GestureDetector(this);

        mWidth = this.getResources().getDisplayMetrics().widthPixels;
        mHeight = this.getResources().getDisplayMetrics().heightPixels;

        mMain.setOnTouchListener(this);
        mMain.setLongClickable(true);

        FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(mWidth, mHeight);
        mMain.setLayoutParams(layout);
        mLeft.setLayoutParams(layout);
        mRight.setLayoutParams(layout);

    }

    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

        float distance = e2.getAxisValue(MotionEvent.AXIS_X) - e1.getAxisValue(MotionEvent.AXIS_X);

        mDistanceSum += distance;
        // X offset
        mMain.layout((int) (mMain.getX() + distance), 0, (int) (mMain.getX() + distance + mWidth), mHeight);
        // view visible or invisible
        if (mMain.getX() >= 0) {
            mRight.setVisibility(View.GONE);
            mLeft.setVisibility(View.VISIBLE);
        } else {
            mLeft.setVisibility(View.GONE);
            mRight.setVisibility(View.VISIBLE);
        }
        return true;
    }

    @Override
    public void onShowPress(MotionEvent e) {
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            // init scroll distance
            mDistanceSum = 0;
        }
        if (event.getAction() == MotionEvent.ACTION_UP) {

            if (Math.abs(mDistanceSum) > mWidth / mTimes) {
                if (mMain.getX() > 0) {
                    mMain.layout(mWidth - mOverlapX, 0, mWidth - mOverlapX + mWidth, mHeight);
                } else {
                    mMain.layout(mOverlapX - mWidth, 0, mOverlapX, mHeight);
                }
            } else {
                // restore initial status
                mMain.layout(0, 0, mWidth, mHeight);
                mRight.setVisibility(View.GONE);
                mLeft.setVisibility(View.GONE);
            }
        }

        return mGestureDetector.onTouchEvent(event);
    }
}

资源文件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/left"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F4574F"
        android:visibility="gone" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Left"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#E8734F"
        android:visibility="gone" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Right"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#657859" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Main"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </RelativeLayout>

</FrameLayout>