MaterialDesign-Toolbar(五)

Toolbar

Toolbar与actionbar最大的区别就是Toolbar更自由

1.添加依赖
compile 'com.android.support:appcompat-v7:25.0.+'
2.设置主题为noactionbar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--Toolbar颜色-->
    <item name="colorPrimary">@android:color/holo_blue_bright</item>
    <!--状态栏颜色-->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--窗口背景颜色-->
    <item name="android:windowBackground">@android:color/holo_purple</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!--搜索图标-->
    <item name="android:searchViewStyle">@style/MySearchView</item>
</style>
<style name="MySearchView" parent="Widget.AppCompat.SearchView"/>
3.在xml布局中创建Toolbar控件
    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:background="?android:colorPrimary"  //设置背景颜色
    app:theme="@style/ToolbarTheme"//注意上一行就变为无效了
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    //在style中创建单独的主题
</android.support.v7.widget.Toolbar>
    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--为toolbar设置单独的主题-->
</style>
4.在代码中将其设置为ActionBar
    Toolbar toorbar = (Toolbar) findViewById(R.id.toolbar);
    toorbar.setTitle("hello world");
    toorbar.setSubtitle("你好师姐");
    toorbar.setLogo(R.mipmap.ic_launcher);
    setSupportActionBar(toorbar);

自定义Toolbar上面的布局

到这一步,toolbar的样式基本展现,但并没有通常我们看到的右上角的三个点以及搜索框

1.创建res/memu/toolbar_layout.xml
<?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"
  android:id="@+id/action_bar_menu"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
>

<item
    android:id="@+id/search"
    android:icon="@drawable/time1"
    android:title="search"
    //ifroom如有控件则显示 always总是 collapseActionView折叠
    app:showAsAction="ifRoom"/>

<item
    android:id="@+id/copy"
    android:icon="@drawable/time2"
    android:title="copy"
    app:showAsAction="ifRoom"
    />

<item
    android:id="@+id/cut"
    android:title="cut"
    app:showAsAction="never"/>

</menu>
2.复写onCreateOptionsMenu(Menu menu)
@Override
public boolean onCreateOptionsMenu(Menu menu){
    //获取inflater
    MenuInflater menuInflater = getMenuInflater();
    //布局代码化,通过这一步,布局将展示在toolbar上
    menuInflater.inflate(R.menu.toolbar_menu, menu);

    MenuItem item = menu.findItem(R.id.search);
    //折叠后显示的标题
    item.setTitle("你瞅啥");
    //设置点击事件监听
    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            Toast.makeText(getApplicationContext(),""+item.getTitle(),Toast.LENGTH_SHORT).show();
            return true;
        }
    });
    MenuItem item2 = menu.findItem(R.id.copy);
    item2.setTitle("瞅你乍滴");

    return super.onCreateOptionsMenu(menu);
}

DrawerLayout的使用

<!--官方说明,最好设置为根布局,否则有可能出现滑动事件冲突-->
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--屏幕主页面-->
    <LinearLayout
        android:background="#888888"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </LinearLayout>
    <!--侧滑页面,必须设置layout_gravitiy属性-->
    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/ll_cehua"
        android:background="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        >
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

Toolbar和Drawerlayout的联合使用

    //设置左上角的图标是否可以点击
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    //创建一个toggle对象,就是左上角那三条杠
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toorbar, R.string.app_name, R.string.app_name);
    //设置侧滑菜单打开时,同步改变图标
    toggle.syncState();
    drawer.setDrawerListener(toggle);