在一個Activity的佈局中需要有三部分，一個是左側選單的佈局，一個是右側選單的佈局，一個是內容佈局。左側選單居螢幕左邊緣對齊，右側選單居螢幕右邊緣對齊，然後內容佈局佔滿整個螢幕，並壓在了左側選單和右側選單的上面。當用戶手指向右滑動時，將右側選單隱藏，左側選單顯示，然後通過偏移內容佈局的位置，就可以讓左側選單展現出來。同樣的道理，當用戶手指向左滑動時，將左側選單隱藏，右側選單顯示，也是通過偏移內容佈局的位置，就可以讓右側選單展現出來。原理示意圖所下所示：

介紹完了原理，我們就開始動手實現吧。新建一個Android專案，專案名就叫做BidirSlidingLayout。然後新建我們最主要的BidirSlidingLayout類，這個類就是實現雙向滑動選單功能的核心類，程式碼如下所示：

public class BidirSlidingLayout extends RelativeLayout implements OnTouchListener {

	/**
	 * 滾動顯示和隱藏左側佈局時，手指滑動需要達到的速度。
	 */
	public static final int SNAP_VELOCITY = 200;

	/**
	 * 滑動狀態的一種，表示未進行任何滑動。
	 */
	public static final int DO_NOTHING = 0;

	/**
	 * 滑動狀態的一種，表示正在滑出左側選單。
	 */
	public static final int SHOW_LEFT_MENU = 1;

	/**
	 * 滑動狀態的一種，表示正在滑出右側選單。
	 */
	public static final int SHOW_RIGHT_MENU = 2;

	/**
	 * 滑動狀態的一種，表示正在隱藏左側選單。
	 */
	public static final int HIDE_LEFT_MENU = 3;

	/**
	 * 滑動狀態的一種，表示正在隱藏右側選單。
	 */
	public static final int HIDE_RIGHT_MENU = 4;

	/**
	 * 記錄當前的滑動狀態
	 */
	private int slideState;

	/**
	 * 螢幕寬度值。
	 */
	private int screenWidth;

	/**
	 * 在被判定為滾動之前使用者手指可以移動的最大值。
	 */
	private int touchSlop;

	/**
	 * 記錄手指按下時的橫座標。
	 */
	private float xDown;

	/**
	 * 記錄手指按下時的縱座標。
	 */
	private float yDown;

	/**
	 * 記錄手指移動時的橫座標。
	 */
	private float xMove;

	/**
	 * 記錄手指移動時的縱座標。
	 */
	private float yMove;

	/**
	 * 記錄手機擡起時的橫座標。
	 */
	private float xUp;

	/**
	 * 左側選單當前是顯示還是隱藏。只有完全顯示或隱藏時才會更改此值，滑動過程中此值無效。
	 */
	private boolean isLeftMenuVisible;

	/**
	 * 右側選單當前是顯示還是隱藏。只有完全顯示或隱藏時才會更改此值，滑動過程中此值無效。
	 */
	private boolean isRightMenuVisible;

	/**
	 * 是否正在滑動。
	 */
	private boolean isSliding;

	/**
	 * 左側選單佈局物件。
	 */
	private View leftMenuLayout;

	/**
	 * 右側選單佈局物件。
	 */
	private View rightMenuLayout;

	/**
	 * 內容佈局物件。
	 */
	private View contentLayout;

	/**
	 * 用於監聽滑動事件的View。
	 */
	private View mBindView;

	/**
	 * 左側選單佈局的引數。
	 */
	private MarginLayoutParams leftMenuLayoutParams;

	/**
	 * 右側選單佈局的引數。
	 */
	private MarginLayoutParams rightMenuLayoutParams;

	/**
	 * 內容佈局的引數。
	 */
	private RelativeLayout.LayoutParams contentLayoutParams;

	/**
	 * 用於計算手指滑動的速度。
	 */
	private VelocityTracker mVelocityTracker;

	/**
	 * 重寫BidirSlidingLayout的建構函式，其中獲取了螢幕的寬度和touchSlop的值。
	 * 
	 * @param context
	 * @param attrs
	 */
	public BidirSlidingLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
		screenWidth = wm.getDefaultDisplay().getWidth();
		touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
	}

	/**
	 * 繫結監聽滑動事件的View。
	 * 
	 * @param bindView
	 *            需要繫結的View物件。
	 */
	public void setScrollEvent(View bindView) {
		mBindView = bindView;
		mBindView.setOnTouchListener(this);
	}

	/**
	 * 將介面滾動到左側選單介面，滾動速度設定為-30.
	 */
	public void scrollToLeftMenu() {
		new LeftMenuScrollTask().execute(-30);
	}

	/**
	 * 將介面滾動到右側選單介面，滾動速度設定為-30.
	 */
	public void scrollToRightMenu() {
		new RightMenuScrollTask().execute(-30);
	}

	/**
	 * 將介面從左側選單滾動到內容介面，滾動速度設定為30.
	 */
	public void scrollToContentFromLeftMenu() {
		new LeftMenuScrollTask().execute(30);
	}

	/**
	 * 將介面從右側選單滾動到內容介面，滾動速度設定為30.
	 */
	public void scrollToContentFromRightMenu() {
		new RightMenuScrollTask().execute(30);
	}

	/**
	 * 左側選單是否完全顯示出來，滑動過程中此值無效。
	 * 
	 * @return 左側選單完全顯示返回true，否則返回false。
	 */
	public boolean isLeftLayoutVisible() {
		return isLeftMenuVisible;
	}

	/**
	 * 右側選單是否完全顯示出來，滑動過程中此值無效。
	 * 
	 * @return 右側選單完全顯示返回true，否則返回false。
	 */
	public boolean isRightLayoutVisible() {
		return isRightMenuVisible;
	}

	/**
	 * 在onLayout中重新設定左側選單、右側選單、以及內容佈局的引數。
	 */
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		super.onLayout(changed, l, t, r, b);
		if (changed) {
			// 獲取左側選單佈局物件
			leftMenuLayout = getChildAt(0);
			leftMenuLayoutParams = (MarginLayoutParams) leftMenuLayout.getLayoutParams();
			// 獲取右側選單佈局物件
			rightMenuLayout = getChildAt(1);
			rightMenuLayoutParams = (MarginLayoutParams) rightMenuLayout.getLayoutParams();
			// 獲取內容佈局物件
			contentLayout = getChildAt(2);
			contentLayoutParams = (RelativeLayout.LayoutParams) contentLayout.getLayoutParams();
			contentLayoutParams.width = screenWidth;
			contentLayout.setLayoutParams(contentLayoutParams);
		}
	}

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		createVelocityTracker(event);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			// 手指按下時，記錄按下時的座標
			xDown = event.getRawX();
			yDown = event.getRawY();
			// 將滑動狀態初始化為DO_NOTHING
			slideState = DO_NOTHING;
			break;
		case MotionEvent.ACTION_MOVE:
			xMove = event.getRawX();
			yMove = event.getRawY();
			// 手指移動時，對比按下時的座標，計算出移動的距離。
			int moveDistanceX = (int) (xMove - xDown);
			int moveDistanceY = (int) (yMove - yDown);
			// 檢查當前的滑動狀態
			checkSlideState(moveDistanceX, moveDistanceY);
			// 根據當前滑動狀態決定如何偏移內容佈局
			switch (slideState) {
			case SHOW_LEFT_MENU:
				contentLayoutParams.rightMargin = -moveDistanceX;
				checkLeftMenuBorder();
				contentLayout.setLayoutParams(contentLayoutParams);
				break;
			case HIDE_LEFT_MENU:
				contentLayoutParams.rightMargin = -leftMenuLayoutParams.width - moveDistanceX;
				checkLeftMenuBorder();
				contentLayout.setLayoutParams(contentLayoutParams);
			case SHOW_RIGHT_MENU:
				contentLayoutParams.leftMargin = moveDistanceX;
				checkRightMenuBorder();
				contentLayout.setLayoutParams(contentLayoutParams);
				break;
			case HIDE_RIGHT_MENU:
				contentLayoutParams.leftMargin = -rightMenuLayoutParams.width + moveDistanceX;
				checkRightMenuBorder();
				contentLayout.setLayoutParams(contentLayoutParams);
			default:
				break;
			}
			break;
		case MotionEvent.ACTION_UP:
			xUp = event.getRawX();
			int upDistanceX = (int) (xUp - xDown);
			if (isSliding) {
				// 手指擡起時，進行判斷當前手勢的意圖
				switch (slideState) {
				case SHOW_LEFT_MENU:
					if (shouldScrollToLeftMenu()) {
						scrollToLeftMenu();
					} else {
						scrollToContentFromLeftMenu();
					}
					break;
				case HIDE_LEFT_MENU:
					if (shouldScrollToContentFromLeftMenu()) {
						scrollToContentFromLeftMenu();
					} else {
						scrollToLeftMenu();
					}
					break;
				case SHOW_RIGHT_MENU:
					if (shouldScrollToRightMenu()) {
						scrollToRightMenu();
					} else {
						scrollToContentFromRightMenu();
					}
					break;
				case HIDE_RIGHT_MENU:
					if (shouldScrollToContentFromRightMenu()) {
						scrollToContentFromRightMenu();
					} else {
						scrollToRightMenu();
					}
					break;
				default:
					break;
				}
			} else if (upDistanceX < touchSlop && isLeftMenuVisible) {
				// 當左側選單顯示時，如果使用者點選一下內容部分，則直接滾動到內容介面
				scrollToContentFromLeftMenu();
			} else if (upDistanceX < touchSlop && isRightMenuVisible) {
				// 當右側選單顯示時，如果使用者點選一下內容部分，則直接滾動到內容介面
				scrollToContentFromRightMenu();
			}
			recycleVelocityTracker();
			break;
		}
		if (v.isEnabled()) {
			if (isSliding) {
				// 正在滑動時讓控制元件得不到焦點
				unFocusBindView();
				return true;
			}
			if (isLeftMenuVisible || isRightMenuVisible) {
				// 當左側或右側佈局顯示時，將繫結控制元件的事件遮蔽掉
				return true;
			}
			return false;
		}
		return true;
	}

	/**
	 * 根據手指移動的距離，判斷當前使用者的滑動意圖，然後給slideState賦值成相應的滑動狀態值。
	 * 
	 * @param moveDistanceX
	 *            橫向移動的距離
	 * @param moveDistanceY
	 *            縱向移動的距離
	 */
	private void checkSlideState(int moveDistanceX, int moveDistanceY) {
		if (isLeftMenuVisible) {
			if (!isSliding && Math.abs(moveDistanceX) >= touchSlop && moveDistanceX < 0) {
				isSliding = true;
				slideState = HIDE_LEFT_MENU;
			}
		} else if (isRightMenuVisible) {
			if (!isSliding && Math.abs(moveDistanceX) >= touchSlop && moveDistanceX > 0) {
				isSliding = true;
				slideState = HIDE_RIGHT_MENU;
			}
		} else {
			if (!isSliding && Math.abs(moveDistanceX) >= touchSlop && moveDistanceX > 0
					&& Math.abs(moveDistanceY) < touchSlop) {
				isSliding = true;
				slideState = SHOW_LEFT_MENU;
				contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, 0);
				contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
				contentLayout.setLayoutParams(contentLayoutParams);
				// 如果使用者想要滑動左側選單，將左側選單顯示，右側選單隱藏
				leftMenuLayout.setVisibility(View.VISIBLE);
				rightMenuLayout.setVisibility(View.GONE);
			} else if (!isSliding && Math.abs(moveDistanceX) >= touchSlop && moveDistanceX < 0
					&& Math.abs(moveDistanceY) < touchSlop) {
				isSliding = true;
				slideState = SHOW_RIGHT_MENU;
				contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 0);
				contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
				contentLayout.setLayoutParams(contentLayoutParams);
				// 如果使用者想要滑動右側選單，將右側選單顯示，左側選單隱藏
				rightMenuLayout.setVisibility(View.VISIBLE);
				leftMenuLayout.setVisibility(View.GONE);
			}
		}
	}

	/**
	 * 在滑動過程中檢查左側選單的邊界值，防止繫結佈局滑出螢幕。
	 */
	private void checkLeftMenuBorder() {
		if (contentLayoutParams.rightMargin > 0) {
			contentLayoutParams.rightMargin = 0;
		} else if (contentLayoutParams.rightMargin < -leftMenuLayoutParams.width) {
			contentLayoutParams.rightMargin = -leftMenuLayoutParams.width;
		}
	}

	/**
	 * 在滑動過程中檢查右側選單的邊界值，防止繫結佈局滑出螢幕。
	 */
	private void checkRightMenuBorder() {
		if (contentLayoutParams.leftMargin > 0) {
			contentLayoutParams.leftMargin = 0;
		} else if (contentLayoutParams.leftMargin < -rightMenuLayoutParams.width) {
			contentLayoutParams.leftMargin = -rightMenuLayoutParams.width;
		}
	}

	/**
	 * 判斷是否應該滾動將左側選單展示出來。如果手指移動距離大於左側選單寬度的1/2，或者手指移動速度大於SNAP_VELOCITY，
	 * 就認為應該滾動將左側選單展示出來。
	 * 
	 * @return 如果應該將左側選單展示出來返回true，否則返回false。
	 */
	private boolean shouldScrollToLeftMenu() {
		return xUp - xDown > leftMenuLayoutParams.width / 2 || getScrollVelocity() > SNAP_VELOCITY;
	}

	/**
	 * 判斷是否應該滾動將右側選單展示出來。如果手指移動距離大於右側選單寬度的1/2，或者手指移動速度大於SNAP_VELOCITY，
	 * 就認為應該滾動將右側選單展示出來。
	 * 
	 * @return 如果應該將右側選單展示出來返回true，否則返回false。
	 */
	private boolean shouldScrollToRightMenu() {
		return xDown - xUp > rightMenuLayoutParams.width / 2 || getScrollVelocity() > SNAP_VELOCITY;
	}

	/**
	 * 判斷是否應該從左側選單滾動到內容佈局，如果手指移動距離大於左側選單寬度的1/2，或者手指移動速度大於SNAP_VELOCITY，
	 * 就認為應該從左側選單滾動到內容佈局。
	 * 
	 * @return 如果應該從左側選單滾動到內容佈局返回true，否則返回false。
	 */
	private boolean shouldScrollToContentFromLeftMenu() {
		return xDown - xUp > leftMenuLayoutParams.width / 2 || getScrollVelocity() > SNAP_VELOCITY;
	}

	/**
	 * 判斷是否應該從右側選單滾動到內容佈局，如果手指移動距離大於右側選單寬度的1/2，或者手指移動速度大於SNAP_VELOCITY，
	 * 就認為應該從右側選單滾動到內容佈局。
	 * 
	 * @return 如果應該從右側選單滾動到內容佈局返回true，否則返回false。
	 */
	private boolean shouldScrollToContentFromRightMenu() {
		return xUp - xDown > rightMenuLayoutParams.width / 2 || getScrollVelocity() > SNAP_VELOCITY;
	}

	/**
	 * 建立VelocityTracker物件，並將觸控事件加入到VelocityTracker當中。
	 * 
	 * @param event
	 *            右側佈局監聽控制元件的滑動事件
	 */
	private void createVelocityTracker(MotionEvent event) {
		if (mVelocityTracker == null) {
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(event);
	}

	/**
	 * 獲取手指在繫結佈局上的滑動速度。
	 * 
	 * @return 滑動速度，以每秒鐘移動了多少畫素值為單位。
	 */
	private int getScrollVelocity() {
		mVelocityTracker.computeCurrentVelocity(1000);
		int velocity = (int) mVelocityTracker.getXVelocity();
		return Math.abs(velocity);
	}

	/**
	 * 回收VelocityTracker物件。
	 */
	private void recycleVelocityTracker() {
		mVelocityTracker.recycle();
		mVelocityTracker = null;
	}

	/**
	 * 使用可以獲得焦點的控制元件在滑動的時候失去焦點。
	 */
	private void unFocusBindView() {
		if (mBindView != null) {
			mBindView.setPressed(false);
			mBindView.setFocusable(false);
			mBindView.setFocusableInTouchMode(false);
		}
	}

	class LeftMenuScrollTask extends AsyncTask<Integer, Integer, Integer> {

		@Override
		protected Integer doInBackground(Integer... speed) {
			int rightMargin = contentLayoutParams.rightMargin;
			// 根據傳入的速度來滾動介面，當滾動到達邊界值時，跳出迴圈。
			while (true) {
				rightMargin = rightMargin + speed[0];
				if (rightMargin < -leftMenuLayoutParams.width) {
					rightMargin = -leftMenuLayoutParams.width;
					break;
				}
				if (rightMargin > 0) {
					rightMargin = 0;
					break;
				}
				publishProgress(rightMargin);
				// 為了要有滾動效果產生，每次迴圈使執行緒睡眠一段時間，這樣肉眼才能夠看到滾動動畫。
				sleep(15);
			}
			if (speed[0] > 0) {
				isLeftMenuVisible = false;
			} else {
				isLeftMenuVisible = true;
			}
			isSliding = false;
			return rightMargin;
		}

		@Override
		protected void onProgressUpdate(Integer... rightMargin) {
			contentLayoutParams.rightMargin = rightMargin[0];
			contentLayout.setLayoutParams(contentLayoutParams);
			unFocusBindView();
		}

		@Override
		protected void onPostExecute(Integer rightMargin) {
			contentLayoutParams.rightMargin = rightMargin;
			contentLayout.setLayoutParams(contentLayoutParams);
		}
	}

	class RightMenuScrollTask extends AsyncTask<Integer, Integer, Integer> {

		@Override
		protected Integer doInBackground(Integer... speed) {
			int leftMargin = contentLayoutParams.leftMargin;
			// 根據傳入的速度來滾動介面，當滾動到達邊界值時，跳出迴圈。
			while (true) {
				leftMargin = leftMargin + speed[0];
				if (leftMargin < -rightMenuLayoutParams.width) {
					leftMargin = -rightMenuLayoutParams.width;
					break;
				}
				if (leftMargin > 0) {
					leftMargin = 0;
					break;
				}
				publishProgress(leftMargin);
				// 為了要有滾動效果產生，每次迴圈使執行緒睡眠一段時間，這樣肉眼才能夠看到滾動動畫。
				sleep(15);
			}
			if (speed[0] > 0) {
				isRightMenuVisible = false;
			} else {
				isRightMenuVisible = true;
			}
			isSliding = false;
			return leftMargin;
		}

		@Override
		protected void onProgressUpdate(Integer... leftMargin) {
			contentLayoutParams.leftMargin = leftMargin[0];
			contentLayout.setLayoutParams(contentLayoutParams);
			unFocusBindView();
		}

		@Override
		protected void onPostExecute(Integer leftMargin) {
			contentLayoutParams.leftMargin = leftMargin;
			contentLayout.setLayoutParams(contentLayoutParams);
		}
	}

	/**
	 * 使當前執行緒睡眠指定的毫秒數。
	 * 
	 * @param millis
	 *            指定當前執行緒睡眠多久，以毫秒為單位
	 */
	private void sleep(long millis) {
		try {
			Thread.sleep(millis);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
	}
}
 

接下來開啟或新建activity_main.xml檔案，加入如下程式碼：

<com.example.bidirslidinglayout.BidirSlidingLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/bidir_sliding_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <RelativeLayout
        android:id="@+id/left_menu"
        android:layout_width="270dip"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:background="#00ccff"
        android:visibility="invisible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="This is left menu"
            android:textColor="#000000"
            android:textSize="28sp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/right_menu"
        android:layout_width="270dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="#00ffcc"
        android:visibility="invisible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="This is right menu"
            android:textColor="#000000"
            android:textSize="28sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="320dip"
        android:layout_height="fill_parent"
        android:background="#e9e9e9" >

        <ListView
            android:id="@+id/contentList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scrollbars="none"
            android:cacheColorHint="#00000000" >
        </ListView>
    </LinearLayout>

</com.example.bidirslidinglayout.BidirSlidingLayout>

public class MainActivity extends Activity {

	/**
	 * 雙向滑動選單佈局
	 */
	private BidirSlidingLayout bidirSldingLayout;

	/**
	 * 在內容佈局上顯示的ListView
	 */
	private ListView contentList;

	/**
	 * ListView的介面卡
	 */
	private ArrayAdapter<String> contentListAdapter;

	/**
	 * 用於填充contentListAdapter的資料來源。
	 */
	private String[] contentItems = { "Content Item 1", "Content Item 2", "Content Item 3",
			"Content Item 4", "Content Item 5", "Content Item 6", "Content Item 7",
			"Content Item 8", "Content Item 9", "Content Item 10", "Content Item 11",
			"Content Item 12", "Content Item 13", "Content Item 14", "Content Item 15",
			"Content Item 16" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		bidirSldingLayout = (BidirSlidingLayout) findViewById(R.id.bidir_sliding_layout);
		contentList = (ListView) findViewById(R.id.contentList);
		contentListAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
				contentItems);
		contentList.setAdapter(contentListAdapter);
		bidirSldingLayout.setScrollEvent(contentList);
	}

}

以後我們在專案的任何地方都可以輕鬆加入雙向滑動選單功能，只需要以下兩步即可：

1. 在Acitivty的layout中引入我們自定義的BidirSlidingLayout佈局，並且給這個佈局要加入三個直接子元素。

2. 在Activity中通過setScrollEvent方法，給一個View註冊touch事件。