Android中DrawerLayout（仿QQ双向侧滑菜单效果）

2024-03-20 18:48
文章标签 android 双向 效果 qq 菜单 侧滑 drawerlayout

本文主要是介绍Android中DrawerLayout（仿QQ双向侧滑菜单效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Android中DrawerLayout抽屉（仿QQ效果）
导航抽屉显示在屏幕的最左侧，默认情况下是隐藏的，当用户用手指从边缘向另一个滑动的时候，会出现一个隐藏的面板，当点击面板外部或者向原来的方向滑动的时候，抽屉导航就会消失了！
这个抽屉就是DrawerLayout，DrawerLayout是存在于v4包下的类,主要实现Android抽屉的效果。
重点内容
1.主内容视图一定要是DrawerLayout的第一个子视图
2.主内容视图宽度和高度需要match_parent
3.必须显示指定侧滑视图的android:layout_gravity属性
android:layout_gravity = “start”时，从左向右滑出菜单，android:layout_gravity = “end”时，从右向左滑出菜单

下面别的不多说，直接贴代码。

这里写代码片
xml布局：

这里写代码片
<android.support.v4.widget.DrawerLayout 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"android:id="@+id/drawerLayout"android:background="@drawable/img_frame_background"tools:context=".MainActivity" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/home" ><Buttonandroid:layout_width="50dp"android:layout_height="50dp"android:layout_alignParentRight="true"android:background="@drawable/btn"android:onClick="click" /></RelativeLayout><fragment android:name="com.example.cn.bgs.drawerlayoutqqdemo.FragmentA"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="start"android:tag="LEFT"/><fragment android:name="com.example.cn.bgs.drawerlayoutqqdemo.FragmentB"android:layout_width="100dp"android:layout_height="match_parent"android:layout_gravity="end"android:tag="RIGHT"/>
</android.support.v4.widget.DrawerLayout>

fragment_a 布局代码

这里写代码片
<?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:gravity="center"android:orientation="vertical" ><LinearLayout
        android:layout_width="match_parent"android:layout_height="60dp"android:gravity="center"android:orientation="horizontal" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:src="@drawable/img_1" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:text="第一个item"android:textColor="#ffffff"android:textSize="18sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="60dp"android:gravity="center"android:orientation="horizontal" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:src="@drawable/img_2" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:text="第二个item"android:textColor="#ffffff"android:textSize="18sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="60dp"android:gravity="center"android:orientation="horizontal" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:src="@drawable/img_3" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:text="第三个item"android:textColor="#ffffff"android:textSize="18sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="60dp"android:gravity="center"android:orientation="horizontal" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:src="@drawable/img_4" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:text="第四个item"android:textColor="#ffffff"android:textSize="18sp" /></LinearLayout><LinearLayout android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:gravity="center"><ImageView android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/img_5"android:layout_marginLeft="10dp"/><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第五个item"android:textColor="#ffffff"android:textSize="18sp"android:layout_marginLeft="5dp"/></LinearLayout></LinearLayout>

fragment_b 布局代码

这里写代码片
<?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:padding="5dp"android:orientation="vertical" ><LinearLayout
        android:layout_width="match_parent"android:layout_height="70dp"android:gravity="center"android:orientation="vertical" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/saoma" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="扫一扫"android:textSize="15sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="70dp"android:gravity="center"android:orientation="vertical" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/phone" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="电话"android:textSize="15sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="70dp"android:gravity="center"android:orientation="vertical" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/person" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="联系人"android:textSize="15sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="70dp"android:gravity="center"android:orientation="vertical" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/mobile" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="手机"android:textSize="15sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="70dp"android:gravity="center"android:orientation="vertical" ><ImageView
            android:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/discuss" /><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="讨论"android:textSize="15sp" /></LinearLayout>
</LinearLayout>

FragmentA 代码

这里写代码片
public class FragmentA extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_a, container, false);
}

}
FragmentB代码同理：

public class FragmentB extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_b, container, false);
}

}
MainActivity 代码

这里写代码片
public class MainActivity extends FragmentActivity implements DrawerListener {private DrawerLayout drawerLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);drawerLayout.setDrawerListener(this);drawerLayout.setScrimColor(color.transparent);drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);}public void click(View v) {drawerLayout.openDrawer(Gravity.END);drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END);}@Overridepublic void onDrawerClosed(View arg0) {drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);}@Overridepublic void onDrawerOpened(View arg0) {}@Overridepublic void onDrawerSlide(View arg0, float arg1) {// 获得主视图的第一个View mContent = drawerLayout.getChildAt(0);// 获得菜单（抽屉）当前滑动的菜单View mMenu = arg0;// 缩放后的比列float scale = 1 - arg1;// 获取滑出菜单的宽度int mMenuWidth = drawerLayout.getMeasuredWidth();float leftscale = 0.8f + scale * 0.2f;// 内容区域ViewHelper.setScaleX(mContent, leftscale);ViewHelper.setScaleY(mContent, leftscale);// 抽屉区域ViewHelper.setScaleX(mMenu, 0.7f + 0.3f * arg1);ViewHelper.setScaleY(mMenu, 0.7f + 0.3f * arg1);ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * arg1);// 渐变动画效果if (arg0.getTag().equals("LEFT")) {ViewHelper.setTranslationX(mContent, mMenuWidth * arg1);// 位移动画效果} else {ViewHelper.setTranslationX(mContent, -mMenuWidth * arg1);}}@Overridepublic void onDrawerStateChanged(int arg0) {}}

完整的代码就写完了，下面看一下效果。
如图：
图一：

这里写图片描述

图二：

这里写图片描述

图三：

这里写图片描述

如有雷同，纯属意外。如果我的文章对你有帮助，请顶一下，谢谢，多多指教。本人将会继续写下去，，，，，，

这篇关于Android中DrawerLayout（仿QQ双向侧滑菜单效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/830408。

相关文章

基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
Android数据库Room的实际使用过程总结

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象（DAO）和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类（Entity）3.创建数据访问对象（DAO
阅读更多...
Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》：本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt
阅读更多...
使用Python实现生命之轮Wheel of life效果

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频，让我们珍惜时间，因为一生是有限的。使用python创建生命倒计时图表，珍惜时间
阅读更多...
Android WebView的加载超时处理方案

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
csu1329(双向链表)

csu1329(双向链表)

题意：给n个盒子，编号为1到n，四个操作：1、将x盒子移到y的左边；2、将x盒子移到y的右边；3、交换x和y盒子的位置；4、将所有的盒子反过来放。 思路分析：用双向链表解决。每个操作的时间复杂度为O(1)，用数组来模拟链表，下面的代码是参考刘老师的标程写的。 代码如下： #include<iostream>#include<algorithm>#include<stdio.h>#
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2