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下载