塌陷工具栏布局像谷歌Play商店 [英] collapsing toolbar layout like google play store

问题描述

我想打一个像谷歌工具栏倒塌玩布置店面。喜欢这个：
https://sendvid.com/ugjspx8r

这是我的布局：
http://sendvid.com/s4mx3xem

我

如何能做到这一点与新的Andr​​oid支持库？

这是我的布局xml文件：

 ＆LT; android.support.design.widget.CoordinatorLayout
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：focusableInTouchMode =真正的＆GT;    ＆LT; android.support.design.widget.AppBarLayout
        机器人：ID =@ + ID / appBarLayout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：fitsSystemWindows =真正的＆GT;        ＆LT; android.support.design.widget.CollapsingToolbarLayout
            机器人：ID =@ + ID / seffafCollapsingToolbarLayout
            机器人：layout_width =match_parent
            机器人：layout_height =240dp
            应用：expandedTitleMarginEnd =164dp
            应用：expandedTitleMarginStart =148dp
            应用：layout_scrollFlags =滚动| enterAlwaysCollapsed＆GT;            ＆LT; ImageView的
                机器人：ID =@ + ID /头
                机器人：layout_width =match_parent
                机器人：layout_height =match_parent
                应用：layout_scrollFlags =滚动| enterAlways | enterAlwaysCollapsed
                机器人：SRC =@绘制/ haber_icerik_resim
                机器人：fitsSystemWindows =真
                机器人：scaleType =centerCrop
                应用：layout_collapseMode =视差/＆GT;            ＆LT; android.support.v7.widget.Toolbar
                机器人：ID =@ + ID / haber_toolbar
                机器人：layout_width =match_parent
                机器人：layout_height =？ATTR / actionBarSize
                应用：主题=@风格/ ToolbarColoredBackArrow
                应用：layout_collapseMode =针
                应用：layout_scrollFlags =滚动| enterAlways/＆GT;        ＆LT; /android.support.design.widget.CollapsingToolbarLayout>    ＆LT; /android.support.design.widget.AppBarLayout>
    ＆LT; android.support.v7.widget.RecyclerView
        机器人：ID =@ + ID / newsRecyclerView
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        机器人：滚动条=垂直
        机器人：可点击=真
        机器人：背景=@彩色/ mainBackground
        应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior/＆GT;＆LT; /android.support.design.widget.CoordinatorLayout>
 

解决方案

里面CollapsingToolbarLayout查看无需设置应用程序：layout_scrollFlags。没有效果。
在CollapsingToolbarLayout layout_scrollFlags到：基地对我的code，更改应用程序
应用程序：layout_scrollFlags =滚动| enterAlways | enterAlwaysCollapsed
并设置了minHeight它。

由于您的工具栏是针，所以enterAlwaysCollapsed将调用它，当你向下滚动。

 ＆LT; android.support.design.widget.CoordinatorLayout
的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：focusableInTouchMode =真正的＆GT;＆LT; android.support.design.widget.AppBarLayout
    机器人：ID =@ + ID / appBarLayout
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：fitsSystemWindows =真正的＆GT;    ＆LT; android.support.design.widget.CollapsingToolbarLayout
        机器人：ID =@ + ID / seffafCollapsingToolbarLayout
        机器人：layout_width =match_parent
        机器人：layout_height =240dp
        安卓了minHeight =？ATTR / actionBarSize
        应用：expandedTitleMarginEnd =164dp
        应用：expandedTitleMarginStart =148dp
        应用：layout_scrollFlags =滚动| enterAlways | enterAlwaysCollapsed＆GT;        ＆LT; ImageView的
            机器人：ID =@ + ID /头
            机器人：layout_width =match_parent
            机器人：layout_height =match_parent
            机器人：SRC =@绘制/ haber_icerik_resim
            机器人：fitsSystemWindows =真
            机器人：scaleType =centerCrop
            应用：layout_collapseMode =视差/＆GT;        ＆LT; android.support.v7.widget.Toolbar
            机器人：ID =@ + ID / haber_toolbar
            机器人：layout_width =match_parent
            机器人：layout_height =？ATTR / actionBarSize
            应用：主题=@风格/ ToolbarColoredBackArrow
            应用：layout_collapseMode =针/＆GT;    ＆LT; /android.support.design.widget.CollapsingToolbarLayout>＆LT; /android.support.design.widget.AppBarLayout>
＆LT; android.support.v7.widget.RecyclerView
    机器人：ID =@ + ID / newsRecyclerView
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：滚动条=垂直
    机器人：可点击=真
    机器人：背景=@彩色/ mainBackground
    应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior/＆GT;
 

i want to make a collapsing toolbar layout like google play store. like this: https://sendvid.com/ugjspx8r

and here is my layout: http://sendvid.com/s4mx3xem

how can i do that with new android support library?

here is my layout xml file:

<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"
            app:expandedTitleMarginEnd="164dp"
            app:expandedTitleMarginStart="148dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                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"
                app:layout_scrollFlags="scroll|enterAlways"/>

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

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

解决方案

View inside CollapsingToolbarLayout no need to set app:layout_scrollFlags. No effect. Base on my code, change app:layout_scrollFlags in CollapsingToolbarLayout to "app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and set minHeight for it.

As your toolbar is "pin", so enterAlwaysCollapsed will call it when you scroll down.

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

这篇关于塌陷工具栏布局像谷歌Play商店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！