比菜鸟更进一步（1）：Style文件和toolbar的使用

比菜鸟更进一步（1）：Style文件和toolbar的使用

公告板
学习安卓开发已经很久了，并且自己也做了不少东西了，一直觉得网络上的教程杂乱无章并且非常难以入门，没有实战的快感，所以开始写一些博客，希望能从简单到复杂，真真切切地让无从下手的朋友们按部就班地最快捷地做出自己的手机应用。

首先是安卓开发中的Style使用。

如何使用style文件

江湖上有句传言：想用style，你得先知道style文件在哪。（欲练此功，xxxx）；

我实在不想告诉你：style.xml 文件位于 res/value/style.xml

在这个style文件里面可以定义各种你需要的颜色和样式，类似于CSS。
比如这样：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!-- toolbar（actionbar）颜色 -->
        <item name="colorPrimary">#558B2F</item>
        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">#33691E</item>
        <!-- 窗口的背景颜色 -->
        <item name="android:windowBackground">@color/background_material_light</item>
    </style>

</resources>

在style里定义的颜色应该如何使用?

style里定义的文件其实就是一个可以直接拿来用的属性了，具体使用是这样的：
看下面这个Toolbar文件里面的这一行：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimary"
    xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>

android:background=”?attr/colorPrimary”
这一行其实就是调用了style文件里的colorPrimary项所指定的颜色

Toolbar如何使用

首先来说，toolbar是Actionbar的升级版，要使用Toolbar的话首先要丢弃Actionbar,所以先选用一个NoActionBar的主题才是真的。比如在自己的Style.xml文件里面继承NoActionBar主题：

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

当你的主题没有actionbar之后，可以去新建一个Layout文件，在这个文件里面声明你的Toolbar：注意使用v7的包

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimary"
    xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>

之后就可以在任何Layout文件里随意include这个toolbar了：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingTop="6dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="16dp">
    <!-- 在这里可以include你的Toolbar，其实在别的地方也行 -->
    <include layout="@layout/toolbar"></include>

    <TextView
        android:id="@+id/drawerList_text"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="56dp"
        android:text="这个东西没有用，只是放在这里当教材。"
        />
</LinearLayout>

如何使Toolbar工作起来

当然了，仅仅在Layouyt里面引用一下是不够的，我们还需要使它工作起来，这很容易，只需要简单的设置，在你的Activity文件的onCreate方法里：

        mToolbar = (Toolbar) findViewById(R.id.toolbar);//获得实例
        mToolbar.setTitle("Miko");//设置标题
        setSupportActionBar(mToolbar);//把Toolbar当作ActionBar绑定

这样就可以了。当然Toolbar还有很多选项可以设置，这里我就不多说了，可以去官方网站上查一下。

在Toolbar上面添加一些图标

有一个条当然是不够的。除非你喝了周星星的毒药“我爱一条柴”。现在这个Toolbar似乎已经有样子了，但是看起来就TM像死机了一样，没有按钮有个毛用。所以需要添加一些按钮了。
添加按钮需要用到menu文件。
menu文件你可以自己创建一个。然后你就可以在里面尽情的添加图标和按钮了。就像这样：

<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_settings"
        android:title="@string/action_settings"
        android:orderInCategory="1" app:showAsAction="never" />
    <item 
        android:id="@+id/action_mails" 
        android:title="@string/action_emails"
        android:icon="@drawable/ic_action_email"     
        android:orderInCategory="1" app:showAsAction="always" />
</menu>

这里面有一些必须要说明的，id,title这些顾名思义。重要的是orderInCategory和app:showAsAction 这两个属性。
orderInCategory：是表示这个选项的重要程度，1为最重要，100为最不重要，当你的Toolbar上的空间不足以显示所有图标时，最不重要的图标会被优先隐藏。好拗口……
app:showAsAction ：表示是不是总是显示在Toolbar上面，可以总显示，也可以当空间足够时显示，或者永远不显示。

当你设计好你的menu文件以后，就可以在你的Activity文件里面设置它了。需要创建一个方法，是这个样子的：

    //不用考虑这么多，你可以照抄这些代码，因为这都是系统自动生成的。
    //inflate()里面的两个参数，第一个是你刚才设计的menu文件，第二个你就照这么写就行了，我们的
    //目的是迅速的使用，并不喜欢深究，如果你想搞的明白些，网上有很多文章写的非常清楚 ：）

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

好了，这样图标就显示到你的Toolbar上面了。

当你点击图标的时候，会发生什么？

图标设置好了不行，还得可以点击，不然这就成了一幅画，很傻缺的。具体操作你可以这样来：

public boolean onOptionsItemSelected(MenuItem item) {
        // 首先你要明白，这个方法也是系统自动生成的。如果没有，你可以自己重写它。
        //switch方法我相信不用多说，这毕竟是Java的基础了。
        // 你可以回头看看刚才我写的menu文件。
        int id = item.getItemId();
        switch (id){
            case R.id.action_mails://注意到这个id了吗？这个id是我刚才在我的menu文件里设置的
                //Toast这行代码可以在屏幕上显示一个小消息。这个以后再说，你现在可以尝试一下。
                Toast.makeText(this,"这里是显示邮件的",Toast.LENGTH_SHORT).show();                
                break;
            case R.id.action_settings://这个id也是
                Toast.makeText(this,"这里是显示设置的",Toast.LENGTH_SHORT).show();
                break;
            default:return super.onOptionsItemSelected(item);
        }

        return super.onOptionsItemSelected(item);
    }

好了，就是这样。然后运行它吧。