现在实现侧边栏比较简单了，官方提供的DrawerLayout可以很方便实现。 
主要实现方法是:用DrawerLayout 作为界面根控件。在DrawerLayout里面第一个View为当前界面主内容；第二个和第三个View为抽屉菜单内容。如果当前界面只需要一个抽屉菜单，则第三个View可以省略。 
第一个View的宽高应当设置为match_parent 
第二、三个View需要设置android:layout_gravity=”left”，和android:layout_gravity=”right”且一搬高度设置为match_parent，宽度为固定值，即侧滑菜单的宽度，宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。如果需要监听菜单打开关闭事件，则需要调用 DrawerLayout类的setDrawerListener() 
该接口提供了菜单打开关闭等事件的回调函数，例如 
onDrawerOpened() 
和 
onDrawerClosed() 
效果图： 
 
描述一下：右侧滑出侧边栏，包括一个标题，一个车辆列表，点击列表，右侧滑出一个与侧边栏等宽的popupwindow，也包括标题与列表，点击popupwindow消失。主要有两点，第一是侧边栏，第二是popupwindow以及滑动动画 
上代码： 
主布局activity_favorite_car.xml

  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:id="@+id/id_drawerLayout"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#f2f2f2">
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:orientation="vertical">
  13.         <boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout
  14.             android:id="@+id/id_titleLayot"
  15.             android:layout_width="match_parent"
  16.             android:layout_height="wrap_content"
  17.             android:background="@mipmap/top">
  19.         </boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout>
  21.         <LinearLayout
  22.             android:layout_width="match_parent"
  23.             android:layout_height="wrap_content"
  24.             android:layout_marginBottom="10dp"
  25.             android:layout_marginTop="10dp"
  26.             android:background="#ffffff"
  27.             android:orientation="vertical">
  29.             <ImageView
  30.                 android:id="@+id/id_imageMyCar"
  31.                 android:layout_width="wrap_content"
  32.                 android:layout_height="wrap_content"
  33.                 android:layout_gravity="center"
  34.                 android:layout_marginTop="88dp"
  35.                 android:layout_marginBottom="88dp"
  36.                 android:src="@mipmap/mycar_2" />
  37.         </LinearLayout>
  39.         <LinearLayout
  40.             android:id="@+id/id_linearCarKind"
  41.             android:layout_width="match_parent"
  42.             android:layout_height="wrap_content"
  43.             android:orientation="horizontal"
  44.             android:background="@drawable/rect_white"
  45.             android:padding="10dp"
  46.             android:gravity="center">
  47.             <TextView
  48.                 android:layout_width="0dp"
  49.                 android:layout_height="wrap_content"
  50.                 android:textSize="14sp"
  51.                 android:layout_weight="1"
  52.                 android:text="@string/mycar_kind"
  53.                 android:drawableLeft="@mipmap/mycar"
  54.                 android:drawablePadding="10dp"
  55.                 android:textColor="#3a3a3a"/>
  56.             <ImageView
  57.                 android:layout_width="wrap_content"
  58.                 android:layout_height="wrap_content"
  59.                 android:src="@mipmap/next_arrow"
  60.                 />
  61.         </LinearLayout>
  62.     </LinearLayout>
  64.     <LinearLayout
  65.         android:id="@+id/id_right_menu"
  66.         android:layout_width="240dp"
  67.         android:layout_height="match_parent"
  68.         android:layout_gravity="right"
  69.         android:orientation="vertical">
  71.         <LinearLayout
  72.             android:layout_width="match_parent"
  73.             android:layout_height="wrap_content"
  74.             android:gravity="center"
  75.             android:background="@mipmap/top"
  76.             android:orientation="horizontal">
  78.             <ImageView
  79.                 android:id="@+id/id_imageUp"
  80.                 android:layout_width="wrap_content"
  81.                 android:layout_height="wrap_content"
  82.                 android:src="@mipmap/back"
  83.                 android:layout_margin="12dp"/>
  85.             <TextView
  86.                 android:layout_width="0dp"
  87.                 android:layout_height="wrap_content"
  88.                 android:layout_weight="1"
  89.                 android:gravity="center"
  90.                 android:text="@string/mycar_favorite"
  91.                 android:textColor="#ffffff"
  92.                 android:textSize="17sp" />
  93.         </LinearLayout>
  95.         <ListView
  96.             android:id="@+id/id_listView"
  97.             android:layout_width="match_parent"
  98.             android:layout_height="match_parent"
  99.             android:background="#ffffff"
  100.             android:cacheColorHint="#00000000"
  101.             android:divider="#f2f2f2"
  102.             android:dividerHeight="1dp"/>
  103.     </LinearLayout>
  105. </android.support.v4.widget.DrawerLayout>

主界面代码

  1. //我的爱车
  2. public class FavoriteCarActivity extends BaseActivity implements TitleLayout.titleLayoutClick {
  3.     private TitleLayout titleLayout;
  4.     private ImageView imageViewCar;
  5.     private LinearLayout linearLayoutCarKind;
  6.     private LinearLayout linearLayoutRight;//右边栏
  7.     private DrawerLayout mDrawerLayout;
  8.     private ListView listViewCar;//车名称
  9.     private ArrayList<String> carNameList = new ArrayList<>();//车名称
  10.     private ArrayList<String> carModelList = new ArrayList<>();//车类型
  11.     private PopupWindow popupWindow = null;
  13.     @Override
  14.     protected void onCreate(Bundle savedInstanceState) {
  15.         super.onCreate(savedInstanceState);
  16.         setContentView(R.layout.activity_favorite_car);
  17.         titleLayout = (TitleLayout) findViewById(R.id.id_titleLayot);
  18.         titleLayout.setTitle("我的爱车");
  19.         imageViewCar = (ImageView) findViewById(R.id.id_imageMyCar);
  20.         ImageView imageViewUp = (ImageView) findViewById(R.id.id_imageUp);
  21.         linearLayoutCarKind = (LinearLayout) findViewById(R.id.id_linearCarKind);
  22.         linearLayoutRight = (LinearLayout) findViewById(R.id.id_right_menu);
  23.         linearLayoutCarKind.setOnClickListener(new View.OnClickListener() {
  24.             @Override
  25.             public void onClick(View v) {
  26.                 OpenRightMenu();
  27.             }
  28.         });
  29.         mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);
  30.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
  31.                 Gravity.RIGHT);
  32.         listViewCar = (ListView) findViewById(R.id.id_listView);
  33.         for (int i = 0; i < 10; i++) {
  34.             carNameList.add("保时捷");
  35.             carModelList.add("Panamera");
  36.         }
  38.         CarAdapter carAdapter = new CarAdapter();
  39.         listViewCar.setAdapter(carAdapter);
  40.         listViewCar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  41.             @Override
  42.             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  43.                 showCarModelPopupWindow();
  44.             }
  45.         });
  46.         imageViewUp.setOnClickListener(new View.OnClickListener() {
  47.             @Override
  48.             public void onClick(View v) {
  49.                 mDrawerLayout.closeDrawers();
  50.             }
  51.         });
  52.     }
  54.     public void OpenRightMenu() {
  55.         mDrawerLayout.openDrawer(Gravity.RIGHT);
  56.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
  57.                 Gravity.RIGHT);
  58.     }
  60.     private class CarAdapter extends BaseAdapter {
  62.         public CarAdapter() {
  64.         }
  66.         @Override
  67.         public int getCount() {
  68.             return carNameList.size();
  69.         }
  71.         @Override
  72.         public Object getItem(int position) {
  73.             return position;
  74.         }
  76.         @Override
  77.         public long getItemId(int position) {
  78.             return position;
  79.         }
  81.         @Override
  82.         public View getView(int position, View convertView, ViewGroup parent) {
  84.             if (convertView == null) {
  85.                 convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_name_item, null);
  86.             }
  88.             TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCar);
  89.             textViewCarName.setText(carNameList.get(position));
  91.             return convertView;
  92.         }
  94.     }
  96.     @Override
  97.     public void leftViewClick() {
  98.         finish();
  99.     }
  101.     @Override
  102.     public void rightViewClick() {
  104.     }
  106.     private void showCarModelPopupWindow() {
  107.         View view = View.inflate(FavoriteCarActivity.this, R.layout.car_model_list, null);
  108.         ImageView imageViewUp = (ImageView) view.findViewById(R.id.id_imageUp);
  109.         TextView textViewTitle = (TextView) view.findViewById(R.id.id_textViewCarName);
  110.         ListView listViewCarModel = (ListView) view.findViewById(R.id.id_listViewCarModel);
  111.         popupWindow = new PopupWindow(view, linearLayoutRight.getWidth(),
  112.                 LinearLayout.LayoutParams.MATCH_PARENT, true);
  113.         popupWindow.setAnimationStyle(R.style.MenuAnimationLeftRight);
  114.         popupWindow.setBackgroundDrawable(new BitmapDrawable());//需要设置背景，用物理键返回的时候
  115.         popupWindow.setFocusable(true);
  116.         popupWindow.setOutsideTouchable(true);  //设置点击屏幕其它地方弹出框消失
  117.         CarModelAdapter carModelAdapter = new CarModelAdapter();
  118.         listViewCarModel.setAdapter(carModelAdapter);
  119.         listViewCarModel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  120.             @Override
  121.             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  122.                 popupWindow.dismiss();
  123.             }
  124.         });
  125.         popupWindow.showAtLocation(titleLayout, Gravity.RIGHT, 0, 0);
  126.         imageViewUp.setOnClickListener(new View.OnClickListener() {
  127.             @Override
  128.             public void onClick(View v) {
  129.                 popupWindow.dismiss();
  130.             }
  131.         });
  132.     }
  134.     private class CarModelAdapter extends BaseAdapter {
  136.         public CarModelAdapter() {
  138.         }
  140.         @Override
  141.         public int getCount() {
  142.             return carModelList.size();
  143.         }
  145.         @Override
  146.         public Object getItem(int position) {
  147.             return position;
  148.         }
  150.         @Override
  151.         public long getItemId(int position) {
  152.             return position;
  153.         }
  155.         @Override
  156.         public View getView(int position, View convertView, ViewGroup parent) {
  158.             if (convertView == null) {
  159.                 convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_model_item, null);
  160.             }
  162.             TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCarModel);
  163.             textViewCarName.setText(carModelList.get(position));
  165.             return convertView;
  166.         }
  168.     }
  170.     @Override
  171.     public boolean onKeyDown(int keyCode, KeyEvent event) {
  172.         if (keyCode == KeyEvent.KEYCODE_BACK) {
  173.             if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
  174.                 mDrawerLayout.closeDrawers();
  175.             } else {
  176.                 return super.onKeyDown(keyCode, event);
  177.             }
  179.             return true;
  180.         }
  182.         return super.onKeyDown(keyCode, event);
  183.     }
  184. }

标题类TitleLayout.java

  1. /**
  2.  * Created by dell on 2015/11/10.
  3.  * 布局标题
  4.  */
  5. public class TitleLayout extends RelativeLayout {
  6.     TextView textViewContent;
  7.     LinearLayout linearLeft;
  8.     ImageView imageViewLeft;
  9.     LinearLayout linearRight;
  10.     ImageView imageViewRight;
  11.     TextView textViewRight;
  12.     private titleLayoutClick mListener;
  14.     public TitleLayout(Context context, AttributeSet attrs) {
  15.         super(context, attrs);
  16.         LayoutInflater.from(context).inflate(R.layout.title, this);
  17.         textViewContent = (TextView) findViewById(R.id.id_textviewContent);
  18.         linearLeft = (LinearLayout) findViewById(R.id.id_linearLeft);
  19.         imageViewLeft = (ImageView)findViewById(R.id.id_left);
  20.         linearRight = (LinearLayout) findViewById(R.id.id_linearRight);
  21.         imageViewRight = (ImageView)findViewById(R.id.id_right);
  22.         textViewRight = (TextView) findViewById(R.id.id_rightText);
  23.         try{
  24.             mListener = (titleLayoutClick) context;
  25.         }catch (Exception e){
  26.             e.printStackTrace();
  27.         }
  29.         linearLeft.setOnClickListener(new OnClickListener() {
  30.             @Override
  31.             public void onClick(View v) {
  32.                 if (mListener != null) {
  33.                     mListener.leftViewClick();
  34.                 }
  35.             }
  36.         });
  37.         linearRight.setOnClickListener(new OnClickListener() {
  38.             @Override
  39.             public void onClick(View v) {
  40.                 if (mListener != null) {
  41.                     mListener.rightViewClick();
  42.                 }
  44.             }
  45.         });
  47.     }
  49.     public void setTitle(String title) {
  50.         textViewContent.setText(title);
  51.     }
  53.     //设置右边图片
  54.     public void setLinearRightImage(int drawableID) {
  55.         imageViewRight.setBackgroundResource(drawableID);
  56.     }
  57.     //设置左边图片
  58.     public void setLinearLeftImage(int drawableID) {
  59.         imageViewLeft.setBackgroundResource(drawableID);
  60.     }
  62.     //设置右边文本
  63.     public void setLinearRightText(String rightTextString) {
  64.         textViewRight.setText(rightTextString);
  65.     }
  67.     //设置右边图片为可见，根据viewID判断文本与图片的显示，0显示图片，1显示文本
  68.     public void setLinearRightVisibility(int viewID) {
  70.         linearRight.setVisibility(View.VISIBLE);
  71.         if(viewID==0){
  72.             imageViewRight.setVisibility(View.VISIBLE);
  73.             textViewRight.setVisibility(View.INVISIBLE);
  74.         }else if(viewID==1){
  75.             textViewRight.setVisibility(View.VISIBLE);
  76.             imageViewRight.setVisibility(View.INVISIBLE);
  77.         }
  78.     }
  80.     public interface titleLayoutClick {
  81.         public void leftViewClick();//左图片点击
  82.         public void rightViewClick();//右边图片点击
  83.     }
  84. }

标题类布局title.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/id_top"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content">
  7.     <LinearLayout
  8.         android:id="@+id/id_linearLeft"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:layout_alignParentLeft="true"
  12.         android:layout_centerVertical="true">
  14.         <ImageView
  15.             android:id="@+id/id_left"
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="wrap_content"
  18.             android:layout_margin="12dp"
  19.             android:background="@mipmap/back" />
  21.     </LinearLayout>
  23.     <LinearLayout
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:layout_centerInParent="true">
  29.         <TextView
  30.             android:id="@+id/id_textviewContent"
  31.             android:layout_width="wrap_content"
  32.             android:layout_height="wrap_content"
  33.             android:layout_margin="12dp"
  34.             android:textColor="@color/white"
  35.             android:textSize="17sp"/>
  37.     </LinearLayout>
  39.     <LinearLayout
  40.         android:id="@+id/id_linearRight"
  41.         android:layout_width="wrap_content"
  42.         android:layout_height="wrap_content"
  43.         android:layout_alignParentRight="true"
  44.         android:layout_centerVertical="true"
  45.         android:visibility="invisible">
  47.         <ImageView
  48.             android:id="@+id/id_right"
  49.             android:layout_width="wrap_content"
  50.             android:layout_height="wrap_content"
  51.             android:layout_margin="12dp" />
  52.         <TextView
  53.             android:id="@+id/id_rightText"
  54.             android:layout_width="wrap_content"
  55.             android:layout_height="wrap_content"
  56.             android:layout_margin="12dp"
  57.             android:textSize="14sp"
  58.             android:textColor="#ffffff"/>
  59.     </LinearLayout>
  60. </RelativeLayout>

列表项布局就不写了 
动画style

  1.  <!-- PopupWindow左右滑动的窗口动画 -->
  2.     <style name="MenuAnimationLeftRight">
  3.         <item name="android:windowEnterAnimation">@anim/menu_fadein_right</item>
  4.         <item name="android:windowExitAnimation">@anim/menu_fadein_left</item>
  5.     </style>

menu_fadein_right

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <translate
  5.         android:duration="500"
  6.         android:fromXDelta="100%"
  7.         android:toXDelta="0"
  8.         />
  9. </set>

menu_fadein_left

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate
  4.         android:duration="500"
  5.         android:fromXDelta="0"
  6.         android:toXDelta="100%" />
  7. </set>

参考博客 
DrawerLayout 抽屉 
Android DrawerLayout 高仿QQ5.2双向侧滑菜单

android DrawerLayout 侧边栏实现的更多相关文章

  1. Android DrawerLayout 抽屉

    Android DrawerLayout 抽屉 DrawerLayout 在supportV4 Lib在.类似的开源slidemenu如,DrawerLayout父类ViewGroup,自定义组件基本 ...

  2. Android - DrawerLayout

    Android DrawerLayout 的使用 Android L Android Studio 1.4 从主视图左侧能抽出一个导航栏,效果图:  点击后弹出新界面:  新界面也可以抽出左侧导航栏 ...

  3. Android App 侧边栏菜单的简单实现

    效果图 Layout 注意事项 想要实现侧边栏,需要配合使用DrawerLayout.因为会用到嵌套布局,所以根布局不能是 ConstraintLayout,最好使用 LinearLayout 布局. ...

  4. Android实现侧边栏SlidingPaneLayout

    //主布局 1 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widg ...

  5. Android DrawerLayout Plus 增强版抽屉菜单

    DrawerLayout是官方提供的侧滑菜单,相比SliddingMenu,它更加轻量级.默认情况下,DrawerLayout可以设置左侧或者右侧滑出菜单.如下,   xml布局: <!-- & ...

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

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面 ...

  7. Android DrawerLayout 点击事情穿透

    今天使用DrawerLayout做网易4.4版本侧边栏发现点击DrawerLayout空白部分,下面部分content会获得点击事件.解决方法是在<!-- The navigation draw ...

  8. Android: DrawerLayout 侧滑菜单栏

    DrawerLayout是SupportLibrary包中实现的侧滑菜单效果的控件. 分为主内容区域和侧边菜单区域 drawerLayout本身就支持:侧边菜单根据手势展开与隐藏, 开发者只需要实现: ...

  9. Android DrawerLayout侧滑菜单

    本教程已经录制视频,欢迎大家观看我在CSDN学院录制的课程:http://edu.csdn.net/lecturer/944

随机推荐

  1. C# 随笔 【ToList().Foreach()和Foreach()】

    1. 最近在做一个Socket通讯的例子,但是如果使用UTF-8编码传输中文的话取和的会不一样.早上做了测试 . string str = "a我..";看代码中间是一个英文,一个 ...

  2. css如何将div画成三角形

    首先了解一下盒模型: 盒模型 先看一段代码: #div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 10 ...

  3. POJ 3186Treats for the Cows(区间DP)

    题目链接:http://poj.org/problem?id=3186 题目大意:给出的一系列的数字,可以看成一个双向队列,每次只能从队首或者队尾出队,第n个出队就拿这个数乘以n,最后将和加起来,求最 ...

  4. 关于ZIP自动打包的进一步进化思路

    http://blog.163.com/long200259@126/blog/static/11288755920093120529157/

  5. 洛谷P1615 西游记公司 题解

    题目传送门 这道题题面写得非常好. 但好像并没有什么ruan用. 这道题貌似就是把时间差求出来,乘上猪八戒能偷的电脑数就好了.(注意long long) #include<bits/stdc++ ...

  6. 小程序授权怎么写 ， 用户点击取消授权 调用 wx.authorize

    点击获取授权 onLoad: function (options) { console.log("onLoad====="); var that=this; wx.getUserI ...

  7. javascript copy text to clipboard

    本段代码摘自微软docs网站上,目前需要解决在IE浏览器中触发copy事件的方法,也可以直接调用jquery. <!DOCTYPE html> <html> <head& ...

  8. LoadRunner中Vugen-Recording Options选项卡介绍：

    LoadRunner中Vugen-Recording Options选项卡介绍:

  9. Redis Cluster集群的搭建与实践

    Redis Cluster集群 一.redis-cluster设计 Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis 3.0之后版本支持redis-cluster集群,Re ...

  10. 使用fastadmin系统自带的图片上传plupload

    首先,form表单需要具有如下代码 <form class="form-horizontal" role="form" method="POST ...