android DrawerLayout 侧边栏实现

现在实现侧边栏比较简单了，官方提供的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

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/id_drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f2f2f2"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout android:id="@+id/id_titleLayot" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@mipmap/top"> </boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="#ffffff" android:orientation="vertical"> <ImageView android:id="@+id/id_imageMyCar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="88dp" android:layout_marginBottom="88dp" android:src="@mipmap/mycar_2" /> </LinearLayout> <LinearLayout android:id="@+id/id_linearCarKind" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@drawable/rect_white" android:padding="10dp" android:gravity="center"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textSize="14sp" android:layout_weight="1" android:text="@string/mycar_kind" android:drawableLeft="@mipmap/mycar" android:drawablePadding="10dp" android:textColor="#3a3a3a"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/next_arrow" /> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/id_right_menu" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="right" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:background="@mipmap/top" android:orientation="horizontal"> <ImageView android:id="@+id/id_imageUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/back" android:layout_margin="12dp"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/mycar_favorite" android:textColor="#ffffff" android:textSize="17sp" /> </LinearLayout> <ListView android:id="@+id/id_listView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" android:cacheColorHint="#00000000" android:divider="#f2f2f2" android:dividerHeight="1dp"/> </LinearLayout> </android.support.v4.widget.DrawerLayout> 

 

主界面代码

//我的爱车 public class FavoriteCarActivity extends BaseActivity implements TitleLayout.titleLayoutClick { private TitleLayout titleLayout; private ImageView imageViewCar; private LinearLayout linearLayoutCarKind; private LinearLayout linearLayoutRight;//右边栏 private DrawerLayout mDrawerLayout; private ListView listViewCar;//车名称 private ArrayList<String> carNameList = new ArrayList<>();//车名称 private ArrayList<String> carModelList = new ArrayList<>();//车类型 private PopupWindow popupWindow = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_favorite_car); titleLayout = (TitleLayout) findViewById(R.id.id_titleLayot); titleLayout.setTitle("我的爱车"); imageViewCar = (ImageView) findViewById(R.id.id_imageMyCar); ImageView imageViewUp = (ImageView) findViewById(R.id.id_imageUp); linearLayoutCarKind = (LinearLayout) findViewById(R.id.id_linearCarKind); linearLayoutRight = (LinearLayout) findViewById(R.id.id_right_menu); linearLayoutCarKind.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { OpenRightMenu(); } }); mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout); mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT); listViewCar = (ListView) findViewById(R.id.id_listView); for (int i = 0; i < 10; i++) { carNameList.add("保时捷"); carModelList.add("Panamera"); } CarAdapter carAdapter = new CarAdapter(); listViewCar.setAdapter(carAdapter); listViewCar.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { showCarModelPopupWindow(); } }); imageViewUp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mDrawerLayout.closeDrawers(); } }); } public void OpenRightMenu() { mDrawerLayout.openDrawer(Gravity.RIGHT); mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT); } private class CarAdapter extends BaseAdapter { public CarAdapter() { } @Override public int getCount() { return carNameList.size(); } @Override public Object getItem(int position) { return position; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_name_item, null); } TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCar); textViewCarName.setText(carNameList.get(position)); return convertView; } } @Override public void leftViewClick() { finish(); } @Override public void rightViewClick() { } private void showCarModelPopupWindow() { View view = View.inflate(FavoriteCarActivity.this, R.layout.car_model_list, null); ImageView imageViewUp = (ImageView) view.findViewById(R.id.id_imageUp); TextView textViewTitle = (TextView) view.findViewById(R.id.id_textViewCarName); ListView listViewCarModel = (ListView) view.findViewById(R.id.id_listViewCarModel); popupWindow = new PopupWindow(view, linearLayoutRight.getWidth(), LinearLayout.LayoutParams.MATCH_PARENT, true); popupWindow.setAnimationStyle(R.style.MenuAnimationLeftRight); popupWindow.setBackgroundDrawable(new BitmapDrawable());//需要设置背景，用物理键返回的时候 popupWindow.setFocusable(true); popupWindow.setOutsideTouchable(true); //设置点击屏幕其它地方弹出框消失 CarModelAdapter carModelAdapter = new CarModelAdapter(); listViewCarModel.setAdapter(carModelAdapter); listViewCarModel.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { popupWindow.dismiss(); } }); popupWindow.showAtLocation(titleLayout, Gravity.RIGHT, 0, 0); imageViewUp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { popupWindow.dismiss(); } }); } private class CarModelAdapter extends BaseAdapter { public CarModelAdapter() { } @Override public int getCount() { return carModelList.size(); } @Override public Object getItem(int position) { return position; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_model_item, null); } TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCarModel); textViewCarName.setText(carModelList.get(position)); return convertView; } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) { mDrawerLayout.closeDrawers(); } else { return super.onKeyDown(keyCode, event); } return true; } return super.onKeyDown(keyCode, event); } }

 

标题类TitleLayout.java

/** * Created by dell on 2015/11/10. * 布局标题 */ public class TitleLayout extends RelativeLayout { TextView textViewContent; LinearLayout linearLeft; ImageView imageViewLeft; LinearLayout linearRight; ImageView imageViewRight; TextView textViewRight; private titleLayoutClick mListener; public TitleLayout(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.title, this); textViewContent = (TextView) findViewById(R.id.id_textviewContent); linearLeft = (LinearLayout) findViewById(R.id.id_linearLeft); imageViewLeft = (ImageView)findViewById(R.id.id_left); linearRight = (LinearLayout) findViewById(R.id.id_linearRight); imageViewRight = (ImageView)findViewById(R.id.id_right); textViewRight = (TextView) findViewById(R.id.id_rightText); try{ mListener = (titleLayoutClick) context; }catch (Exception e){ e.printStackTrace(); } linearLeft.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (mListener != null) { mListener.leftViewClick(); } } }); linearRight.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (mListener != null) { mListener.rightViewClick(); } } }); } public void setTitle(String title) { textViewContent.setText(title); } //设置右边图片 public void setLinearRightImage(int drawableID) { imageViewRight.setBackgroundResource(drawableID); } //设置左边图片 public void setLinearLeftImage(int drawableID) { imageViewLeft.setBackgroundResource(drawableID); } //设置右边文本 public void setLinearRightText(String rightTextString) { textViewRight.setText(rightTextString); } //设置右边图片为可见，根据viewID判断文本与图片的显示，0显示图片，1显示文本 public void setLinearRightVisibility(int viewID) { linearRight.setVisibility(View.VISIBLE); if(viewID==0){ imageViewRight.setVisibility(View.VISIBLE); textViewRight.setVisibility(View.INVISIBLE); }else if(viewID==1){ textViewRight.setVisibility(View.VISIBLE); imageViewRight.setVisibility(View.INVISIBLE); } } public interface titleLayoutClick { public void leftViewClick();//左图片点击 public void rightViewClick();//右边图片点击 } }

 

标题类布局title.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/id_top" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/id_linearLeft" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true"> <ImageView android:id="@+id/id_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="12dp" android:background="@mipmap/back" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <TextView android:id="@+id/id_textviewContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="12dp" android:textColor="@color/white" android:textSize="17sp"/> </LinearLayout> <LinearLayout android:id="@+id/id_linearRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:visibility="invisible"> <ImageView android:id="@+id/id_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="12dp" /> <TextView android:id="@+id/id_rightText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="12dp" android:textSize="14sp" android:textColor="#ffffff"/> </LinearLayout> </RelativeLayout>

 

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

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

menu_fadein_right

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

 

menu_fadein_left

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

 

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