ToolBar详解

ToolBar详解

自从参加了某比赛之后，对Android开发似乎失去了兴趣，东学学西学学但都停留在一些很表面的东西上面。思考了很久，到底对什么东西感兴趣之后，最终还是回到了android上，废话不多说，开始toolbar的学习。
开始的时候遇到了很多的坑，大概用了一天？才勉强解决了问题

---

Toolbar与Actionbar冲突

在Android3.0的时候谷歌推出了Actionbar的设计，如今在material design的推动下定义了一个新的名称 app bar 由Toolbar实现
因此！我们首先要在style中取消app的Actionbar

• 首先在res/values/style.xml中修改

 <resources>
        <!-- Base application theme. -->
            <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
            </style>
</resources>

• 为toolbar创建一个toobar.xml文件方便后续多个布局的引入，这里要使用v7.widget.Toolbar兼容较低版本的系统

    <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/maincolor"
    android:elevation="4dp">
    </android.support.v7.widget.Toolbar>

• 然后在layout_main.xml中引入toolbar

  注意！注意！include标签必须放在LinearLayout或者RelativeLayout中，我之前配合DrawerLayout使用直接导致toobar全屏显示,如图

  

• 正确的代码如下：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>
    <include layout="@layout/drawer_layout"/>
</android.support.v4.widget.DrawerLayout>

Toolbar手动添加按钮与setting

1. 在res/menu下新建一个menu_main.xml用来描述各个item
2. 在activity中使用MenuInflater载入布局文件
3. 设置对按钮的监听以及后续的逻辑处理

• menu_main.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=".MainActivity">
    <!--showAsAction="never"会把内容折叠，"ifRoom"会在有空间时显示出来showAsAction的命名空间为app!切记!-->
    <item android:id="@+id/action_edit"
        android:title="edit"
        android:orderInCategory="80"
        android:icon="@drawable/ab_edit"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_share"
        android:title="share"
        android:orderInCategory="90"
        android:icon="@drawable/ab_share"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_setting"
        android:title="setting"
        android:orderInCategory="100"
        app:showAsAction="never" />
</menu>

• activity中的menu载入部分重载父类的onCreateOptionsMenu

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main,menu);
        return super.onCreateOptionsMenu(menu);
 }

• 设置toolbar、启动、并且设置按钮监听

    toolbar.setTitle("我的天气");//设置标题
    setSupportActionBar(toolbar);//调用actionbar的方法
    /*监听动作必须要在setSupportActionBar之后*/
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            String msg = "";
            switch (item.getItemId()){
                case R.id.action_edit:
                    msg+="edit";
                    break;
                case R.id.action_setting:
                    msg+="setting";
                    break;
                case R.id.action_share:
                    msg+="share";
                    break;
                default:
                    break;
            }
            if(!msg.equals(""))
                Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
            return true;
        }
    });

• 最终放上效果图如下