塌陷工具栏像谷歌Play商店 [英] Collapsing Toolbar Like Google Play Store

查看：360 发布时间：2016/3/26 18:39:53 android android-layout material-design collapsingtoolbarlayout android-appbarlayout

本文介绍了塌陷工具栏像谷歌Play商店的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想实现一个像谷歌工具栏倒塌Play商店。我已经实现的功能有所不过，这只是工作纵向屏幕。这里是什么我能够做截图的样本。

现在当我将设备方向更改为横向模式下，它应该是我想要做的是完全一样。

所以我的主要问题是什么如何处理这些方向的变化。是否有任何可用的官方Android组件，可以做这种事情，否则我将不得不Z-指数我的布局来实现这种布局行为。请注意，我想布局酷似这两侧边距和Z索引的图片的上方还滚动行为需要酷似谷歌Play商店。

我附上我至今写我的示例XML。

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; android.support.design.widget.CoordinatorLayout的xmlns：机器人=http://schemas.android.com/apk/res/android
的xmlns：程序=http://schemas.android.com/apk/res-auto
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：fitsSystemWindows =真正的＆GT;＆LT; android.support.design.widget.AppBarLayout
    机器人：ID =@ + ID / app_bar_layout
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：fitsSystemWindows =真
    机器人：主题=@风格/ ThemeOverlay.AppCompat.Dark.ActionBar＆GT;    ＆LT; android.support.design.widget.CollapsingToolbarLayout
        机器人：ID =@ + ID / collapsing_toolbar
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        机器人：fitsSystemWindows =真
        应用：contentScrim =？ATTR / colorPrimary
        应用：expandedTitleMarginEnd =64dp
        应用：expandedTitleMarginStart =48dp
        应用：layout_scrollFlags =滚动| exitUntilCollapsed＆GT;        ＆LT; com.group3amd.materializeyourapp.widgets.SquareImageView
            机器人：ID =@ + ID /图像
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：fitsSystemWindows =真
            机器人：scaleType =centerCrop
            应用：layout_collapseMode =视差/＆GT;        ＆LT; android.support.v7.widget.Toolbar
            机器人：ID =@ + ID /工具栏
            机器人：layout_width =match_parent
            机器人：layout_height =？ATTR / actionBarSize
            应用：layout_collapseMode =针
            应用：popupTheme =@风格/ ThemeOverlay.AppCompat.Light/＆GT;    ＆LT; /android.support.design.widget.CollapsingToolbarLayout>＆LT; /android.support.design.widget.AppBarLayout>＆LT; android.support.v4.widget.NestedScrollView
    机器人：ID =@ + ID /滚动
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：clipToPadding =假
    应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior＆GT;    ＆LT;的FrameLayout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT＆GT;        ＆LT; android.support.v7.widget.CardView
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_marginTop =24dp
            应用：cardElevation =@扪/ spacing_medium
            应用：cardUseCompatPadding =真正的＆GT;            ＆LT;的LinearLayout
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT
                机器人：方向=垂直＆GT;                ＆LT;的TextView
                    机器人：ID =@ + ID /标题
                    机器人：layout_width =match_parent
                    机器人：layout_height =WRAP_CONTENT
                    机器人：layout_marginLeft =@扪/ spacing_large
                    机器人：layout_marginRight =@扪/ spacing_large
                    机器人：layout_marginTop =@扪/ spacing_large
                    机器人：textAppearance =@风格/ TextAppearance.AppCompat.Headline/＆GT;                ＆LT;的TextView
                    机器人：ID =@ + ID /说明
                    机器人：layout_width =match_parent
                    机器人：layout_height =WRAP_CONTENT
                    机器人：layout_margin =@扪/ spacing_large
                    机器人：文字=@字符串/ lorem_ipsum
                    机器人：textAppearance =@风格/ TextAppearance.AppCompat.Body1/＆GT;            ＆LT; / LinearLayout中＆GT;        ＆LT; /android.support.v7.widget.CardView>    ＆LT; /＆的FrameLayout GT;＆LT; /android.support.v4.widget.NestedScrollView>＆LT; android.support.design.widget.FloatingActionButton
    机器人：ID =@ + ID / FAB
    风格=@风格/ FabStyle
    应用：layout_anchor =@ ID / app_bar_layout
    应用：layout_anchorGravity =底部|右|结束/＆GT;＆LT; /android.support.design.widget.CoordinatorLayout>

解决方案

在此pretty类似的问题：<一href=\"http://stackoverflow.com/questions/32569824/collapsing-toolbar-layout-like-google-play-store\">collapsing像谷歌Play商店工具栏的布局，你会找到答案如下：

查看里面的 CollapsingToolbarLayout 无需设置
  应用：layout_scrollFlags 。没有效果。基地在我的code，变化
  应用：layout_scrollFlags 在 CollapsingToolbarLayout 来
  应用：layout_scrollFlags =滚动| enterAlways | enterAlwaysCollapsed和
  设置了minHeight 吧。

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

 ＆LT; android.support.design.widget.CoordinatorLayout
的xmlns：程序=http://schemas.android.com/apk/res-auto
的xmlns：机器人=http://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;

在该帖子的评论，你会还可以找到一个提示：

添加应用：contentScrim =？ATTR / colorPrimary您
collapsingtoolbarlayout。这是没有必要两个工具栏来实现这个
效果

编辑：在这里，你会找到负责谷歌Play商店的人接受记者采访时，他谈到他是如何在Play商店应用构建设计：

[UDACITY]专访基里尔Grouchnikov，第1部分

[UDACITY]专访基里尔Grouchnikov，第2部分

希望它能帮助

I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot of what i was able to do.

Now what i want to do is when i change my device orientation to LandScape mode it should look Exactly Like This.

So what my main question is how to handle these orientation changes. Is there any official android component available that can do this kind of thing or I will have to Z-index my Layouts to achieve this kind of Layout behavior. Please note that I want the layout to be exactly like this with Margins on Both Sides and Z-indexing on top of picture also the scrolling behavior needs to be exactly like Google Play Store.

I am attaching my sample xml that I have written so far.

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

解决方案

In this pretty similar issue: collapsing toolbar layout like google play store, you would find an answer as below:

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

In the comment to that post, you would find also a hint:

add app:contentScrim="?attr/colorPrimary" to your collapsingtoolbarlayout. It is no need two toolbars to implement this effect

EDIT: Here you would find an interview with a guy responsible for Google Play Store, he's talking about how he build design in Play Store App:

[UDACITY] Interview with Kirill Grouchnikov, part 1

[UDACITY] Interview with Kirill Grouchnikov, part 2

Hope it help

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

查看全文

塌陷工具栏像谷歌Play商店 [英] Collapsing Toolbar Like Google Play Store

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录关闭

塌陷工具栏像谷歌Play商店 [英] Collapsing Toolbar Like Google Play Store

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录 关闭

登录关闭