【android】ToolBar与弹出侧边栏布局和SnackBar&&CoordinatorLayout

一:替换ToolBar

一.ToolBar基础替换

1. 先将主题中的ActionBar改为Light.NoActionBar
2. 修改main.xml文件
   1）将ToolBar的高度设置为原ActionBar
   2）指定背景色
   3）由于设置了淡色系主题，ToolBar上的元素会使用深色主题以区分主体，原本白色会变黑色，比较压抑，所以指定单独深色ToolBar，上面的字会继承原Light白色
   4）设置弹出的菜单项为Light

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    />

3. 这里我们发现左上角就是项目名称，来到清单文件修改label即可

二.ToolBar结合引入菜单

1. res文件夹下创建menu文件夹，创建toolbar.xml的menu resourse file
2. menu中加入app的资源地址，方便兼容，其中item组
3. showasAction
   1）always: 永远显示在ToolBar中
   2）ifRoom：空间够在toolbar不够在菜单中
   3）never: 永远显示在菜单中
   ps：toolbar中item只显图标，菜单中action只显文字

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/backup"
        android:icon="@mipmap/arrow_up"
        android:title="BackUP"
        app:showAsAction="always"/>
    <item
            android:id="@+id/delete"
            android:icon="@mipmap/delete"
            android:title="Delete"
            app:showAsAction="ifRoom"/>
    <item
            android:id="@+id/setting"
            android:icon="@mipmap/setting"
            android:title="Settings"
            app:showAsAction="never"/>
</menu>

4. 来着MainActivity中复写创建菜单的方法和点击方法即可

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this,"BackUP",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"Delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this,"Setting",Toast.LENGTH_SHORT).show();
                break;

        }
        return true;
    }

二.弹出侧边栏

1. DrawerLayout

1. 借助Google提供的DrawerLayout，实心滑动菜单这个布局可以放入两个直接子控件，第一个是主屏幕中的内容，第二个是滑动菜单中显示的内容
2. 修改main.xml第一个Fragment子控件 为主界面，第二个text

<androidx.drawerlayout.widget.DrawerLayout 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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:text="This Is Side"
            android:textSize="30sp"
            android:background="#FFF"/>
</androidx.drawerlayout.widget.DrawerLayout>

第二个子布局Layout_gravity=“start” 必须要指定，start表示是按照系统的左右设置弹出菜单的，貌似也可以设置left等等，不设置只显示第二个子项

**3、**右侧主页涉及ui操作的话，偏移会恢复原来位置，包括dialog。

二.加入导航按钮

1. oncreate方法中取得drawlay对象
2. 拿到对应Actionbar实例(由ToolBar实现的)【getSupportAsUpEnabled(true)】
3. 让导航按钮显示出来【 actionBar.setDisplayHomeAsUpEnabled(true)】设置图标【setHomeAsUpIndicator()】
4. Toolba菜单项设置点击，id永远是是home，选中控制切换即可【 mDrawerLayout.openDrawer(GravityCompat.START)】
5. 点开只有一个text有点丑。。。不过没事 ，接下来用到的NavigationViw可以解决这个问题

三.NavigationView

一. 导包

1. Design库
   implementation ‘com.android.support:design:24.2.1’
2. 圆形化图片开源项目
   implementation ‘de.hdodenhof:circleimageview:2.1.0’

二. 在写之前还需要准备两个东西

1. menu用来在NaviagtionView中显示具体的菜单项
   1）建立nav_menu后指定单选菜单项 <group android:checkableBehavior="single">
   2)接着是item项

2. headLayout用来在其中显示头部布局的 ，新建一个RelativeLayout，限定高度，设置圆形图片居中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="180dp"
              android:padding="10dp"
              android:background="?attr/colorPrimary">
    <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/icon_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/rolling"
            android:layout_centerInParent="true" />
    <TextView
            android:id="@+id/mail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="2685872xxx@gmail.com"
            android:textColor="#FFF"
            android:textSize="14sp" />
    <TextView
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/mail"
            android:text="风凌"
            android:textColor="#FFF"
            android:textSize="14sp" />
</RelativeLayout>

3. 通过app方法添加两个子布局，大标题二中的text改为NavigationView，app兼容引入即可

  <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/nav_menu"
            app:headerLayout="@layout/nav_header"/>

四.悬浮可交互按钮

一. FloatingActionButton

1. Design Support库中提供的一个控件，可以轻松的实现悬浮按钮效果。
2. 在DrawableLayout第一主布局中ToolBar后加入该按钮，自带阴影效果，也可以自带指定app:elevation=“8dp”
3. MainActivity可以设置点击监听

     <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="16dp"
                android:src="@mipmap/play"/>

4. 设置点击事件，和普通按钮一样，设置个click监听就好了

二.Snackbar

1. 在监听事件中可以弹出小的个选框提示Snackbar
2. 下面是示例代码，有点套娃，点击悬浮按钮，弹出Snack信息:开始播放，点击信息中的undo，显示取消播放
3. 但是这个时候我们发现原本的浮动按钮被挡住了，emmm有点尴尬，这里就可以使用CoordinatorLayout【类加强版FragmentLayout】

FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "开始播放", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "取消播放",
                                        Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });

三.CoordinatorLayout

1. CoordinatorLayout可监听所有子控件【通过子控件传入的View】的各种事件，然后帮助我们做最合理的响应，我们用这个替换Fragment，就行了
2. 由于Drawable的第二个子布局和CoordinatorLayout没多大关系，所以布局任然不会移动，相到移动方案再补充。