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

最新推荐文章于 2024-04-07 13:52:11 发布

置顶我是阿亮啊

最新推荐文章于 2024-04-07 13:52:11 发布

阅读量647

点赞数 1

分类专栏：安卓抽屉式菜单仿qq 文章标签： android 抽屉仿qq

本文链接：https://blog.csdn.net/tdltdltdl886/article/details/72832914

版权

安卓同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

抽屉式菜单

1 篇文章 0 订阅

订阅专栏

仿qq

1 篇文章 0 订阅

订阅专栏

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" >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/home" >

        <Button
            android: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;

    @Override
    protected 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);
    }

    @Override
    public void onDrawerClosed(View arg0) {
        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.END);
    }

    @Override
    public void onDrawerOpened(View arg0) {

    }

    @Override
    public 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);
        }

    }

    @Override
    public void onDrawerStateChanged(int arg0) {

    }

}

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

这里写图片描述

图二：

这里写图片描述

图三：

这里写图片描述

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

我是阿亮啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android中DrawerLayout（仿QQ双向侧滑菜单效果）

Android中DrawerLayout抽屉（仿QQ效果）导航抽屉显示在屏幕的最左侧，默认情况下是隐藏的，当用户用手指从边缘向另一个滑动的时候，会出现一个隐藏的面板，当点击面板外部或者向原来的方向滑动的时候，抽屉导航就会消失了！这个抽屉就是DrawerLayout，DrawerLayout是存在于v4包下的类,主要实现Android抽屉的效果。重点内容 1.主内容视图一定要是Drawe
复制链接

扫一扫