android MD新控件之toolbar

嘛，作为一个程序员，想写博客已经很久了，由于种种原因（懒），一直拖延至今，第一篇博客，就从简单的写起好了（难的不会），谷歌的MD已经推出很久了，那就从MD推出的一系列新控件写起吧，首先就是最常用的Toolbar。

注要使用toolbar首先需要在build.gradle中引入v7包

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

Toolbar

我知道很多小伙伴都喜欢自己写一个titlebar，不过身为一个懒惰的程序员，有写好的为啥还要用自己的呢，何况还是google官方推出的，质量有保证。让我们来从头了解toolbar的用法吧

1.使用方法

要使用toolbar，首先需要在styles.xml中指定一个不带ActionBar的主题，系统默认如下

Theme.AppCompat.Light.DarkActionBar

我们需要修改为

Theme.AppCompat.Light.NoActionBar

在这之后我们才能愉快的使用toolbar

为了使用toolbar，我们需要在布局文件中添加Toolbar,代码如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="worrier.mddemo.android.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</RelativeLayout>

然后在对应的activity中作如下处理

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

通过setSupportActionBar（）将toolbar设为Activity的导航栏，效果如下

2.设置toolbar样式

那么要设置toolbar的样式，则需要在style中设置，代码如下：

        <!--导航栏底色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--状态栏底色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">@android:color/white</item>
        <!--按钮选中或者点击获得焦点后的颜色-->
        <item name="colorAccent">@color/colorAccent</item>

那么要在toolbar使用这些属性，则需要如下所示

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

只需要添加一句android:background=”?attr/colorPrimary”就可以了

那么toolbar有哪些方便的功能呢， Title（主标题），Subtitle（副标题），Logo（logo图标）NavigationIcon（导航按钮）我们都可以很方便的设置，代码如下

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("主标题");
        toolbar.setSubtitle("副标题");
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setNavigationIcon(android.R.drawable.ic_input_delete);
        setSupportActionBar(toolbar);

注意，如果要设置Title，则需要将setSupportActionBar(toolbar)写在最后，否则你会发现并没有什么卵用，当然，我们可以通过AndroidManifest.xml设置title，toolbar默认显示的是application的label对应的文字，如果我们需要每个activity都有不同的title的话，可以在activity标签下添加label属性。

除了上面这些用法外，我们还可以在toolbar上添加menu，而不需要自己写popupwindow，非常的方便,使用的方法也很简单，首先在res目录下新建文件夹menu,然后创建toolbar需要用到的xml文件，xml文件中的代码如下:

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

    <item
        android:id="@+id/backup"
        android:icon="@android:drawable/arrow_down_float"
        android:title="backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@android:drawable/ic_menu_set_as"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/setting"
        android:icon="@android:drawable/ic_menu_set_as"
        android:title="Setting"
        app:showAsAction="never"/>
</menu>

这里我们可以注意到item下有个属性showAsAction，这里的意思是，如果为never则改按钮永远只能通过toolbar最右边的菜单按钮来展开菜单,ifRoom则是指如果屏幕如果能够装得下则显示在toolbar上，反正则显示在展开菜单中，always则表示始终显示在toolbar上，如何将xml文件中的数据添加到toolbar中呢，代码如下：

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

如何为menu的各个item添加点击事件呢，需要在activity实现onOptionsItemSelected方法，代码如下:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this, "Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this, "Setting", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

最后还有一个问题就是，我知道很多很对UI设计出来的界面标题都是居中的，虽然我们内心都是希望遵从MD设计（懒）,将标题放在左边，但是toolbar本身并不支持设置title的位置,这时候应该怎么办呢，我们查看Toolbar的源码可以发现，Toolbar继承自ViewGroup，也就是说他本身是个容器，所以我们可以在toolbar中方置我们喜欢的控件到指定的位置，如：

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

        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:layout_gravity="center"
           android:text="标题"
           android:textSize="18sp" />
</android.support.v7.widget.Toolbar>

效果如图所示

恩，再也不怕美工找我们麻烦了