Android DrawerLayout 高仿QQ5.2双向侧滑菜单

转载请标明出处:,本文出自:【张鸿洋的博客】1、概述

之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣;另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家。

首先看看效果图:

DrawerLayout用起来真的很方便,下面一起看看用法~

2、DrawerLayout的使用

直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧菜单,第三个View为右侧侧滑菜单,当前第三个是可选的。

第一个View的宽高应当设置为match_parent,当然了,这也理所当然。

第二、三个View需要设置android:layout_gravity="left",,和android:layout_gravity="right"且一搬高度设置为match_parent,宽度为固定值,即侧滑菜单的宽度。

按照上面的描述写个布局文件,然后设置给Activity就添加好了左右侧滑了,是不是很简单~~~

比如我们的布局文件:

<android.support.v4.widget.DrawerLayout xmlns:android=""xmlns:tools=""android:id="@+id/id_drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/img_frame_background" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/qq" ><Buttonandroid:layout_width="40dp"android:layout_height="30dp"android:layout_marginTop="10dp"android:layout_alignParentRight="true"android:background="@drawable/youce"android:onClick="OpenRightMenu" /></RelativeLayout><fragmentandroid:id="@+id/id_left_menu"android:name="com.zhy.demo_zhy_17_drawerlayout.MenuLeftFragment"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="left"android:tag="LEFT" /><fragmentandroid:id="@+id/id_right_menu"android:name="com.zhy.demo_zhy_17_drawerlayout.MenuRightFragment"android:layout_width="100dp"android:layout_height="match_parent"android:layout_gravity="right"android:tag="RIGHT" /></android.support.v4.widget.DrawerLayout>这里我们的主内容区域为RelativeLayout

菜单用的两个Fragment,左侧为200dp,右侧为100dp;

好了,看了我们的布局文件,接下来看下我们的详细代码。

3、代码是最好的老师

1、MenuLeftFragmentpackage com.zhy.demo_zhy_17_drawerlayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MenuLeftFragment extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){return inflater.inflate(R.layout.layout_menu, container, false);}}对应的布局文件:<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:background="#00000000" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/one"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@drawable/img_1" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/one"android:text="第1个Item"android:textColor="#f0f0f0"android:textSize="20sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/two"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@drawable/img_2" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/two"android:text="第2个Item"android:textColor="#f0f0f0"android:textSize="20sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/three"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@drawable/img_3" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/three"android:text="第3个Item"android:textColor="#f0f0f0"android:textSize="20sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/four"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@drawable/img_4" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/four"android:text="第4个Item"android:textColor="#f0f0f0"android:textSize="20sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/five"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@drawable/img_5" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/five"android:text="第5个Item"android:textColor="#f0f0f0"android:textSize="20sp" /></RelativeLayout></LinearLayout></RelativeLayout>其实就是堆出来的布局~~没撒意思~2、MenuRightFragmentpackage com.zhy.demo_zhy_17_drawerlayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MenuRightFragment extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){return inflater.inflate(R.layout.menu_layout_right, container, false);}}对应布局文件:<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical"android:orientation="vertical" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center_vertical"android:layout_marginBottom="20dp"android:orientation="vertical" ><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:src="@drawable/wode" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center"android:text="扫一扫"android:textColor="#ffffff" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center_vertical"android:layout_marginBottom="20dp"android:orientation="vertical" ><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:src="@drawable/saoma" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center"android:text="讨论组"android:textColor="#ffffff" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center_vertical"android:layout_marginBottom="20dp"android:orientation="vertical" ><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:src="@drawable/wode" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center"android:text="扫一扫"android:textColor="#ffffff" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center_vertical"android:layout_marginBottom="20dp"android:orientation="vertical" ><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:src="@drawable/saoma" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center"android:text="讨论组"android:textColor="#ffffff" /></LinearLayout></LinearLayout>依旧很简单,除了图标比较难找以外~~3、MainActivity但我们好多人没想过,勇敢的冷静的理智的去接受失败,

Android DrawerLayout 高仿QQ5.2双向侧滑菜单

相关文章:

你感兴趣的文章:

标签云: