Android UI ：Try of Toolbar

        这几天刚刚接触到Android开发，当然也是因为公司的需要，作为一个developer，肯定希望自己的应用能够美观，不然看着自己都头痛，更何况别人呢，所以从今天开始我要开始记下我的心得，好记性不如烂笔头嘛，而且自己写的东西也比较适合自己解决问题，也希望对小伙伴们有所帮助，废话不多说，来看看我第一个要记下的Object是谁，hiahia，就是大家所熟悉的Toolbar了，它的一个优点是本身就是一个ViewGroup，所以它所包含的东西可以DIY啦。不信你看下图：

     

也许你发现了，它是android.support.v7.widget的Toolbar，所以在你的build.gradle配置文件中加入

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

  我们先来简单的认识一下这个Toolbar，作为MD（material design）的一个ViewGroup，看看包含了哪些东西（更多具体的请自己去官网看，我这里指说我平常用得到的）

好了，我们看到了Toolbar的一些经常用得到的区域或者属性（这张图片也是用的别人文章里面的），所代表的东西大家也都能一目了然，首先来看看我做出来的效果

那么是怎么实现的呢，首先我的这个Toolbar是嵌套在DrawerLayout之中的，关于DrawerLayout我下一篇文章再讲。

我们来看看整个的布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    android:id="@+id/mydrawer"    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:fitsSystemWindows="true"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.lht.test.MainActivity"    android:layout_gravity="start"    >    <android.support.design.widget.CoordinatorLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="#f6f4f4">           <android.support.design.widget.AppBarLayout               android:layout_width="match_parent"               android:layout_height="wrap_content">               <include android:id="@+id/mtoolbar" layout="@layout/toolbar"/>           </android.support.design.widget.AppBarLayout>           <include layout="@layout/content_main"/>    </android.support.design.widget.CoordinatorLayout>           <include  layout="@layout/common_drawer"/></android.support.v4.widget.DrawerLayout>

这里提到了本文没有提到的布局，CoodinatorLayout、AppBarLayout、DrawerLayout，这些在后面都会一一讲解，本文重点讲Toolbar。

大家看到了Toolbar被包含在AppBarLayout之中，布局文件为toolbar.xml，好，我们来看看它的布局文件

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    xmlns:toolbar="http://schemas.android.com/apk/res-auto"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    toolbar:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"    toolbar:titleMarginStart="80dp"    android:background="#FF4081"    toolbar:title="ToolbarDemo"    toolbar:theme="@style/ToolbarTheme"    toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"    ></android.support.v7.widget.Toolbar>

这里要重点说一下，设置Toolbar的一些属性必须要添加

xmlns:toolbar="http://schemas.android.com/apk/res-auto"

然后看看这个布局文件有什么，首先添加了一个Toolbar，设置了标题，背景，主题，以及菜单的主题popupTheme，主题文件实在res/values/styles.xml中进行创建，整体效果在上面的图片中能看出来，其他的一些属性大家也都能看出代表什么，接下来看看我的style.xml文件

所设置的颜色在左边也能看到，之前我要把左上角的按钮的颜色改为白色，但是又不用白色的按钮去替换，在网上找了好多文章，都是说什么深色主题和浅色主题的，到最后根本没有解决我的问题，也许是我智商有限，最后找到了一篇文章的解决办法是在Toolbar引用的主题设置中添加如下代码

<item name="android:colorControlNormal">#FFFFFF</item>

中间为你想设置的颜色值，想让按钮为什么颜色就是什么颜色，这也是我搞了好久都没搞好的，是不是体会到了Toolbar所带来的DIY的乐趣，不仅可以设置颜色，还可以设置菜单的弹出动作，大家可以去网上查看，有很多文章，接下来为Toolbar添加菜单，就是实现以下的效果

这张图是别人的，我手机没电了。。。。不能截图给大家看了。。。。

添加菜单的第一步就是要创建菜单，在res/menu目录下进行创建，下面是我创建的菜单mymenu.xml（不懂得赶紧去学一下）

<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="com.melo.blog.wigetdemo.MainActivity">    <item        android:id="@+id/action_settings"        android:orderInCategory="1"        android:title="menu0"        app:showAsAction="never"       />    <item        android:id="@+id/action_about"        android:orderInCategory="2"        android:title="menu1"        app:showAsAction="never" />    <item        android:id="@+id/action_share"        android:orderInCategory="3"        android:title="menu"        app:showAsAction="never"/>    <item        android:id="@+id/action_like"        android:orderInCategory="4"        android:title="menu"        app:showAsAction="never" />    <item        android:id="@+id/action_collect"        android:orderInCategory="5"        android:title="menu"        app:showAsAction="never" /></menu>

其中showAsAction有几个值：

never：只在菜单弹出的时候显示

isRoom：如果Toolbar有足够的空间就直接显示在Toolbar上面，如果没有就显示在弹出的菜单列表中

最后填充menu,在activity中对点击事件可以进行监听,代码如下：

import android.os.Bundle;import android.os.PersistableBundle;import android.support.annotation.Nullable;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {     DrawerLayout drawerlayout;    Toolbar  toolbar;    ActionBarDrawerToggle mToggle ;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);         initView();         initListener();    }    @Override    public void onPostCreate(Bundle savedInstanceState, PersistableBundle persistentState) {        super.onPostCreate(savedInstanceState, persistentState);    }    private void initView() {        setContentView(R.layout.activity_main);        toolbar = (Toolbar) findViewById(R.id.mtoolbar);        setSupportActionBar(toolbar);        drawerlayout=(DrawerLayout)findViewById(R.id.mydrawer);        mToggle = new ActionBarDrawerToggle                (this,drawerlayout,toolbar, R.string.open,R.string.close);        drawerlayout.addDrawerListener(mToggle);    }    private void initListener() {        toolbar.setOnMenuItemClickListener(this);    }    @Override    public boolean onMenuItemClick(MenuItem item) {        int id = item.getItemId();        switch (id) {            case R.id.action_settings:                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();                break;            case R.id.action_about:                Toast.makeText(this, "action_about", Toast.LENGTH_SHORT).show();                break;            case R.id.action_collect:                Toast.makeText(this, "action_collect", Toast.LENGTH_SHORT).show();                break;            case R.id.action_like:                Toast.makeText(this, "action_like", Toast.LENGTH_SHORT).show();                break;            case R.id.action_share:                Toast.makeText(this, "action_share", Toast.LENGTH_SHORT).show();                break;        }        return false;    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        MenuInflater inflater = getMenuInflater();        inflater.inflate(R.menu.mymenu,menu);        return super.onCreateOptionsMenu(menu);    }}

如果有什么问题请留言，阿里嘎多~~~