Question

我愿意为我正在处理的应用程序的主菜单创建一个自定义工具栏，如下所示： https://i.stack.imgur.com/GJdjn.png

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

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

提前致谢。

Answer 1

您可以根据需要自定义工具栏小部件。使用这样的东西：

<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>

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

Answer 2

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

<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>

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

2 个答案: