使用HorizontalScrollView实现侧滑效果(1)

本文通过自定义HorizontalScrollView实现侧滑效果

1.实现布局

在layout下新建left_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_frame_background">

</RelativeLayout>

实现主布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/qq"></LinearLayout>

        </LinearLayout>

    </<span style="font-family: Arial, Helvetica, sans-serif;">HorizontalScrollView</span>>

</RelativeLayout>

2.自定义HorizontalScrollView

新建slidingMenu类继承HorizontalScrollView

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class SlidingMenu extends HorizontalScrollView {

    private LinearLayout mWrapper;

    private ViewGroup mMenu;

    private ViewGroup mContent;

    private int mScreenWidth;

    private boolean once = false;

    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        DisplayMetrics ms = new DisplayMetrics();
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(ms);
        mScreenWidth = ms.widthPixels;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        if (!once) {
            mWrapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWrapper.getChildAt(0);
            mContent = (ViewGroup) mWrapper.getChildAt(1);

            mMenu.getLayoutParams().width = mScreenWidth / 3 * 2;
            mContent.getLayoutParams().width = mScreenWidth;
            once = true;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed) {
            scrollTo(mScreenWidth / 2 * 3, 0);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP:
                int scrollX = getScrollX();

                if (scrollX > (mScreenWidth / 3 * 2) / 2) {
                    smoothScrollTo(mScreenWidth / 3 * 2, 0);
                } else {
                    smoothScrollTo(0, 0);
                }
                return true;
        }

        return super.onTouchEvent(ev);
    }

}

首先实现构造函数，在构造函数中获得屏幕的宽度。然后复写三个函数onMeasure(), onLayout(), onTouchEvent()

onMeasure(int widthMeasureSpec, int heightMeasureSpec) 用来确定大小，由于可以重复调用，所以设置once确定是否第一次调用，如果是第一次，得到子View，并设置大小。通过getChildAt(0)获得主布局中的LinearLayout，然后通过LinearLayout的getChildAt()获得menu和content，设置menu宽度为2/3的屏幕，content为屏幕宽度，设置宽度通过ViewGroup.getLayoutParams().width。

onLayout(boolean changed, int i, int r, int r, int b)用来确定子View的布局即位置，因为可以重复调用，所以通过changed来判断是否改变位置，通过scrollTo()移动到menu宽度的位置恰好遮住menu。

onTouchEvent(MotionEvent ev)通过在抬起的时候menu出现多少部分来判断是隐藏还是显示。

最后一步就是将主布局中的HorizontalScrollView换成<包名>/SlidingMenu，这样一个简单的侧滑就做好了。

注意点：

scrollTo是瞬间完成的，smoothScrollTo()是有滑动效果的。滑动方向都是x正方向，不过是滚动条的方向，所以view会向x负方向滑动