DrawLayout结合materialmenu实现带动画的ToolBar

一.概述

为了搞出这个效果来我整整搞了大半天的时间，因为在这个过程中确实出现了很多问题，今天特此记录下来，先看效果图：

接下来说说整个实现过程

二.实现

首先我们要引入大神写的materialmenu动画库

注意，因为项目中用到的是ToolBar,所以在此导入的是第二个框架，如果你使用的是ActionBar，那可能就要导入其他的库了。

接下来我们看看主页面的布局文件

<android.support.v4.widget.DrawerLayout
    android:id="@+id/layout"
    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:fitsSystemWindows="true"
    tools:context="com.example.drawlayoutdemo.MainActivity">
    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        <ListView
            android:id="@+id/listview"
            android:layout_width="100dp"
            android:divider="@null"
            android:background="#9e9e9e"
            android:choiceMode="singleChoice"
            android:layout_gravity = "start"
            android:layout_height="match_parent">
        </ListView>
        <RelativeLayout
            android:id="@+id/right_draw"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_gravity = "end"
            android:background="#000000"
            >
            <TextView
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:layout_width="wrap_content"
                android:text="右边栏"
                android:layout_centerInParent="true"
                android:layout_height="wrap_content" />
        </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

最外层是v4包下的DrawerLayout，接下来是填充主页面的FrameLayout,注意，这里的FrameLayout要写在抽屉布局的上面，否则抽屉布局就无法响应点击时间，因为我们是需要抽屉布局覆盖在主页面上面的，然后就是抽屉的左右布局，左边是一个listview,右边是一个相对布局 ,我们通过android:layout_gravity 控制布局是左边还是右边。

接下来看代码，由于注释比较详细了，我就不拆开讲解了：

public class MainActivity extends ToolBarActivity implements AdapterView.OnItemClickListener{
    //左边布局
    private ListView listView;
    private String[] mString = {"菜单一","菜单二","菜单三"};
    private DrawerLayout drawerLayout;
    //左边是否打开
    private boolean is_Direction_left = false;
    //右边是否打开
    private boolean is_Direction_right = false;
    //当前显示的内容
    private View showView;
    //右边菜单布局
    private RelativeLayout right_draw;
    private MaterialMenuIconToolbar iconToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.layout);
        listView = (ListView) findViewById(R.id.listview);
        right_draw = (RelativeLayout) findViewById(R.id.right_draw);
        this.showView = listView;
        listView.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,mString));
        listView.setOnItemClickListener(this);
        //设置抽屉打开时，主要内容被自定义阴影覆盖
        drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        //给抽屉添加监听
        drawerLayout.addDrawerListener(new MenuDrawListener());
        if(savedInstanceState == null){
            setSelectedItem(0);//默认选中第一个菜单
        }
        //初始化MaterialMenuIconToolbar，第一个参数为上下文，第二个参数为颜色，第三个参数为样式
      iconToolbar = new MaterialMenuIconToolbar(this, Color.WHITE, MaterialMenuDrawable.Stroke.REGULAR) {
          @Override
          public int getToolbarViewId() {
              //所关联的toolbar的id
              return R.id.id_tool_bar;
          }
      };
    }
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        setSelectedItem(position);
    }
    public void setSelectedItem(int position){
        //给ContentFragment传递参数，改变显示内容
        Fragment fragment = ContentFragment.newInstance(mString[position]);
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_main,fragment).commit();
        listView.setItemChecked(position,true);
        setTitle(mString[position]);//当前显示的标题
        drawerLayout.closeDrawer(listView);//关闭抽屉
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main,menu);
        return true;
    }
    class MenuDrawListener extends DrawerLayout.SimpleDrawerListener {
        /**
         * 抽屉滑动时回调
         * @param drawerView
         * @param slideOffset 从0到1
         */
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            showView = drawerView;
            if(drawerView == listView){
                //设置动画
                iconToolbar.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW,
                        is_Direction_left?2-slideOffset:slideOffset);
            }else if(drawerView == right_draw){
                iconToolbar.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW,
                            is_Direction_right?2-slideOffset:slideOffset);
            }
        }
        /**
         * 抽屉打开时回调
         * @param drawerView
         */
        @Override
        public void onDrawerOpened(View drawerView) {
            if(drawerView == listView){
                is_Direction_left = true;
            }else if(drawerView == right_draw){
                is_Direction_right = true;
            }
        }
        /**
         * 抽屉关闭时回调
         * @param drawerView
         */
        @Override
        public void onDrawerClosed(View drawerView) {
            if(drawerView == listView){
                is_Direction_left = false;
            }else if(drawerView == right_draw){
                is_Direction_right = false;
                showView = listView;
            }
        }
    }
    /**
     * 根据onPostCreate回调的状态，还原对应的icon state
     */
    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        iconToolbar.syncState(savedInstanceState);
    }
    /**
     * 根据onSaveInstanceState回调的状态，保存当前icon state
     */
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        iconToolbar.onSaveInstanceState(outState);
        super.onSaveInstanceState(outState);
    }
    /**
     * 菜单点击事件
     * @param item
     * @return
     */
    /**
     * ToolBar条目点击事件
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case android.R.id.home:
                if(showView == listView){
                    if(is_Direction_left){
                        drawerLayout.closeDrawer(listView);
                    }else{
                        drawerLayout.openDrawer(listView);
                    }
                }else if(showView == right_draw){
                    if(!is_Direction_right){
                        drawerLayout.closeDrawer(right_draw);
                    }else{
                        drawerLayout.openDrawer(right_draw);
                    }
                }
                break;
            case R.id.action_personal:
                if (!is_Direction_right) {// 右边栏关闭时，打开
                    if (showView == listView) {
                        drawerLayout.closeDrawer(listView);
                    }
                    drawerLayout.openDrawer(right_draw);
                } else {// 右边栏打开时，关闭
                    drawerLayout.closeDrawer(right_draw);
                }
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

public class ContentFragment extends Fragment {
    private TextView textView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content_view,null);
        textView = (TextView) view.findViewById(R.id.tv_content);
        Bundle bundle = getArguments();
        if(bundle!=null){
            //根据当前点击的条目，设置内容
            textView.setText(bundle.getString("key"));
        }
        return view;
    }
    public static ContentFragment newInstance(String value){
        ContentFragment contentFragment = new ContentFragment();
        Bundle bundle = new Bundle();
        bundle.putString("key",value);
        //将参数保存到bundle对象中
        contentFragment.setArguments(bundle);
        return contentFragment;
    }
}

我们可以看到MainActivity继承了ToolBarActivity，接下来我们看看ToolBarActivity是如何定义的，

public abstract class ToolBarActivity extends AppCompatActivity {
    private ToolBarHelper mToolBarHelper;
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public void setContentView(int layoutResID) {
        mToolBarHelper = new ToolBarHelper(this, layoutResID);
        toolbar = mToolBarHelper.getToolBar();
        setContentView(mToolBarHelper.getContentView());
        /*把 toolbar 设置到Activity 中*/
        setSupportActionBar(toolbar);
        /*自定义的一些操作*/
        onCreateCustomToolBar(toolbar);
    }
    public void onCreateCustomToolBar(Toolbar toolbar) {
        toolbar.setContentInsetsRelative(0, 0);
    }
}

其中又用到了ToolBarHelper

public class ToolBarHelper {
    private Context mContext;
    private FrameLayout mContentView;
    /*用户定义的view*/
    private View mUserView;
    /*toolbar*/ private Toolbar mToolBar;
    /*视图构造器*/ private LayoutInflater mInflater; /*
    * 两个属性
    * 1、toolbar是否悬浮在窗口之上
    * 2、toolbar的高度获取
    * */
    private static int[] ATTRS = {
            R.attr.windowActionBarOverlay,
            R.attr.actionBarSize
    };
    public ToolBarHelper(Context context, int layoutId) {
        this.mContext = context;
        mInflater = LayoutInflater.from(mContext);
        /*初始化整个内容*/
        initContentView();
        /*初始化用户定义的布局*/
        initUserView(layoutId);
        /*初始化toolbar*/
        initToolBar();
    }
    private void initContentView() {
        /*直接创建一个帧布局，作为视图容器的父容器*/
        mContentView = new FrameLayout(mContext);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        mContentView.setLayoutParams(params);
    }
    private void initToolBar() {
        /*通过inflater获取toolbar的布局文件*/
        View toolbar = mInflater.inflate(R.layout.toolbar, mContentView);
        mToolBar = (Toolbar) toolbar.findViewById(R.id.id_tool_bar);
    }
    private void initUserView(int id) {
        mUserView = mInflater.inflate(id, null);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(ATTRS);
        /*获取主题中定义的悬浮标志*/
        boolean overly = typedArray.getBoolean(0, false);
        /*获取主题中定义的toolbar的高度*/
        int toolBarSize = (int) typedArray.getDimension(1, (int) mContext.getResources().getDimension(R.dimen.abc_action_bar_default_height_material));
        typedArray.recycle();
        /*如果是悬浮状态，则不需要设置间距*/
        params.topMargin = overly ? 0 : toolBarSize;
        /* 将布局添加到容器*/
        mContentView.addView(mUserView, params);
    }
    public FrameLayout getContentView() {
        return mContentView;
    }
    public Toolbar getToolBar() {
        return mToolBar;
    }
}

最后我们看看ToolBar的样式文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/id_tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#4400ff00"
        app:navigationIcon="?attr/homeAsUpIndicator"
        app:titleTextColor="#ff0000"
        />
</FrameLayout>

这里我们设置了ToolBar的高度为默认高度，然后设置了背景颜色，图标，以及标题的文字颜色。

源码下载