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。

相关文章

Eclipse+ADT与Android Studio开发的区别

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览（所见即所得,以及多个屏幕预览），这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架，so,创建项目时AS比较慢。android studio基于gradle构建项目，你无法同时集中管理和维护多个项目的源码，而eclipse ADT可以同时打开
阅读更多...
android 免费短信验证功能

android 免费短信验证功能

没有太复杂的使用的话，功能实现比较简单粗暴。 在www.mob.com网站中可以申请使用免费短信验证功能。 步骤： 1.注册登录。 2.选择“短信验证码SDK” 3.下载对应的sdk包，我这是选studio的。 4.从头像那进入后台并创建短信验证应用，获取到key跟secret 5.根据技术文档操作（initSDK方法写在setContentView上面） 6.关键：在有用到的Mo
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...
Android我的二维码扫描功能发展史（完整）

Android我的二维码扫描功能发展史（完整）

最近在研究下二维码扫描功能，跟据从网上查阅的资料到自己勉强已实现扫描功能来一一介绍我的二维码扫描功能实现的发展历程： 首页通过网络搜索发现做android二维码扫描功能看去都是基于google的ZXing项目开发。 2、搜索怎么使用ZXing实现自己的二维码扫描：从网上下载ZXing-2.2.zip以及core-2.2-source.jar文件，分别解压两个文件。然后把.jar解压出来的整个c
阅读更多...
android 带与不带logo的二维码生成

android 带与不带logo的二维码生成

该代码基于ZXing项目，这个网上能下载得到。 定义的控件以及属性： public static final int SCAN_CODE = 1;private ImageView iv;private EditText et;private Button qr_btn,add_logo;private Bitmap logo,bitmap,bmp; //logo图标private st
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
Android多线程下载见解

Android多线程下载见解

通过for循环开启N个线程，这是多线程，但每次循环都new一个线程肯定很耗内存的。那可以改用线程池来。 就以我个人对多线程下载的理解是开启一个线程后： 1.通过HttpUrlConnection对象获取要下载文件的总长度 2.通过RandomAccessFile流对象在本地创建一个跟远程文件长度一样大小的空文件。 3.通过文件总长度/线程个数=得到每个线程大概要下载的量（线程块大小）。
阅读更多...
以canvas方式绘制粒子背景效果，感觉还可以

以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
阅读更多...
echarts省份标注加散点效果

echarts省份标注加散点效果

这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。 先直接上代码： import anhuiMapJson from './anhui.json'getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMa
阅读更多...
时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

NTP 是什么？   NTP 是网络时间协议（Network Time Protocol），它用来同步网络设备【如计算机、手机】的时间的协议。 NTP 实现什么目的？   目的很简单，就是为了提供准确时间。因为我们的手表、设备等，经常会时间跑着跑着就有误差，或快或慢的少几秒，时间长了甚至误差过分钟。 NTP 服务器列表 最常见、熟知的就是 www.pool.ntp.org/zo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2