android studio使用Material Design中的ToolBar

ToolBar

1.引入

androidstudio中引入androidx.appcompat.widget.Toolbar

打开你的项目的build.gradle文件，确保你已经将androidx库添加到了依赖中。如果没有添加，请添加以下代码到dependencies部分：

dependencies {

implementation("androidx.appcompat:appcompat:1.7.0")
}

可以到这里查看版本：

https://developer.android.google.cn/jetpack/androidx/releases/appcompat?hl=da

2.同步Gradle配置（点击工具栏上的"Sync Now"按钮）。

3.在你的布局文件（XML）中，添加Toolbar组件：

activity_main.xml

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

layout_height：这个属性我们非常熟悉了，但对于后面进行一下解释，?attr/actionBarSize 是一个主题属性引用，它引用了当前主题中定义的 ActionBar 的标准高度

android:theme：将 Toolbar 的主题设置为暗色主题

app:popupTheme：当我们为标题添加菜单按钮的时候按钮也会是暗色的主题，页面就会非常不和谐，因此将标题设置为淡色主题

app:navigationIcon="@drawable/icon" 左边返回图标

app:title="Title" 标题

app:titleTextColor="@color/black" 标题颜色

app:titleMarginStart="90dp" 标题离左边的距离

app:subtitle="子标题" 子标题

app:subtitleTextColor="@color/white" 子标题颜色

app:logo="@mipmap/ic_launcher" logo，位于标题左，返回图标右

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.setDisplayHomeAsUpEnabled(true); /*actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);*/
}

setDisplayHomeAsUpEnabled()：设置了 ActionBar 的 homeAsUp 属性为 true。homeAsUp 属性的作用是让 ActionBar 的左侧显示一个向上导航的按钮（通常是一个箭头图标），点击这个按钮可以触发向上导航的行为。调用这个方法并传入 true 会启用这个按钮。如果用户点击这个按钮，它会调用 onOptionsItemSelected 方法，并传入 android.R.id.home 作为 itemId 参数。你可以在这个方法中处理点击事件，比如导航回上一个 Activity。

setHomeAsUpIndicator()：就是为这个按钮设置图标，当我们不设置的时候就会使用默认的图标，运行程序，如下图所示：

尝试为左上角的导航按钮注册点击事件，使按下按钮但回到上一个活动：

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    //android.R.id.home 是 Android 框架中定义的一个资源 ID，它代表了 ActionBar 中的"向上"或"返回首页"按钮的点击事件的ID
    if (item.getItemId() == android.R.id.home) {
        finish();
        return true;
    }
    return super.onOptionsItemSelected(item);
}

添加菜单

然后右击res目录→New→Directory，创建一个menu文件夹。然后右击menu文件夹→New→Menu resource file，创建一个toolbar.xml文件，并编写

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="home"
        app:showAsAction="always"/>

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

    <item
        android:id="@+id/my"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="my"
        app:showAsAction="never"/>
</menu>

通过<item>标签来定义action按钮，android:id用于指定按钮的id，android:icon用于指定按钮的图标，android:title用于指定按钮的文字

接着使用app:showAsAction来指定按钮的显示位置，showAsAction主要有以下几种值可选：

always表示永远显示在Toolbar中，如果屏幕空间不够则不显示；

ifRoom表示屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单当中

never表示永远显示在菜单当中

注意，Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字

将目录加载在Toolbar上：

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

app:showAsAction 属性可以设置的一些值及其含义：

always: 总是显示在 Toolbar 上。不论 Toolbar 上有多少其他菜单项，这个菜单项都会直接显示在 Toolbar 上

ifRoom: 如果 Toolbar 上有足够空间，就显示在 Toolbar 上。如果空间不足，它会被放置在溢出菜单（Overflow Menu）中

never: 从不直接显示在 Toolbar 上，总是位于溢出菜单中

滑动菜单

DrawerLayout

NavigationView

先给大家介绍如何将一个图片设置为圆形，首先需要添加依赖：

implementation("de.hdodenhof:circleimageview:3.1.0")

我们制定一个目录，将所有的子目录放在一个group（组）当中，为其设置属性为single：

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/home1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="find"/>

        <item
            android:id="@+id/find1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="find"/>

        <item
            android:id="@+id/my1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="my"/>
    </group>

</menu>

android:checkableBehavior属性补充：

None: 这是默认值。当设置为 None 时，视图可以独立地被选中或取消选中，不会影响其他具有相同 android:checkable 属性的视图。

Single: 当设置为 Single 时，如果一个视图被选中，其他所有具有相同 android:checkable 属性的视图将自动取消选中。这个行为通常用于单选按钮（RadioButton）组，确保用户在一组选项中只能选择一个。

All: 这个值实际上并不存在于 android:checkableBehavior 属性中。可能是你想要表达的是 Toggle 行为，当设置为 Toggle 时，视图会在被点击时在选中和未选中状态之间切换，这通常用于复选框（CheckBox）

为滑倒出来的布局设置一个头布局：nav_header.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconimg"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/draw1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/mailtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="10dp"
        android:layout_marginBottom="241dp"
        android:text="123456789@qq.com"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/userText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iconimg"
        android:layout_alignParentStart="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="153dp"
        android:gravity="start"
        android:text="自然醒"
        android:textSize="15sp" />

</RelativeLayout>

修改活动中的布局，将之前的线性布局转换为：

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</androidx.drawerlayout.widget.DrawerLayout>

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
//将一开始的选择默认设置为find1
navigationView.setCheckedItem(R.id.find1);
//注册选项的点击事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        drawrLayout.closeDrawers();
        return true;
    }
});