Material Design-Toolbar、DrawerLayout和NavigationView

主题

使用Toolbar代替ActionBar，通常有两种主题

• Theme.AppCompat.Light.NoActionBar深色主题

会将界面的主体颜色设为深色，陪衬色设为淡色

• Theme.AppCompat.NoActionBar淡色主题

会将界面的主体颜色设为淡色，陪衬色设为深色

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/purple_500</item>
  <item name="colorPrimaryDark">@color/purple_700</item>
  <item name="colorAccent">@color/white</item>
</style>

可以重写颜色属性，改变对应的颜色

Toolbar

• xml

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

• android:theme=“@style/ThemeOverlay.AppCompat.Dark.ActionBar”

设置toolbar的主题，因为当前是淡色主题，所以主题颜色是淡色，陪衬色是深色，所以toolbar上的文字是深色，为了让文字变成淡色，需要把toolbar的主题设为深色。

• app:popupTheme=“@style/ThemeOverlay.AppCompat.Light”

如果把toolbar的主题设为深色，则toolbar上的菜单栏的颜色是深色，如果将菜单栏的主题设为浅色，需要设置popupTheme，将弹出的主题设为淡色

• java

val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
  
  
//设置菜单
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_toolbar,menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return super.onOptionsItemSelected(item)
    }

• 设置toolbar返回按钮

setSupportActionBar(toolbar)
supportActionBar?.let {
  it.setDisplayHomeAsUpEnabled(true)
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
  when(item.itemId){
    android.R.id.home->{
      finish()
    }
  }
  return true
}

或

toolbar.setNavigationOnClickListener {
  finish()
}

DrawerLayout

<androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </FrameLayout>


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#fff"
            android:text="DrawerLayout"
            android:textSize="30sp" />
    </androidx.drawerlayout.widget.DrawerLayout>

<!-- 侧滑面板需要指定layout_gravity属性 -->

代码中关联toolbar

val toolbar = findViewById<Toolbar>(R.id.toolbar)
drawerLayout = findViewById<DrawerLayout>(R.id.drawerlayout)
setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)

//DrawerLayout关联toolbar,旋转按钮
val drawerToggle = object :ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0){
  override fun onDrawerOpened(drawerView: View) {
    super.onDrawerOpened(drawerView)
    println("开启")
  }

  override fun onDrawerClosed(drawerView: View) {
    super.onDrawerClosed(drawerView)
    println("关闭")
  }
}
drawerToggle.syncState()
drawerLayout.addDrawerListener(drawerToggle)

NavigationView

​ 通常navigationview设置在drawerlayout中

设置布局文件

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

<!--重要的两个属性:headerLayout,menu -->
<!--headerLayout头布局-->
<!--menu菜单栏-->

• 菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single" >
        <item
            android:id="@+id/menu_call"
            android:icon="@drawable/ic_collected"
            android:title="call" />
        <item
            android:id="@+id/menu_friend"
            android:icon="@drawable/icon_cell_liked"
            android:title="friend" />
        <item
            android:id="@+id/menu_location"
            android:icon="@drawable/icon_cell_dissed"
            android:title="location" />
        <item
            android:id="@+id/menu_task"
            android:icon="@drawable/icon_tab_publish"
            android:title="task" />
    </group>
</menu>

• 头布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_dark"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="Hello"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold" />
</LinearLayout>

• 代码中设置

//选中哪个菜单项
navigationView.setCheckedItem(R.id.menu_call)
//设置点击事件
navigationView.setNavigationItemSelectedListener {
  Toast.makeText(this,it.title,Toast.LENGTH_SHORT).show()
  drawerLayout.closeDrawer(Gravity.LEFT)
  true
}