Material Design樣式及ToolBar使用初探

寫在最前面：須要申明material design是一種設計風格，而不是某一種肯定的樣式或者控件。

Google I/O(2014)發佈了material design，按照這架勢，要風靡設計界成爲一個規範。那麼，咱們如何在android的開發設計中使用這種設計風格？

首先，android的material支持最低版本爲5.0，官方爲了支持更低版本發佈了一個低版本支持包。若是咱們使用android studio的話能夠直接compile 'com.android.support:design:22.+'

一、在style文件中添加Theme風格, 讓其成爲material風格

<!-- Base application theme.material design style -->
<style name="AppTheme" parent="AppTheme.Base">
    <item name="windowActionModeOverlay">true</item>
    <item name="actionModeBackground">@color/primary</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <!-- Actionbar color -->
    <item name="colorPrimary">@color/primary</item>
    <!--Status bar color-->
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <!--Window background color-->
    <item name="android:windowBackground">@color/primary_light</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

二、在AndroidManifest.xml中應用上面的AppTheme ，material風格就配置好了。炒雞簡單吧。

三、在你須要的地方應用toolbar。爲了低版本支持，要使用v7包中的Toolbar。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    android:minHeight="?attr/actionBarSize" />

四、在使用toolbar的activity（需繼承AppCompatActivity）中設置toolbar的樣式，固然也能夠在xml中設置

toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle("標題");
toolbar.setTitleTextColor(getResources().getColor(R.color.white));//標題顏色
toolbar.setSubtitle("副標題");
toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));//副標題顏色
toolbar.setLogo(R.drawable.ic_launcher);//logo
toolbar.setNavigationIcon(R.drawable.ic_slidehead);//導航圖標
setSupportActionBar(toolbar);//toolbar支持
toolbar.setOnMenuItemClickListener(this);//menu的點擊事件，這句話要寫在setSupportActionBar的後面

五、toolbar右側的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=".MainActivity">
    <item
        android:id="@+id/titlebar_search"
        android:icon="@drawable/ic_search"
        android:orderInCategory="1"
        android:title="search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/titlebar_collect"
        android:icon="@drawable/ic_collect"
        android:orderInCategory="1"
        android:title="collect"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/titlebar_setting"
        android:icon="@drawable/ic_more"
        android:orderInCategory="1"
        android:title="setting"
        app:showAsAction="ifRoom" />
</menu>

其中android:orderInCategory設置menu的優先級，數字越小優先級越高。優先級低的圖標在toolbar中menu圖標放不下時，自動摺疊到最右側的圖標下。 app:showAsAction設置menu的顯示模式，共有5個選擇，可自行嘗試。

在activity中，添加顯示menu菜單：下面這一段代碼是必須的，否則meun菜單不會顯示：

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

而後咱們來設置menu 的點擊事件。如4中所寫，添加事件，生成方法：

toolbar.setOnMenuItemClickListener(this);//menu的點擊事件

@Override
public boolean onMenuItemClick(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.titlebar_search:
            //TODO 搜索
            break;
        case R.id.titlebar_collect:
            //TODO 收藏
            break;
        case R.id.titlebar_setting:
            //TODO 設置
            break;
    }
    return true;
}

六、toolbar上圖標的變更切換：這個不是搞得太懂，我試了兩種方式來實現一個點擊搜索按鈕切換toolbar圖標的方式

• 方法一：在onMenuItemClick的點擊事件中添加item.setActionView(search_bar);只切換單個的menu：

//界面初始化
search_bar = LayoutInflater.from(MainActivity.this).inflate(R.layout.main_actionmode, null);
search_edit = (EditText) search_bar.findViewById(R.id.actionmode_edittext);
search_bar.findViewById(R.id.actionmode_search).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (!"".equals(search_edit.getText().toString().trim())) {
            //TODO 進行搜索
            Snackbar.make(search_bar, search_edit.getText().toString().trim(), Snackbar.LENGTH_LONG).show();
        }
        if (menuItem != null) menuItem.setActionView(null);
        menuItem = null;
        search_edit.setText("");
    }
});

...

private MenuItem menuItem;

...

//在onMenuItemClick中
item.setActionView(search_bar);
menuItem = item;//標記當前點擊的menu

點擊搜索按鈕如圖，你能夠看到右側的兩個按鈕被摺疊了。再次點擊恢復。

• 方法二： 經過actionMode來添加點擊事件等。須要style中樣式支持。見1。切換整個toolbar的圖標樣式。
  在menu點擊的地方添加actionMode：

toolbar.startActionMode(new ActionMode.Callback() {
    @Override
    public boolean onCreateActionMode(ActionMode mode, Menu menu) {
        mode.getMenuInflater().inflate(R.menu.menu_main2, menu);//引入新的menu
        return true;
    }
    @Override
    public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
        //切換以前的操做
        return false;
    }
    @Override
    public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
        mode.finish();//中止actionMode
        return true;
    }
    @Override
    public void onDestroyActionMode(ActionMode mode) {
        //中止actionMode以後
    }
});

點擊搜索按鈕加入actionMode，效果以下：