Android 中的 Material Design 组件 Top App Bar

Top App Bar 是 Material Design 常用的组件之一，它位于屏幕的顶部，通常包含应用程序的名称、应用程序的 Logo、导航按钮和其他操作项。Top App Bar 不仅仅是一个简单的标题栏，它还可以根据不同的交互模式（滚动、折叠等）来进行自适应变化，同时支持各种主题颜色和样式。

在XML中添加Top App Bar

要在 XML 中添加 Top App Bar，只需要将“Toolbar”控件添加到你的布局文件中，并将其设置为 ActionBar：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/topAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:titleTextColor="@color/white"
    app:title="@string/app_name"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

在代码中设置Top App Bar

一旦将 Top App Bar 添加到 XML 中，就可以通过 Activity 或 Fragment 中的代码来设置它。

替换默认的 Action Bar

通过调用 setSupportActionBar() 方法，可以将 Top App Bar 设置为 Activity 的默认 Action Bar：

Toolbar topAppBar = findViewById(R.id.topAppBar);
setSupportActionBar(topAppBar);

添加菜单项

通过调用 onCreateOptionsMenu() 方法和 onOptionsItemSelected() 方法，可以向 Top App Bar 添加菜单项：

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        // do something
        return true;
    }
    return super.onOptionsItemSelected(item);
}

自定义Top App Bar

Top App Bar 可以根据应用程序的需求进行自定义，如更改主题颜色、添加 Logo 和按钮等。以下是一些常用的自定义选项：

更改主题颜色

可以通过更新 XML 中 Toolbar 的“background”属性来更改 Top App Bar 的背景颜色。

<androidx.appcompat.widget.Toolbar
    android:id="@+id/topAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/your_color"
    app:titleTextColor="@color/white"
    app:title="@string/app_name"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

添加 Logo 和按钮

可以通过更新 XML 中 Toolbar 的“logo”属性来添加应用程序的 Logo，并通过 XML 中的“menu”元素添加菜单项按钮：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/topAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    app:logo="@drawable/ic_launcher"
    app:menu="@menu/menu_main"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="@string/app_name"
    app:titleTextColor="@color/white" />

响应滚动事件

通过使用 AppBarLayout、CoordinatorLayout 和 CollapsingToolbarLayout 等组件，可以实现 Top App Bar 滚动时显示或隐藏的效果：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:collapsedTitleGravity="center"
        app:contentScrim="@color/your_color"
        app:expandedTitleGravity="center"
        app:expandedTitleMarginTop="@dimen/top_app_bar_expanded_title_margin_top"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/your_image"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

结论

Top App Bar 是 Material Design 中的一个常用组件，可以根据应用程序的需求进行自定义，包括更改主题颜色、添加 Logo 和按钮、响应滚动事件等。在 Android 中，Top App Bar 可以通过 XML 和代码进行设置，还可以添加菜单项和处理点击事件等。