MD设计之Toolbar

Material Design简介

MD（原质化设计）是Google推出的一套界面设计风格。该设计风格追求遵循优秀设计的经典定则，通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。

为了统一Android的设计风格，Google也是用心良苦。不夸张的说，这个设计风格真的很美，去处了现实的杂质感，保留了其特有的简洁与唯美，个人觉得绝对不差于ios的扁平化设计风格。

想全面了解该风格的可参考极客学院的中文版(译文)Material Design
Material Design专用在线配色工具：Materialpalette

MD的三种主题

如果你的项目最低支持5.0，那么可以这样设置Theme

@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar

否则，为了保证兼容，则需要在Compat Theme中设置如下Theme

Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar

ToolBar

Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

1）引入兼容包

compile 'com.android.support:design:23.3.0'

support：design包含了诸多新控件，其中就有Toolbar，想要了解该兼容库的详细内容请保持关注或自行百度。

2）隐藏ActionBar

在前面的style文件中，有两句话想必你应该注意到了

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

对，这样设定主题就实现了ActionBar的隐藏（一般用于普通的主题），对于官方提供的带有NoActionBar的主题则毋须设置例如：Theme.AppCompat.Light.NoActionBar，Theme.AppCompat.NoActionBar等等。

接下来给出一个简单的示例：
values/styles（全局styles）

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

values-v21/styles（API21 styles）

<resources >
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

        <!--使布局延伸到状态栏-->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>

        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

上面两个styles的关系一定要分清（完全独立，各行其道）。不清楚请留言提问，

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:orientation="vertical"
              android:layout_height="match_parent"
              android:gravity="center_horizontal">

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


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="账号："
        android:id="@+id/textView"
        android:layout_marginTop="20dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密码："
        android:id="@+id/textView2"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText2"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color Accent"
        android:id="@+id/checkBox"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录"
        android:id="@+id/button"/>

</LinearLayout>

注意：toolbar同样支持在xml中定义各个参数，但必须记得引入
xmlns:app="http://schemas.android.com/apk/res-auto"，这样设置toolbar的文字，icon，等参数才会生效。

menu_settings

<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/action_community"
          android:title="@string/action_community"
          android:orderInCategory="80"
          app:showAsAction="never"/>
    <item android:id="@+id/action_edit"
          android:title="@string/action_edit"
          android:orderInCategory="100"
          android:icon="@drawable/edit"/>
    <item android:id="@+id/action_share"
          android:title="@string/action_share"
          android:orderInCategory="100"
          android:icon="@drawable/share"
          app:showAsAction="always"/>
    <item android:id="@+id/action_scan"
          android:title="@string/action_scan"
          android:orderInCategory="99"
          android:icon="@drawable/scan"/>
    <item android:id="@+id/action_support"
          android:title="@string/action_support"
          android:orderInCategory="101"
          android:icon="@drawable/support"
          app:showAsAction="ifRoom"/>
</menu>

app:showAsAction属性用于设置Item的显示，主要有always,ifRoom等，可自行测试

MainActivity代码
已经实现了toolbar的监听事件

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // App Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle("My Title");
        // Sub Title
        toolbar.setSubtitle("Sub title");

        setSupportActionBar(toolbar);
        //setNavigationIcon必须设置setSupportActionBar后才会生效，否则会显示一个back按钮。
        toolbar.setNavigationIcon(R.drawable.back);

        toolbar.setOnMenuItemClickListener(menuItemListener);

    }

    private Toolbar.OnMenuItemClickListener menuItemListener = new
            Toolbar.OnMenuItemClickListener(){

                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    String str = "clicked ";
                    switch (menuItem.getItemId()){
                        case R.id.action_community:
                            str+="community";break;
                        case R.id.action_edit:
                            str+="edit";break;
                        case R.id.action_share:
                            str+="share";break;
                        case R.id.action_scan:
                            str+="share";break;
                        case R.id.action_support:
                            str+="share";break;
                        default:
                            break;
                    }
                    Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
                    return false;
                }
            };
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_setting, menu);
        return true;
    }

}

效果图：

好吧，这次主要讲解了Toolbar的实现，接下来逐渐分析MD兼容库的所有新增控件。
github源码地址：ToolBarDemo