自定义布局实现侧滑菜单1

快来打我* 2021-09-22 05:14 379阅读 0赞

说起侧滑菜单，应该是一个很Low的话题了，现在几乎所有的app都有这个功能，但是既然大家都在用，那就再说说吧。本文参照郭霖大神的文章，我又重新组织了下，大家可以看原文章。首先说一下实现原理，其实说白了也很简单，就是我们自定义一个布局，在这个自定义布局中实现滑动菜单的功能，然后只要在Activity的布局文件里面引入我们自定义的布局，这个Activity就拥有了滑动菜单的功能了。一个Activity的布局中需要有三部分，一个是左侧菜单的布局，一个是右侧菜单的布局，一个是内容布局。左侧菜单居屏幕左边缘对齐，右侧菜单居屏幕 右边缘对齐，然后内容布局占满整个屏幕，并压在了左侧菜单和右侧菜单的上面。当用户手指向右滑动时，将右侧菜单隐藏，左侧菜单显示，然后通过偏移内容布局 的位置，就可以让左侧菜单展现出来。同样的道理，当用户手指向左滑动时，将左侧菜单隐藏，右侧菜单显示，也是通过偏移内容布局的位置，就可以让右侧菜单展现出来。原理示意图所下所示：

![Center][]

为了容易理解，我们就由浅入深，先实现左侧侧滑菜单的效果，然后再实现左右侧滑，原理是类似的

**自定义SlidingLayout.java**

public class SlidingLayout extends LinearLayout implements OnTouchListener {
        
    
    /**
         * 滚动显示和隐藏左侧布局时，手指滑动需要达到的速度。
         */
    public static final int SNAP_VELOCITY = 200;
    
    /**
         * 屏幕宽度值。
         */
    private int screenWidth;
    
    /**
         * 左侧布局最多可以滑动到的左边缘。值由左侧布局的宽度来定，marginLeft到达此值之后，不能再减少。
         */
    private int leftEdge;
    
    /**
         * 左侧布局最多可以滑动到的右边缘。值恒为0，即marginLeft到达0之后，不能增加。
         */
    private int rightEdge = 0;
    
    /**
         * 左侧布局完全显示时，留给右侧布局的宽度值。
         */
    private int leftLayoutPadding = 80;
    
    /**
         * 记录手指按下时的横坐标。
         */
    private float xDown;
    
    /**
         * 记录手指移动时的横坐标。
         */
    private float xMove;
    
    /**
         * 记录手机抬起时的横坐标。
         */
    private float xUp;
    
    /**
         * 左侧布局当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
         */
    private boolean isLeftLayoutVisible;
    
    /**
         * 左侧布局对象。
         */
    private View leftLayout;
    
    /**
         * 右侧布局对象。
         */
    private View rightLayout;
    
    /**
         * 用于监听侧滑事件的View。
         */
    private View mBindView;
    
    /**
         * 左侧布局的参数，通过此参数来重新确定左侧布局的宽度，以及更改leftMargin的值。
         */
    private MarginLayoutParams leftLayoutParams;
    
    /**
         * 右侧布局的参数，通过此参数来重新确定右侧布局的宽度。
         */
    private MarginLayoutParams rightLayoutParams;
    
    /**
         * 用于计算手指滑动的速度。
         */
    private VelocityTracker mVelocityTracker;
    
    /**
         * 重写SlidingLayout的构造函数，其中获取了屏幕的宽度。
         *
         * @param context
    * @param attrs
    */
    public SlidingLayout(Context context, AttributeSet attrs) {
        
    super(context, attrs);
    WindowManager wm = (WindowManager) context
                    .getSystemService(Context.WINDOW_SERVICE);
    screenWidth = wm.getDefaultDisplay().getWidth();
    }
    
    /**
         * 绑定监听侧滑事件的View，即在绑定的View进行滑动才可以显示和隐藏左侧布局。
         *
         * @param bindView 需要绑定的View对象。
         */
    public void setScrollEvent(View bindView) {
        
    mBindView = bindView;
    mBindView.setOnTouchListener(this);
    }
    
    /**
         * 将屏幕滚动到左侧布局界面，滚动速度设定为30.
         */
    public void scrollToLeftLayout() {
        
    new ScrollTask().execute(30);
    }
    
    /**
         * 将屏幕滚动到右侧布局界面，滚动速度设定为-30.
         */
    public void scrollToRightLayout() {
        
    new ScrollTask().execute(-30);
    }
    
    /**
         * 左侧布局是否完全显示出来，或完全隐藏，滑动过程中此值无效。
         *
         * @return 左侧布局完全显示返回true，完全隐藏返回false。
         */
    public boolean isLeftLayoutVisible() {
        
    return isLeftLayoutVisible;
    }
    
    /**
         * 在onLayout中重新设定左侧布局和右侧布局的参数。
         */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
    super.onLayout(changed, l, t, r, b);
            if (changed) {
        
    // 获取左侧布局对象
    leftLayout = getChildAt(0);
    leftLayoutParams = (MarginLayoutParams) leftLayout
    .getLayoutParams();
    // 重置左侧布局对象的宽度为屏幕宽度减去leftLayoutPadding
    leftLayoutParams.width = screenWidth - leftLayoutPadding;
    // 设置最左边距为负的左侧布局的宽度
    leftEdge = -leftLayoutParams.width;
    leftLayoutParams.leftMargin = leftEdge;
    leftLayout.setLayoutParams(leftLayoutParams);
    // 获取右侧布局对象
    rightLayout = getChildAt(1);
    rightLayoutParams = (MarginLayoutParams) rightLayout
    .getLayoutParams();
    rightLayoutParams.width = screenWidth;
    rightLayout.setLayoutParams(rightLayoutParams);
    }
        }
    
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        
            createVelocityTracker(event);
            switch (event.getAction()) {
        
    case MotionEvent.ACTION_DOWN:
    // 手指按下时，记录按下时的横坐标
    xDown = event.getRawX();
                    break;
                case MotionEvent.ACTION_MOVE:
    // 手指移动时，对比按下时的横坐标，计算出移动的距离，来调整左侧布局的leftMargin值，从而显示和隐藏左侧布局
    xMove = event.getRawX();
                    int distanceX = (int) (xMove - xDown);
                    if (isLeftLayoutVisible) {
        
    leftLayoutParams.leftMargin = distanceX;
    } else {
        
    leftLayoutParams.leftMargin = leftEdge + distanceX;
    }
    if (leftLayoutParams.leftMargin < leftEdge) {
        
    leftLayoutParams.leftMargin = leftEdge;
    } else if (leftLayoutParams.leftMargin > rightEdge) {
        
    leftLayoutParams.leftMargin = rightEdge;
    }
    leftLayout.setLayoutParams(leftLayoutParams);
                    break;
                case MotionEvent.ACTION_UP:
    // 手指抬起时，进行判断当前手势的意图，从而决定是滚动到左侧布局，还是滚动到右侧布局
    xUp = event.getRawX();
                    if (wantToShowLeftLayout()) {
        
    if (shouldScrollToLeftLayout()) {
        
                            scrollToLeftLayout();
    } else {
        
                            scrollToRightLayout();
    }
                    } else if (wantToShowRightLayout()) {
        
    if (shouldScrollToContent()) {
        
                            scrollToRightLayout();
    } else {
        
                            scrollToLeftLayout();
    }
                    }
                    recycleVelocityTracker();
                    break;
    }
    return isBindBasicLayout();
    }
    
    /**
         * 判断当前手势的意图是不是想显示右侧布局。如果手指移动的距离是负数，且当前左侧布局是可见的，则认为当前手势是想要显示右侧布局。
         *
         * @return 当前手势想显示右侧布局返回true，否则返回false。
         */
    private boolean wantToShowRightLayout() {
        
    return xUp - xDown < 0 && isLeftLayoutVisible;
    }
    
    /**
         * 判断当前手势的意图是不是想显示左侧布局。如果手指移动的距离是正数，且当前左侧布局是不可见的，则认为当前手势是想要显示左侧布局。
         *
         * @return 当前手势想显示左侧布局返回true，否则返回false。
         */
    private boolean wantToShowLeftLayout() {
        
    return xUp - xDown > 0 && !isLeftLayoutVisible;
    }
    
    /**
         * 判断是否应该滚动将左侧布局展示出来。如果手指移动距离大于屏幕的1/2，或者手指移动速度大于SNAP_VELOCITY，
         * 就认为应该滚动将左侧布局展示出来。
         *
         * @return 如果应该滚动将左侧布局展示出来返回true，否则返回false。
         */
    private boolean shouldScrollToLeftLayout() {
        
    return xUp - xDown > screenWidth / 2
    || getScrollVelocity() > SNAP_VELOCITY;
    }
    
    /**
         * 判断是否应该滚动将右侧布局展示出来。如果手指移动距离加上leftLayoutPadding大于屏幕的1/2，
         * 或者手指移动速度大于SNAP_VELOCITY， 就认为应该滚动将右侧布局展示出来。
         *
         * @return 如果应该滚动将右侧布局展示出来返回true，否则返回false。
         */
    private boolean shouldScrollToContent() {
        
    return xDown - xUp + leftLayoutPadding > screenWidth / 2
    || getScrollVelocity() > SNAP_VELOCITY;
    }
    
    /**
         * 判断绑定滑动事件的View是不是一个基础layout，不支持自定义layout，只支持四种基本layout,
         * AbsoluteLayout已被弃用。
         *
         * @return 如果绑定滑动事件的View是LinearLayout, RelativeLayout, FrameLayout,
         * TableLayout之一就返回true，否则返回false。
         */
    private boolean isBindBasicLayout() {
        
    if (mBindView == null) {
        
    return false;
    }
            String viewName = mBindView.getClass().getName();
            return viewName.equals(LinearLayout.class.getName())
                    || viewName.equals(RelativeLayout.class.getName())
                    || viewName.equals(FrameLayout.class.getName())
                    || viewName.equals(TableLayout.class.getName());
    }
    
    /**
         * 创建VelocityTracker对象，并将触摸事件加入到VelocityTracker当中。
         *
         * @param event 右侧布局监听控件的滑动事件
         */
    private void createVelocityTracker(MotionEvent event) {
        
    if (mVelocityTracker == null) {
        
    mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(event);
    }
    
    /**
         * 获取手指在右侧布局的监听View上的滑动速度。
         *
         * @return 滑动速度，以每秒钟移动了多少像素值为单位。
         */
    private int getScrollVelocity() {
        
    mVelocityTracker.computeCurrentVelocity(1000);
            int velocity = (int) mVelocityTracker.getXVelocity();
            return Math.abs(velocity);
    }
    
    /**
         * 回收VelocityTracker对象。
         */
    private void recycleVelocityTracker() {
        
    mVelocityTracker.recycle();
    mVelocityTracker = null;
    }
    
    class ScrollTask extends AsyncTask<Integer, Integer, Integer> {
        
    
    @Override
    protected Integer doInBackground(Integer... speed) {
        
    int leftMargin = leftLayoutParams.leftMargin;
    // 根据传入的速度来滚动界面，当滚动到达左边界或右边界时，跳出循环。
    while (true) {
        
                    leftMargin = leftMargin + speed[0];
                    if (leftMargin > rightEdge) {
        
                        leftMargin = rightEdge;
                        break;
    }
    if (leftMargin < leftEdge) {
        
                        leftMargin = leftEdge;
                        break;
    }
                    publishProgress(leftMargin);
    // 为了要有滚动效果产生，每次循环使线程睡眠20毫秒，这样肉眼才能够看到滚动动画。
    try {
        
                        Thread.sleep(20);
    } catch (InterruptedException e) {
        
                        e.printStackTrace();
    }
                }
    if (speed[0] > 0) {
        
    isLeftLayoutVisible = true;
    } else {
        
    isLeftLayoutVisible = false;
    }
    return leftMargin;
    }
    
    @Override
    protected void onProgressUpdate(Integer... leftMargin) {
        
    leftLayoutParams.leftMargin = leftMargin[0];
    leftLayout.setLayoutParams(leftLayoutParams);
    }
    
    @Override
    protected void onPostExecute(Integer leftMargin) {
        
    leftLayoutParams.leftMargin = leftMargin;
    leftLayout.setLayoutParams(leftLayoutParams);
    }
        }
    }

熟悉自定义的都知道，onLayout方法用来设置子View的位置。 这里我们重写onLayout方法，使用 getChildAt( 0 ) 获取到的布局作为左边布局，使用 getChildAt( 1 ) 获取到的布局作为右侧主布局。并将左边布局的宽度重定义为屏幕宽度减去leftLayoutPadding，将右侧布局的宽度重定义为屏幕宽度。然后让左边布局偏移出屏幕，这样能看到的就只有右边布局了。这里我们也可以看出，使用SlidingLayout这个布局的前提条件，必须为这个布局提供两个子元素，第一个元素会作为左边布局偏移出屏幕，第二个元素会作为右边布局显示在屏幕上。

然后我们看一下setScrollEvent方法，这个方法接收一个View作为参数，然后为这个View绑定了一个touch事件。这是什么意思呢？如果右侧布局是一个LinearLayout，我可以通过监听LinearLayout上的touch事件来控制左侧布局的显示和隐藏。但是如果右侧布局的LinearLayout里面加入了一个别的组件，而这个组件又充满了整个LinearLayout，这个时候LinearLayout将不可能再被touch到了，这个时候我们就需要将touch事件注册到组件上。setScrollEvent方法也就是提供了一个注册接口，touch事件将会注册到传入的View上。

最后还有一个陌生的方法，isBindBasicLayout——这个方法判断了一下注册touch事件的View是不是四个基本布局之一，如果是就返回true，否则返回false。这个方法在整个SlidingLayout中起着非常重要的作用，主要用于控制onTouch事件是返回true还是false，这将影响到布局当中的View的功能是否可用。

现在在布局中应用我们的SlidingLayout.java

<?xml version="1.0" encoding="utf-8"?>
    <com.example.demo.view.SlidingLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/slidingLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:background="#00ccff">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="This is left menu"
                android:layout_gravity="center"
                android:textColor="#00ff00"
                android:textSize="28sp" />
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/content"
            android:layout_width="360dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="#e9e9e9"
            android:orientation="vertical"
            android:visibility="visible">
    
            <Button
                android:id="@+id/menuButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Menu" />
    
            <ListView
                android:id="@+id/contentList"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:cacheColorHint="#00000000"></ListView>
        </LinearLayout>
    </com.example.demo.view.SlidingLayout>

在侧滑布局的根节点下，有且只能有两个子元素,这两个子元素必须是四种基本布局之一,   即LinearLayout, RelativeLayout, FrameLayout或TableLayout。   第一个子元素将做为左侧布局，初始化后被隐藏。第二个子元素将做为右侧布局， 也就是当前界面的主布局，将主要的数据放在里面。

为了省事，我写了个Fragment

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        
            View view=inflater.inflate(R.layout.fragment_single,container,false);
            slidingLayout = (SlidingLayout) view.findViewById(R.id.slidingLayout);
            menuButton = (Button) view.findViewById(R.id.menuButton);
            contentListView = (ListView) view.findViewById(R.id.contentList);
            dataList=new ArrayList<>();
            for (int i=0;i<15;i++)
                dataList.add("Item "+i);
            contentListAdapter = new ArrayAdapter<>(getActivity(), android.R.layout.simple_list_item_1,
                    dataList);
            contentListView.setAdapter(contentListAdapter);
            // 将滑动事件监听绑定在contentListView上
            slidingLayout.setScrollEvent(contentListView);
            menuButton.setOnClickListener(new View.OnClickListener() {
        
                @Override
                public void onClick(View v) {
        
                    // 实现点击一下menu展示左侧布局，再点击一下隐藏左侧布局的功能
                    if (slidingLayout.isLeftLayoutVisible()) {
        
                        slidingLayout.scrollToRightLayout();
                    } else {
        
                        slidingLayout.scrollToLeftLayout();
                    }
                }
            });
            return view;
        }
    }

最重要的就是调用SlidingLayout的setScrollEvent方法，为ListView注册touch事件。同时给按钮添加了一个点击事件，实现了点击一下显示左边布局，再点击一下隐藏左边布局的功能。看下效果：

![Center 1][]

[  
][Link 1]

[源代码][Link 1]

参考：

[  
http://blog.csdn.net/guolin\_blog/article/details/8714621][http_blog.csdn.net_guolin_blog_article_details_8714621]

[http://blog.csdn.net/guolin\_blog/article/details/8744400][http_blog.csdn.net_guolin_blog_article_details_8744400]

[http://blog.csdn.net/guolin\_blog/article/details/9671609][http_blog.csdn.net_guolin_blog_article_details_9671609]

[Center]: /images/20210920/85c67b7be54848b49503021843a77143.png
[Center 1]: /images/20210920/d84a571a684841aeb8cb2d18b3e58d64.png
[Link 1]: http://download.csdn.net/detail/xuemengrui12/9649064
[http_blog.csdn.net_guolin_blog_article_details_8714621]: http://blog.csdn.net/guolin_blog/article/details/8714621
[http_blog.csdn.net_guolin_blog_article_details_8744400]: http://blog.csdn.net/guolin_blog/article/details/8744400
[http_blog.csdn.net_guolin_blog_article_details_9671609]: http://blog.csdn.net/guolin_blog/article/details/9671609