安卓侧边栏实现

最新推荐文章于 2025-03-25 15:51:33 发布
最新推荐文章于 2025-03-25 15:51:33 发布
阅读量1.8k 收藏 5
点赞数
分类专栏： 安卓 文章标签： android 侧滑布局实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010431205/article/details/51556392
版权

安卓侧滑布局实现

来,先上效果图
这里写图片描述

package xiaolin.widget;

import android.content.Context;;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

import xiaolin.utils.Utils;

/**
 * 只有平移效果的侧边栏
 * Created by XiaoLin on 2016/1/14.
 */
public class ATranslationLayout extends ViewGroup {

    public static final String TAG = "ATranslationLayout";
    private static final int MININERCEPTXVILOCITY = 8;   // 最小拦截速度（dp）
    private static final int MINTOUCHVILOCITY = 300;     // 最小触发速度（dp）
    private static final float drawerTime = 2.5f;       // 动画时间

    private Scroller mScroller = null;
    private VelocityTracker mVelocity = null;
    private OnTranslationListener mOnTranslationListener = null;

    private boolean isTouchRight = false;
    private boolean isBeingDragged = false;
    private boolean isUnableToDragged = false;
    private PointF mLastInterceptPointF = new PointF();
    private float mLastTouchX = 0;
    private float mFirstTouchX = 0;

    protected int menuWidth = 0;                    // 菜单宽度
    protected boolean mIsOpenMenu = false;       // 是否显示菜单
    protected boolean isDraggedToRight = false;            // 是否向右边移动

    public ATranslationLayout(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        mScroller = new Scroller(getContext());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
        menuWidth = (int) (width * 0.75f);         // 菜单宽度
        int childCount = getChildCount();
        if (childCount == 0) {
            return;
        }
        View menuView = getChildAt(0);
        // 合成菜单的测量宽度
        int menuWidthSpec = MeasureSpec.makeMeasureSpec(menuWidth, MeasureSpec.EXACTLY);
        int menuheightSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        menuView.measure(menuWidthSpec, menuheightSpec);
        for (int i = 1; i < childCount; i++) {
            View childView1 = getChildAt(i);
            childView1.measure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        if (childCount == 0) {
            return;
        }
        View menuView = getChildAt(0);
        // 设置子视图的位置，左上角坐标，宽高
        menuView.layout(-menuView.getMeasuredWidth(), 0, 0, menuView.getMeasuredHeight());

        int left = 0;
        for (int i = 1; i < childCount; i++) {
            View childView = getChildAt(i);
            int w = childView.getMeasuredWidth();
            childView.layout(left, 0, left + w, childView.getMeasuredHeight());
            left += w;
        }
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            int x = mScroller.getCurrX();
            scrollTo(x, 0);
            // 调用invalidate()无效
            postInvalidate();
            if (mOnTranslationListener != null) {
                mOnTranslationListener.progress(isDraggedToRight, -x / (float)menuWidth);
            }
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        int action = event.getAction();
        PointF pointF = new PointF(event.getX(), event.getY());
        if (action != 0) {
            if (isBeingDragged) {
                return true;
            }
            if (isUnableToDragged) {
                return false;
            }
        }
        if (action == MotionEvent.ACTION_DOWN) {
            mLastInterceptPointF.set(pointF);
            isBeingDragged = false;
            isUnableToDragged = false;
            if(mScroller.isFinished()){
                isDraggedToRight = !isOpenMenu();
            }
            if (!mScroller.isFinished()) {
                mScroller.abortAnimation();
                return true;
            } else if (mIsOpenMenu) {
                if (event.getX() > menuWidth) {
                    isBeingDragged = true;
                }
            }
        } else if (action == MotionEvent.ACTION_MOVE) {
            float dx = Math.abs(pointF.x - mLastInterceptPointF.x);
            float dy = Math.abs(pointF.y - mLastInterceptPointF.y);
            if (dy > dx) {  // 上下滑动
                isUnableToDragged = true;
            } else if (pointF.x < mLastInterceptPointF.x && !mIsOpenMenu) { // 往左滑动&&已关窗
                isUnableToDragged = true;
            } else if (pointF.x > mLastInterceptPointF.y && mIsOpenMenu) {    // 往右滑动&&已开窗
                isUnableToDragged = true;
            } else if (dx > dy && dx > Utils.dpToPx(MININERCEPTXVILOCITY, getResources())) {  // 往右并且大于一定速度
                isBeingDragged = true;
            }
            mLastInterceptPointF.x = pointF.x;
            mLastInterceptPointF.y = pointF.y;
        }
        return isBeingDragged;
    }

    // 触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        if (mVelocity == null) {
            mVelocity = VelocityTracker.obtain();
            mLastTouchX = x;
            if (mIsOpenMenu && x > menuWidth) {
                isTouchRight = true;
                mFirstTouchX = x;
            } else {
                isTouchRight = false;
            }
        }
        mVelocity.addMovement(event);
        if (action == MotionEvent.ACTION_DOWN) {// 可能无此动作

        } else if (action == MotionEvent.ACTION_MOVE) { // 正在滑动
            float dx = x - mLastTouchX;
            drawerViewBy((int) dx);
            mLastTouchX = x;
        } else if (action == MotionEvent.ACTION_UP) {
            if (isTouchRight && mFirstTouchX == x) {
                openMenu(false);
                mVelocity.recycle();
                mVelocity = null;
                return true;
            } else {
                mVelocity.computeCurrentVelocity(1000);
                if (mVelocity.getXVelocity() < -Utils.dpToPx(MINTOUCHVILOCITY, getResources())) {
                    openMenu(false);
                } else if (mVelocity.getXVelocity() > Utils.dpToPx(MININERCEPTXVILOCITY, getResources())) {
                    openMenu(true);
                } else {
                    if (-getScrollX() > menuWidth / 2) {
                        openMenu(true);
                    } else {
                        openMenu(false);
                    }
                }
                mVelocity.recycle();
                mVelocity = null;
            }
        }
        return true;
    }

    // 按键监听
    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        int code = event.getKeyCode();
        int action = event.getAction();
        if (code == KeyEvent.KEYCODE_BACK && action == KeyEvent.ACTION_UP) {
            if (mIsOpenMenu) {
                openMenu(false);
                return true;
            }
        }
        return super.dispatchKeyEvent(event);
    }

    // 滚动距离并判断范围
    protected void drawerViewBy(int dx) {
        dx = -dx;
        int x = getScrollX();
        if (x + dx > 0) {
            scrollTo(0, 0);
        } else if (x + dx < -menuWidth) {
            scrollTo(-menuWidth, 0);
        } else {
            scrollTo(x + dx, 0);
        }
        if (mOnTranslationListener != null) {
            mOnTranslationListener.progress(isDraggedToRight, -getScrollX() / (float) menuWidth);
        }
    }

    public void openMenu(Boolean isOpen) {
        mIsOpenMenu = isOpen;
        int x = getScrollX();
        if (isOpen) {
            int time = (int) (Math.abs(-menuWidth - x) / Utils.dpToPx(1f, getResources()) * drawerTime);
            mScroller.startScroll(x, 0, -menuWidth - x, 0, time);
            if (x == 0) {
                isDraggedToRight = true;
            }
        } else {
            int time = (int) (Math.abs(x) / Utils.dpToPx(1f, getResources()) * drawerTime);
            mScroller.startScroll(x, 0, -x, 0, time);
            if (x == -menuWidth) {
                isDraggedToRight = false;
            }
        }
        if (mOnTranslationListener != null) {
            mOnTranslationListener.fold(mIsOpenMenu);
        }
        postInvalidate();
    }

    // 是打开菜单
    public boolean isOpenMenu() {
        return mIsOpenMenu;
    }

    // 设置监听
    public void setFoldingListener(OnTranslationListener listener) {
        this.mOnTranslationListener = listener;
    }

    // 监听接口
    public interface OnTranslationListener {
        void fold(boolean isOpen);
        void progress(boolean isToRight, float progress);// 0.0f-1.0f
    }

}


package xiaolin.utils;

import android.content.res.Resources;
import android.util.TypedValue;

/**
 * Created by Administrator on 2016/1/17.
 */
public class Utils {

    /**
     * dp转为像素
     * @param dp
     * @param resources
     * @return
     */
    public static float dpToPx(float dp, Resources resources){
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.getDisplayMetrics());
    }
}

然后只要在xml里使用就行了,里面放的是侧边的布局

<?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:background="#cacaca">

    <xiaolin.widget.ATranslationLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bg" />

    </xiaolin.widget.ATranslationLayout>

</LinearLayout>

效果图在上面

如果里面添加两个布局的话就会变成这样

<?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:background="#cacaca">

    <xiaolin.widget.ATranslationLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bg" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/img_bg"
            android:scaleType="centerCrop"/>

    </xiaolin.widget.ATranslationLayout>

</LinearLayout>

这里写图片描述
这里写图片描述

Android侧边栏实现
02-16
手指 左滑动屏幕时，相应的显示和隐藏菜单和内容，代码非常简单，而且是自定义实现的，不借助第三方插件。对应的原理博文： http://blog.youkuaiyun.com/evankaka/article/details/43851443
Android侧边栏
qq_42793219的博客
11-11 838
android.support.v4.widget.DrawerLayout 跟布局要使用androidv4包下的drawerlayout android:layout_gravity="start" 侧边栏的内容布局要使用start private void initData() { for (int i=0;i&lt;10;i++){ li...
【Android】侧边栏
最新发布
Mic666666的博客
03-25 317
在 Android 中实现侧边栏，通常可以使用来实现。是一个布局容器，可以包含两个子视图：一个是主内容区域，另一个是侧边栏。侧边栏可以从左侧或右侧滑出。
Android代码-一个炫酷的侧边栏效果
08-06
FantasySlide 一个 DrawerLayout 的扩展,具有帅气的动画与创新的交互。一次手势完成滑出侧边栏与选择菜单。欢迎下载 demo 体验。 效果 使用方法 添加依赖 compile 'com.github.mzule.fantasyslide:library:1.0.5' 调用 调用方法基本与 DrawerLayout 一致. 本项目支持左右 (start left end right) 侧边栏同时定义。 <!-- 这里是 SideBar 的子视图--> <!-- 如果需要的话，可以添加右侧边栏--> 最外层的 FantasyDrawerLayout 的使用与官方的 DrawerLayout 完全一致。 SideBar 用来包装每一个菜单项，SideBar 本质上可以当做一个 vertical 的 LinearLayout 来使用。 效果图上的文字变色是表示该菜单处于 hover 状态, hover 状态默认会设定 view 的 pressed 状态为 true。可以通过 Listener 来改写, 下文会有详细说
Android侧边栏滑动
11-22
这是一个Android侧边栏滑动的小demo，通过这个小demo你狂可以很快学会如何滑出侧边栏目。
Android导航栏与侧边栏实现（TabLayout+Viewpager2+DrawerLayout）
weixin_52282455的博客
09-05 1688
想要做的效果目前效果，图标大小还不太匹配，后续会再更改一下拆解分析1导航栏 tablayout+viewpgaer+fragment下面参考中已写得非常好，不再赘述。参考2侧边栏 drawerLayout+toolbar参考图标均来自阿里，可自行查找 https://www.iconfont.cn/下面是具体实现。
android 自定义侧边栏,android界面设计（一）侧边栏的两种实现方式
weixin_33603681的博客
05-25 3006
dome：https://github.com/linliangliang/sidebar一、使用slideingMenu结合fragment实现。二、使用Navigation和DrawerLayout实现。第二种实现方式：https://mp.youkuaiyun.com/postedit/846135681、下面介绍使用sideingMenu的方式实现侧边栏。主界面activity_main.xml,(用...
android 侧边栏实现
07-08
以下是对Android侧边栏实现的一些详细知识点的解释： 1. **DrawerLayout**： Android SDK中提供了`android.widget.DrawerLayout`组件，它是实现侧边栏的基础。DrawerLayout可以容纳一个主内容视图和一个或两个可...
android 侧边栏实现 slidingmenu
11-12
SlidingMenu库由Jeremy Feinstein创建，它提供了一个易于使用的API，用于在Android应用中实现滑动侧边栏。这个库支持左右滑动以及顶部和底部的菜单，可以根据开发者的需求进行定制。实现SlidingMenu的基本步骤包括：...
实现Android Studio侧边栏实现个人功能
qq_75085852的博客
06-08 1174
提示：以下是本篇文章正文内容，下面案例可供参考。
安卓自定义侧边栏的实现与优化
weixin_35756637的博客
11-06 1099
本文还有配套的精品资源，点击获取 简介：安卓应用开发中的侧边栏（DrawerLayout）是一个让用户通过滑动来打开的导航菜单。本项目将探讨如何创建、监听和自定义侧边栏，包括使用DrawerLayout组件在XML布局中的实现、在Java代码中设置侧边栏监听器、实现滑动手势监听以及自定义侧边栏内容和样式的步骤。开发者可根据需求优化侧边栏功能，以增强用户体验。项目实践如Sli...
android侧边栏demo
09-06
android侧边栏是一种很常见的效果。本例实现这种功能，供初学者参考
android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索
04-24
android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索
Android 自定义侧边栏列表
12-24
博文：https://blog.youkuaiyun.com/Crystal_xing/article/details/85230567，自定义Android 侧边栏列表的封装
android侧边栏的滑动，以及实现启动另外的Activity与更换布局
08-21
根据别人的demo加以改进与完善，实现了一些其他的功能的同时方便运用到程序中实现特设效果，（自己写了一些注释，但是很不规范，将就着看吧。）
Android 侧边栏菜单demo
07-06
侧边栏菜单demo
Android侧边菜单栏实现
DevGOOD的博客
08-18 857
在上述布局文件中，我们使用了DrawerLayout作为根布局，并在其中嵌套了一个线性布局用于显示应用的主界面。在res目录下的layout文件夹中，新建一个名为“activity_main.xml”的布局文件，用于显示应用的主界面。接下来，在res目录下的layout文件夹中，新建一个名为“navigation_header.xml”的布局文件，用于设置侧边菜单栏的头部布局。接下来，在MainActivity.java文件中，我们需要编写相应的代码以实现菜单栏的交互功能。Android侧边菜单栏实现。
安卓侧边栏实现方式及效果解析
实现Android侧边栏可以采取不同的方法和技术。 ### 知识点一：使用Android Support Library实现侧边栏 Android Support Library提供了一个专门用于实现侧边栏的库——Navigation Drawer，它简化了侧边栏的设计和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值