侧滑菜单

Posted nangongyibin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了侧滑菜单相关的知识,希望对你有一定的参考价值。

  • 侧滑菜单 
  • 代码实现步骤 
    • [1]先画主页面 代码如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/top_bar_bg"
        android:orientation="horizontal">

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/main_back" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/top_bar_divider" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="新闻"
            android:textColor="@android:color/white"
            android:textSize="24sp" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="天道酬勤,追梦无疆" />
</LinearLayout>

 

    • [2]画菜单页面
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:background="@drawable/menu_bg"
        android:orientation="vertical">

        <TextView
            style="@style/MenuText"
            android:background="#571F2C"
            android:drawableLeft="@drawable/tab_news"
            android:text="新闻" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_read"
            android:text="订阅" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_ties"
            android:text="跟帖" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_pics"
            android:text="图片" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_ugc"
            android:text="话题" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_vote"
            android:text="投票" />

        <TextView
            style="@style/MenuText"
            android:drawableLeft="@drawable/tab_focus"
            android:text="聚合阅读" />
    </LinearLayout>
</ScrollView>

 

    • [3]把共同的属性抽到一个style里面
    <!-- 菜单文字的样式 -->
    <style name="MenuText" parent="android:Widget.TextView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:drawablePadding">15dp</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:padding">15dp</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">25sp</item>
        <item name="android:textStyle">bold</item>
    </style>

 

    • [4] 通过include 把2个孩子加入到main_activity页面
<?xml version="1.0" encoding="utf-8"?>
<ngyb.sideslip.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sm"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <include layout="@layout/menu" />
</ngyb.sideslip.SlidingMenu>

 

    • [5]对孩子重新排版 重写onlayout方法
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        View main = getChildAt(0);
        View child = getChildAt(1);
        width = child.getMeasuredWidth();
        child.layout(-width, t, l, b);
        main.layout(l, t, r, b);
    }

 

    • [6]让容器消费事件,就是重写onTouchEvent方法 处理手指按下 和移动的逻辑

 


@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
distanceX = moveX - downX + currentLeft;
if (distanceX <= 0) {
distanceX = 0;
} else if (distanceX >= width) {
distanceX = width;
}
scrollToX((int) distanceX);
break;
case MotionEvent.ACTION_UP:
if (distanceX >= width / 2) {
currentLeft = width;
} else {
currentLeft = 0;
}
float startX = distanceX;
float endX = currentLeft;
startToend(startX, endX);
break;
}
return true;
}
 

 

    • [7]处理手指抬起的逻辑
            case MotionEvent.ACTION_UP:
                if (distanceX >= width / 2) {
                    currentLeft = width;
                } else {
                    currentLeft = 0;
                }
                float startX = distanceX;
                float endX = currentLeft;
                startToend(startX, endX);
                break;

 

    • [8]让view 实现平滑滚动. Scroller 
      • [8.1]先获取scroller实例
        scroller = new Scroller(getContext());

 

      • [8.2] 模拟X轴滚动的数据
    private void startToend(float startX, float endX) {
        int sx = (int) startX;
        int dx = (int) (endX - startX);
        int time = dx * 15;
        scroller.startScroll(sx, 0, dx, 0, time);
        invalidate();
    }

 

      • [8.3] 取出模拟的数据
    @Override
    public void computeScroll() {
        if (scroller.computeScrollOffset()) {
            int currX = scroller.getCurrX();
            scrollToX(currX);
            invalidate();
        }
    }

 

    • [9].点击按钮实现菜单切换
    public void switchMenu() {
        int startX = 0;
        if (currentLeft == 0) {
            currentLeft = width;
            startX = 0;
        } else {
            currentLeft = 0;
            startX = width;
        }
        startToend(startX, currentLeft);
    }

 

    • [10].处理事件冲突. 如果x轴移动的距离 > Y轴移动的距离就拦截事件

 

    @Override
    public boolean onInterceptHoverEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                float moveX = event.getX();
                float moveY = event.getY();
                float distanceX = moveX - downX;
                float distanceY = moveY - downY;
                if (Math.abs(distanceX) > Math.abs(distanceY)) {
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return false;
    }

https://github.com/nangongyibin7219/Android_SlidingMenu





























以上是关于侧滑菜单的主要内容,如果未能解决你的问题,请参考以下文章

侧滑菜单

嗯嗯,一句代码就搞定 RecycleView 侧滑菜单添加头部底部加载更多

一句代码搞定 RecycleView 侧滑菜单添加头部底部加载更多

DrawerLayout侧滑菜单

安卓抽屉菜单(侧滑菜单)全屏设置

Android 使用DrawerLayout快速实现侧滑菜单