Question

我想实现像Google Play商店这样的折叠工具栏。我已经实现了一些功能，但这只适用于肖像屏幕。以下是我能够做的截图示例。

现在我要做的是当我将设备方向更改为LandScape模式时，它应该看起来完全像这样。

那么我的主要问题是如何处理这些方向变化。是否有任何官方的Android组件可以做这种事情，或者我将不得不对我的Layouts进行Z-index以实现这种布局行为。请注意，我希望布局与此类似，双边边距和Z-indexing在图片上方，滚动行为也需要与Google Play商店完全相同。

我正在附上我到目前为止写的样本xml。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <com.group3amd.materializeyourapp.widgets.SquareImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            app:cardElevation="@dimen/spacing_medium"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/spacing_large"
                    android:layout_marginRight="@dimen/spacing_large"
                    android:layout_marginTop="@dimen/spacing_large"
                    android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

                <TextView
                    android:id="@+id/description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/spacing_large"
                    android:text="@string/lorem_ipsum"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

            </LinearLayout>

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

    </FrameLayout>

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    style="@style/FabStyle"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|right|end" />

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

Answer 1

在这个非常相似的问题：collapsing toolbar layout like google play store中，您会找到如下答案：

在CollapsingToolbarLayout内查看无需设置 app:layout_scrollFlags。没有效果。根据我的代码，改变 app:layout_scrollFlags中的CollapsingToolbarLayout app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"和为它设置minHeight。

由于您的工具栏为"pin"，因此enterAlwaysCollapsed会在以后调用它你向下滚动。

<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/seffafCollapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:minHeight="?attr/actionBarSize"
        app:expandedTitleMarginEnd="164dp"
        app:expandedTitleMarginStart="148dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/haber_icerik_resim"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/haber_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:theme="@style/ToolbarColoredBackArrow"
            app:layout_collapseMode="pin"/>

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

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/newsRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:clickable="true"
    android:background="@color/mainBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

在该帖子的评论中，您还会发现一个提示：

将app:contentScrim="?attr/colorPrimary"添加到您的帐户中 collapsingtoolbarlayout。实现这一点不需要两个工具栏效果

编辑：在这里你会找到一个负责谷歌Play商店的人的采访，他正在谈论他如何在Play商店应用程序中构建设计：

[UDACITY] Interview with Kirill Grouchnikov, part 1

[UDACITY] Interview with Kirill Grouchnikov, part 2

希望有所帮助

折叠工具栏就像Google Play商店一样

1 个答案: