Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

介绍

侧滑菜单是Android应用中常见的UI设计，用户可以通过拖动屏幕边缘实现菜单的弹出。Android提供了DrawerLayout控件来实现侧滑菜单，但其实我们也可以通过自定义HorizontalScrollView控件来简单地实现侧滑菜单。

准备工作

在开始之前，我们需要在XML文件中添加一个HorizontalScrollView控件并在其中添加菜单项，如下：

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fillViewport="true">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 2"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 3"/>

    </LinearLayout>

</HorizontalScrollView>

添加菜单项之后可以看到，菜单项会水平排列在屏幕上。

实现侧滑菜单

为了实现侧滑菜单，我们需要在HorizontalScrollView控件的onTouchEvent方法中判断手指滑动的方向，并在手指滑动结束后将菜单项滑入或滑出屏幕。我们可以新建一个CustomHorizontalScrollView类来继承HorizontalScrollView控件，在其中添加相应的代码。

public class CustomHorizontalScrollView extends HorizontalScrollView {

    private static final int SWIPE_THRESHOLD = 100;
    private int initialX;
    private boolean scrollable = true;

    public CustomHorizontalScrollView(Context context) {
        super(context);
    }

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

    public CustomHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                initialX = (int) ev.getX();
                return super.onTouchEvent(ev);
            case MotionEvent.ACTION_MOVE:
                if (!scrollable) {
                    return false;
                }
                int currentX = (int) ev.getX();
                int deltaX = initialX - currentX;
                if (Math.abs(deltaX) > SWIPE_THRESHOLD) {
                    scrollable = false;
                    if (deltaX > 0) {
                        smoothScrollTo(getWidth(), 0);
                    } else {
                        smoothScrollTo(0, 0);
                    }
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                scrollable = true;
                break;
        }
        return super.onTouchEvent(ev);
    }

}

在CustomHorizontalScrollView的onTouchEvent方法中，我们通过计算手指滑动的距离来判断菜单应该滑入或滑出屏幕。当手指滑动的距离大于一定阈值后，我们就通过smoothScrollTo方法将菜单项滑动到相应位置。

最后，我们只需要将xml文件中的HorizontalScrollView控件替换为CustomHorizontalScrollView控件即可。

示例说明

第一个示例是实现一个侧滑菜单打开Activity的功能，我们可以在菜单中添加一个button控件，并给其添加响应事件。在响应事件中，我们可以通过Intent来启动新的Activity。

<HorizontalScrollView
    android:id="@+id/horizontalScrollView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fillViewport="true">

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

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open new Activity"
            android:onClick="openNewActivity"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 2"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 3"/>

    </LinearLayout>

</HorizontalScrollView>

在Activity中，我们需要添加openNewActivity方法，并在其中添加相应的Intent。

public void openNewActivity(View view) {
    Intent intent = new Intent(this, NewActivity.class);
    startActivity(intent);
}

第二个示例是实现一个侧滑菜单与ViewPager联动的功能，我们可以在菜单中添加多个button控件，并将它们与ViewPager进行关联。在响应事件中，我们可以通过ViewPager的setCurrentItem方法来切换页面。

<HorizontalScrollView
    android:id="@+id/horizontalScrollView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fillViewport="true">

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

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Page 1"
            android:onClick="selectPage1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Page 2"
            android:onClick="selectPage2"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Page 3"
            android:onClick="selectPage3"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 2"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Menu item 3"/>

    </LinearLayout>

</HorizontalScrollView>

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

在Activity中，我们需要添加selectPage1、selectPage2和selectPage3方法，并在其中添加相应的setCurrentItem方法。

public void selectPage1(View view) {
    viewPager.setCurrentItem(0);
}

public void selectPage2(View view) {
    viewPager.setCurrentItem(1);
}

public void selectPage3(View view) {
    viewPager.setCurrentItem(2);
}