Material Design样式及ToolBar使用初探 - 快车库

写在最前面：需要申明material design是一种设计风格，而不是某一种确定的样式或者控件。

Google I/O(2014)发布了material design，按照这架势，要风靡设计界成为一个规范。那么，我们如何在android的开发设计中使用这种设计风格？

首先，android的material支持最低版本为5.0，官方为了支持更低版本发布了一个低版本支持包。如果我们使用android studio的话可以直接compile 'com.android.support:design:22.+'

1、在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>

2、在AndroidManifest.xml中应用上面的AppTheme ，material风格就配置好了。炒鸡简单吧。

3、在你需要的地方应用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" />

4、在使用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的后面

5、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;
}

6、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，效果如下：