android 5.X Toolbar+DrawerLayout實現抽屜菜單

android 5.X Toolbar+DrawerLayout實現抽屜菜單

前言

?android5.X新增的一個控制項Toolbar，這個控制項比ActionBar更加自由，可控，由於以前的ActionBar的靈活性比較差，所以google逐漸使用Toolbar替代ActionBar，所以Toolbar也可以說是超級ActionBar。

這篇文章不詳細介紹ToolBar的使用（定製），主要是介紹Toolbar使用的一個例子，即Toolbar結合DrawerLayout實現抽屜菜單。

使用這個兩個控制項需要引入相應的庫依賴：

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:design:23.0.1'}

1. Toolbar的布局檔案

include_toolbar.xml

Toolbar控制項使用和其他的控制項使用類似，需要注意的是引用v7擴充包中的Toolbar，而不是系統內建的那個Toolbar，這樣可以相容v21以下的裝置。

2. 添加動作菜單

功能表項目通常放在menu檔案夾下的一個xml檔案中

menu_main.xml

之前的ActionBar也是需要使用這個菜單檔案來渲染其動作菜單，Toolbar也一樣。

有了菜單布局檔案，還需要在代碼中初始化菜單，這樣Toolbar上面才會顯示這些動作菜單（重寫Activity的onCreateOptionsMenu()方法）：

/** * 必須重寫該方法建立菜單，不然菜單不會顯示在Toolbar中 * @param menu * @return */@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.menu_main,menu);    return true;}

3. activity主布局檔案

activity_main.xml

                        <framelayout android:id="@+id/fl_containor" android:layout_height="match_parent" android:layout_width="match_parent">        </framelayout>                                                    

4. 代碼初始化Toolbar

 @NonNull private void initToolbar() {     mToolbar = (Toolbar) findViewById(R.id.toolbar);     mToolbar.setLogo(R.mipmap.ic_launcher);     mToolbar.setTitle("主標題");     mToolbar.setSubtitle("副標題");     // ...     // 這個方法很重要，不能少，讓toolbar取代ActionBar     setSupportActionBar(mToolbar); }

注意：一定要調用setSupportActionBar()讓Toolbar取代ActionBar，同時還需要將當前Activity的主題設定為NoActionBar。

5. 將Toolbar與DrawerLayout狀態綁定

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);drawerToggle.syncState();mDrawerLayout.setDrawerListener(drawerToggle);

6. 初始化內容視圖

private void initContentView() {    Fragment fragment = new ContentFragment();    Bundle bundle = new Bundle();    bundle.putString("title","首頁");    fragment.setArguments(bundle);    mFm.beginTransaction().replace(R.id.fl_containor,fragment).commit();}

ContentFragment.java

package com.example.lt.toolbar;import android.app.ActionBar;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by lt on 2016/3/16. */public class ContentFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle bundle) {        TextView textView = new TextView(getActivity());        if(getArguments()!=null){            String title = getArguments().getString("title");            textView.setText(title);            textView.setGravity(Gravity.CENTER);            textView.setLayoutParams(new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));        }        return textView;    }}

7. 初始化抽屜菜單

private void initLeftMenu() { ListView menuList = (ListView) findViewById(R.id.lv_menu); menuList.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1         , new String[]{"首頁","新聞","個人中心"})); menuList.setOnItemClickListener(new AdapterView.OnItemClickListener() {     @Override     public void onItemClick(AdapterView parent, View view, int position, long id) {         Fragment fragment = new ContentFragment();         Bundle bundle = new Bundle();         bundle.putString("title", ((TextView) view).getText().toString());         fragment.setArguments(bundle);         mFm.beginTransaction().replace(R.id.fl_containor, fragment).commit();         mDrawerLayout.closeDrawer(Gravity.LEFT);     } });}

這裡用了一個ListView來渲染抽屜菜單，並設定了當點擊後替換右邊的內容視圖的點擊事件。

完整代碼：

package com.example.lt.toolbar;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Gravity;import android.view.MenuInflater;import android.view.View;import android.view.Menu;import android.view.MenuItem;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private FragmentManager mFm;    private DrawerLayout mDrawerLayout;    private Toolbar mToolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mFm = getSupportFragmentManager();        setContentView(R.layout.activity_main);        initToolbar();        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);        drawerToggle.syncState();        mDrawerLayout.setDrawerListener(drawerToggle);        initLeftMenu();        initContentView();    }    @NonNull    private void initToolbar() {        mToolbar = (Toolbar) findViewById(R.id.toolbar);        mToolbar.setLogo(R.mipmap.ic_launcher);        mToolbar.setTitle("主標題");        mToolbar.setSubtitle("副標題");        // 這個方法很重要，不能少，讓toolbar取代ActionBar        setSupportActionBar(mToolbar);    }    private void initContentView() {        Fragment fragment = new ContentFragment();        Bundle bundle = new Bundle();        bundle.putString("title","首頁");        fragment.setArguments(bundle);        mFm.beginTransaction().replace(R.id.fl_containor,fragment).commit();    }    private void initLeftMenu() {        ListView menuList = (ListView) findViewById(R.id.lv_menu);        menuList.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1                , new String[]{"首頁","新聞","個人中心"}));        menuList.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView parent, View view, int position, long id) {                Fragment fragment = new ContentFragment();                Bundle bundle = new Bundle();                bundle.putString("title", ((TextView) view).getText().toString());                fragment.setArguments(bundle);                mFm.beginTransaction().replace(R.id.fl_containor, fragment).commit();                mDrawerLayout.closeDrawer(Gravity.LEFT);            }        });    }    /**     * 必須重寫該方法建立菜單，不然菜單不會顯示在Toolbar中     * @param menu     * @return     */    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu_main,menu);        return true;    }}

運行效果示範：

這篇文章就介紹了Toolbar+DrawerLayout實現帶有動畫效果的常見的一種抽屜菜單，Toolbar更多詳細的的用法及樣式定製可以參考官方文檔，也可以參考下面這篇文章，我個人覺得介紹得比較詳細。