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双向侧滑菜单