Android 如何创建具有背景图像和居中缩略图的扩展工具栏？

我愿意为我正在使用的应用程序的主菜单创建一个自定义工具栏，如下所示：

它包含一个背景图像和另一个作为缩略图的居中图像。它不会折叠并保持静态，直到在其中一个选项卡中选择一个项目

我在开发过程中使用了Android Studio，这对布局来说可能有点粗糙，但我相信有一个解决方案使用了材质设计功能，但我找不到任何相关内容（除了带有背景图像的工具栏）

---

提前感谢。

您可以根据需要自定义工具栏小部件。使用类似以下内容：

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toolbar Title"
    android:layout_gravity="center"
    android:id="@+id/toolbar_title" >

    //...your code here

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="enterAlways">

            <FrameLayout
                android:id="@+id/header_frame"
                android:layout_width="match_parent"
                android:layout_height="@dimen/height_header"
                app:layout_collapseMode="pin">

                <ImageView
                    android:id="@+id/header_image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"/>

                <ImageView
                    android:id="@+id/square_image"
                    android:layout_width="@dimen/size_square_image"
                    android:layout_height="@dimen/size_square_image"
                    android:layout_gravity="center|bottom"
                    android:scaleType="centerCrop"/>

            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

//…您的代码在这里

---

然后将此工具栏添加到用户界面的顶部。

根据您使用的示例，看起来他们正在使用关闭折叠效果的工具栏。布局可能如下所示：

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toolbar Title"
    android:layout_gravity="center"
    android:id="@+id/toolbar_title" >

    //...your code here

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="enterAlways">

            <FrameLayout
                android:id="@+id/header_frame"
                android:layout_width="match_parent"
                android:layout_height="@dimen/height_header"
                app:layout_collapseMode="pin">

                <ImageView
                    android:id="@+id/header_image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"/>

                <ImageView
                    android:id="@+id/square_image"
                    android:layout_width="@dimen/size_square_image"
                    android:layout_height="@dimen/size_square_image"
                    android:layout_gravity="center|bottom"
                    android:scaleType="centerCrop"/>

            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

这不是一个非常复杂的布局。你试过什么了？谢谢你的回答，它真的很完整，看起来完全符合我的需要！我只是对你代码中声明的主题有一些问题——我们应用程序中使用的主题有点混乱，我需要进一步研究它们以应用你的代码。当我这样做时，我会提供更好的反馈。再次感谢@MaurícioFontana Ah，

AppTheme.AppBarOverlay

和

AppTheme.PopupOverlay

通常由Android Studio在生成新的

活动时自动生成。如果您从未这样做过，或者从此删除了这些主题，它们将不可用。您只需使用
ThemeOverlay.AppCompat.Dark.ActionBar
和
ThemeOverlay.AppCompat.Light
（它们由支持库提供）。嘿，感谢您的代码块！我不知道像这样定制工具栏是可能的。我试图实现您的解决方案，但我不知道如何将工具栏添加到UI的顶部。看起来主题中声明的工具栏覆盖了您的工具栏。我需要进一步研究应用程序的主题，以提供更好的反馈。你不必为此担心太多主题。根本不要使用ActionBar。您可以使用方向为垂直的LinearLayout，并将工具栏作为第一个元素。