像PlayStore应用一样的CollapsingToolbarLayout [英] CollapsingToolbarLayout like PlayStore app

问题描述

在滚动方面，我试图与PlayStore应用具有相同的行为.这是我要实现的 https://giphy.com/gifs/MymB51M84gpdS 的gif./p>

我所拥有的是以下内容:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            style="@style/match"
            android:minHeight="0dp"
            android:fitsSystemWindows="true"
          app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <RelativeLayout
                style="@style/match"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    style="@style/match"
                    android:scaleType="centerCrop"
                    tools:ignore="ContentDescription"/>

                <TextView
                    android:id="@+id/tv"
                    style="@style/matchwrap"
                    android:layout_alignParentBottom="true"/>

                <TextView
                    style="@style/matchwrap"
                    android:layout_above="@id/tv"
                    android:maxLines="2"/>
            </RelativeLayout>

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"/>

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

    <android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        style="@style/match">

    <LinearLayout style="@style/match"/>
</android.support.v4.widget.NestedScrollView>

<FrameLayout>
<Button/>
</FrameLayout>

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

如何实现类似滚动行为的PlayStore?

我的问题更多是关于下拉屏幕时，出现ToolBar然后显示图像的问题.我希望我的行为与之相符.

解决方案

类似的问题:

结果:

I am trying to have the same behavior as the PlayStore app in terms of scrolling. Here is the gif of what I want to achieve https://giphy.com/gifs/MymB51M84gpdS.

What I have is the following:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            style="@style/match"
            android:minHeight="0dp"
            android:fitsSystemWindows="true"
          app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <RelativeLayout
                style="@style/match"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    style="@style/match"
                    android:scaleType="centerCrop"
                    tools:ignore="ContentDescription"/>

                <TextView
                    android:id="@+id/tv"
                    style="@style/matchwrap"
                    android:layout_alignParentBottom="true"/>

                <TextView
                    style="@style/matchwrap"
                    android:layout_above="@id/tv"
                    android:maxLines="2"/>
            </RelativeLayout>

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"/>

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

    <android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        style="@style/match">

    <LinearLayout style="@style/match"/>
</android.support.v4.widget.NestedScrollView>

<FrameLayout>
<Button/>
</FrameLayout>

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

How do I achieve the PlayStore like scrolling behavior?

EDIT: My question is more about when the screen is being pulled down, the ToolBar appears and then the image is shown. I want my behavior to match that.

解决方案

Similiar question: collapsing toolbar layout like google play store

There is an ImageView with parallax collapseMode and of course, they pinned the Toolbar but after collapsing the CollapsingToolbarLayout, Toolbar is going to be hide.

Something like this:

<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.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/seffafCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header"
                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" />

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

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

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

Result:

这篇关于像PlayStore应用一样的CollapsingToolbarLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！