ToolBar 及 DrawerLayout 整理

使用 ToolBar 需要在主題中 使用 Theme.AppCompat.Light.NoActionBar

佈局如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test.ToolBarActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:minHeight="?attr/actionBarSize"
            >

        </android.support.v7.widget.Toolbar>
        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <!-- 內容界面 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/holo_blue_light"
                android:orientation="vertical" >
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="內容界面"/>
            </LinearLayout>

            <!-- 側滑菜單內容 必須指定其水平重力 -->
            <LinearLayout
                android:id="@+id/drawer_view"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:orientation="vertical" >
                <TextView
                    android:id="@+id/tv_left"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/green"
                    android:text="側滑界面"/>
            </LinearLayout>
        </android.support.v4.widget.DrawerLayout>

    </LinearLayout>



</android.support.constraint.ConstraintLayout>

在代碼中對ToolBar 設置標題

  		//標題的文字需在setSupportActionBar之前，不然會無效
        mToolbar.setTitle("ToolBar");
        setSupportActionBar(mToolbar);

設置 Menu Item
res 下創建 menu 文件夾，menu下創建 menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".ToolBarActivity" >

    <item
        android:id="@+id/ab_search"
        android:orderInCategory="80"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="action_share"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="action_settings"
        app:showAsAction="never"/>

</menu>

在代碼中進行加載

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

點擊監聽

 // 菜單的監聽可以在toolbar裏設置，
        // 也可通過Activity的onOptionsItemSelected回調方法來處理
        mToolbar.setOnMenuItemClickListener(
                new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_settings:
                                Toast.makeText(ToolBarActivity.this,
                                        "action_settings", Toast.LENGTH_SHORT).show();
                                break;

                            case R.id.action_share:
                                Toast.makeText(ToolBarActivity.this,
                                        "action_share", Toast.LENGTH_SHORT).show();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });

DrawerLayout 側滑效果

 mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawer, mToolbar,
                R.string.abc_action_bar_home_description,
                R.string.abc_action_bar_home_description);
        mDrawerToggle.syncState();
        mDrawer.setDrawerListener(mDrawerToggle);

整體代碼

public class ToolBarActivity extends AppCompatActivity {

    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.drawer)
    DrawerLayout mDrawer;
    @BindView(R.id.tv_left)
    TextView mTvLeft;
    private Unbinder mUnbinder;
    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);
        mUnbinder = ButterKnife.bind(this);

        initView();
    }

    private void initView() {
        //標題的文字需在setSupportActionBar之前，不然會無效
        mToolbar.setTitle("ToolBar");
        setSupportActionBar(mToolbar);

        mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawer, mToolbar,
                R.string.abc_action_bar_home_description,
                R.string.abc_action_bar_home_description);
        mDrawerToggle.syncState();
        mDrawer.setDrawerListener(mDrawerToggle);


        // 菜單的監聽可以在toolbar裏設置，
        // 也可通過Activity的onOptionsItemSelected回調方法來處理
        mToolbar.setOnMenuItemClickListener(
                new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_settings:
                                Toast.makeText(ToolBarActivity.this,
                                        "action_settings", Toast.LENGTH_SHORT).show();
                                break;

                            case R.id.action_share:
                                Toast.makeText(ToolBarActivity.this,
                                        "action_share", Toast.LENGTH_SHORT).show();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mUnbinder.unbind();
    }

    @OnClick(R.id.tv_left)
    public void onViewClicked() {
        mDrawer.closeDrawer(Gravity.LEFT);
    }
}

實現效果: