Android之toolbar的使用

Android在5.0的时候已经淘汰了ActionBar，取而代之的是叫做toolbar的东西，toolbar类似于一个控件，放在layout文件中，可以在layout文件中直接添加属性，也可以在代码findviewbyid之后设置属性，并且可以在toolbar的XML文件中添加别的TextView或者ImageView等控件，使用非常的灵活，可以说和一个布局文件没什么区别，为了兼容低版本的机型，现已加入V7兼容包，使用Toolbar必须要去掉ActionBar，不然会造成Toolbar在ActionBar的下面，然后使用setsupportActionBar(toolBar),ok，下面就来动手操作吧~~~~·

前期准备：

1、去掉ActionBar

2、在style文件中给Toolbar设置背景色

去掉ActionBar：在values文件夹中的style.xml文件中，设置主题为：Theme.AppCompat.Light.NoActionBar.

Toolbar设置颜色：在values文件夹中的style.xml文件中，添加item，来看看toolbar的布局分类

item中name表示的意思：

android:colorPrimary：给ActionBar设置颜色，如果要给toolbar设置颜色需要到layout文件中设置background属性。

android:colorPrimaryDark：给状态栏设置颜色。

android:textColorPrimary：toolbar中字体颜色。

colorAccent：toolbar中如果有可以选择的控件，比如radiobutton等，设置选择后的颜色。

准备工作完成后就是正式的使用了，先在Activity的布局文件中定义toolbar：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:background="#987"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

在代码中：

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

    }

style文件：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
       <item name="android:textColorPrimary">#f00</item>

    </style>

</resources>

完成这些之后看下效果：

是不是有点丑呢？？界面也够简单的，没关系，反正效果是出来了，下面我们就来对其进行美化。美化后的效果：

额，还是有点丑~~~~~，图片资源难找，凑合着看吧~~~~~~~~~~，加了一个Navigation和一个title还有一个menu，还记得ActionBar上面有个Menu创建方法和点击事件处理方法吗？？没错，它们也可以用在toolbar上面，不需要任何改动，请看：

//创建Menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }
//menu项的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_LONG).show();
                return true;
            case R.id.action_settings:
                Toast.makeText(MainActivity.this, "action_settings", Toast.LENGTH_LONG).show();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

另外toolbar也新设置了一个方法取代上面的点击处理方法：

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                Toast.makeText(MainActivity.this,"home",Toast.LENGTH_LONG).show();
                return true;
            case R.id.action_settings:
                Toast.makeText(MainActivity.this,"action_settings",Toast.LENGTH_LONG).show();
                return true;
        }
        return false;
    }
});

注：我使用这个方法的时候碰到一个问题就是第一个case没有执行，不知道为什么~~~~~~~·

总结：

其实toolbar总共分为4个部分：，第一个为导航图片，和ActionBar是一样的，第二个是一个Logo图标，第三个地方用来防止标题(可以同时放置一个主标题和一个副标题)，第四部分就是menu的显示区域了，和actionBar是一样的。

感觉toolbar和actionbar的使用基本是一样的，除了比较灵活一点外，什么？？？你还没感觉到那里比较灵活？？？下面我来演示一个例子，将第三个部分显示title的地方用一个TextView来显示标题，哈哈这个actionbar做不到吧，下面来看怎么弄，先来到layout布局文件中找到toolbar控件的定义，修改为下面这种形式：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1c8049"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:text="TextView现实的标题" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

看效果图：

扫描关注我的微信公众号：

我这里只是给大家抛砖引玉，只要大家把toolbar当做一个控件来使用，我想你们一定会做出非常精美的toolbar出来~~~~~ok，就说到里吧，呼呼~每天写博客好累~~~~~~~~~·最后附上Demo：demo下载