Material Design——Toolbar

Material Design
Material Design里面许多控件都可以设计出非常美观的UI效果Toolbar就是其中之一并且在许多APP上面都广泛应用
Toolbar
Toolbar和Actionbar非常的类似也可以说Toolbar是Actionbar的升级版。
首先在布局里面：
既然说Toolbar是Actionbar的升级版并且作用的范围都是在头部，所以要想Toolbar显示我们需要设置一下ActionBar
在styles.xml里面设置APP主题字面也可以理解：.NoActionBar

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

然后在activity_main.xml里面实现布局

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

    tools:context="com.example.administrator.toolbar.MainActivity">
    <FrameLayout
        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="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar>

    </FrameLayout>


</RelativeLayout>

里面有好多我们不常用 的知识点：
xmlns:android=”http://schemas.android.com/apk/res/android”：其实这个属性我们可以简单理解为它会指定一个空间只有它我们才能调用类似android:layout_width，android:id这些属性。
android:layout_height=”?attr/actionBarSize”：我们把我们自己定义的Toobar高设置和Actionbar的高一样大小
android:background=”?attr/colorPrimary”：同理这个就是引用Actionbar的背景颜色
此时只要在MainActivity里面：

   setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        //调用setSupportActionBar(toolbar)传入实例
        setSupportActionBar(toolbar);

其实到这里Toolbar的空能基本上就实现了只是我们没有给它具体 的操作我们也可以随意更改主题了：只需要在AndroidManifest.xml

    <activity android:name=".MainActivity"
    <!-- android:label便可以设置Toolbar显示的内容 -->
            android:label="GGG">

当然要想实现类似效果：

我们还需要在res——>New——>Directory 创建一个menu文件夹
具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/one"
        android:icon="@mipmap/ic_launcher"
        android:title="one"
        app:showAsAction="always"/>
    <item
        android:id="@+id/two"
        android:icon="@mipmap/ic_launcher"
        android:title="two"
        app:showAsAction="always"/>  <item
    android:id="@+id/three"
    android:icon="@mipmap/ic_launcher"
    android:title="three"
    app:showAsAction="never"/>


</menu>

对于 app:showAsAction:
如果是aways表示一定会在Toolbar上面显示
ifRoom表示如果有空间
never：省略成三个点点开才可以看见
到这里我们只要在MainActivity里面引入我们的Menu便可以做具体实用的操作了

package com.example.administrator.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
        private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
//重写onCreateOptionsMenu方法来加载我们引入的menu布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;

    }
//对点击上面每个标识进行具体的逻辑操作
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.one:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
            break;
            case R.id. two:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.three:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}