标签: android-collapsingtoolbarlayout

我正在关注Cheesesquare示例项目以了解新的设计材料库.

我想知道是否有办法使用ImageView,标题和副标题的自定义视图(如Telegram),而不是CollapsingToolbarLayout小部件提供的简单标题.

谢谢.

什么是layout_collapseParallaxMultiplier使用CollapsingToolbarLayout？

我见过android开发者文档,但我不明白.

请解释此参数及其layout_collapseMode与示例一起使用时的效果.

下面是一个简单的xml示例.

<android.support.design.widget.CollapsingToolbarLayout ... >
<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:src="@drawable/random_pattern"
        android:scaleType="fitXY"
        app:layout_collapseMode="parallax"
        app:layout_collapseParallaxMultiplier="0.75"/>
 </android.support.design.widget.CollapsingToolbarLayout>

我几天前更新了我的android工作室,并开始使用CoordinatorLayout和CollapsingToolbarLayout尝试的东西.

似乎工具栏稀松布颜色覆盖状态栏初始颜色和状态栏稀松布颜色(从xml和代码尝试)

初始状态:

开始滚动:

滚动直至折叠:

所以问题是:

1. 如何在折叠时阻止工具栏覆盖状态栏(甚至不让我正在折叠的图像超过它).

2. 如何在折叠后更改状态栏颜色

我遇到的另一个问题是我给了工具栏的初始颜色而不仅仅是稀松布颜色,因为我希望工具栏位于图片上方,而是它会在图片的顶部显示,并覆盖其中的一些,并覆盖任何内容.落后于它

为xml中的工具栏添加了颜色/样式:

3. 有没有办法将工具栏从头开始放在图片上方,只是折叠图像？(考虑可能保持工具栏固定和框架布局在图像之前,但它仍然会在状态栏区域崩溃,这是主要问题.)

主要活动xml:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim = "?attr/colorPrimary"
        app:statusBarScrim="?attr/colorAccent" --------> not changing
        android:id="@+id/my_ctl">


        <ImageView
            android:id="@+id/image"
            android:src="@drawable/flights"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            />

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


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

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


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

    <include layout="@layout/content_main" />

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

MainActivity.java:

  CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.my_ctl);
    //ctl.setContentScrimColor(Color.RED);
    ctl.setStatusBarScrimColor(Color.BLUE);  --------> not working
    ctl.setTitle("blabla");

我无法将设计支持库集成到我的应用程序中.出于某种原因,工具栏会与CollapsingToolbarLayout一起折叠,并且不会像Chris Banes那样将其固定在Cheesesquare示例中. https://github.com/chrisbanes/cheesesquare

我的布局没有做任何不同的事情.事实上,我用他取代了我的风格,然后放弃了他的布局.我想知道是否使用工具栏,而不是android.support.v7.widget.Toolbar导致这个.

这是问题所在.

这是我的AppBar部分的XML.

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


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

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

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

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

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

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

    ...

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

我试过了setExpandTitleTextAppearance,但没办法.我想将扩展的标题文本居中.

我有一个活动CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout和Toolbar.所以,基本上,滚动时会崩溃的视图RecyclerView.

我需要做的是当展开的布局视图由于折叠而隐藏时显示自定义视图.

这是我的布局:

<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/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        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="#2196F3"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <include
                android:id="@+id/header"
                layout="@layout/header_big_first_screen"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

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

                <TextView

                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Hello!"/>


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


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

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/categories_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


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

最后,当工具栏展开时,将显示加载了元素的视图.当它折叠时它没有.当它消失时,应显示TextView内部Toolbar.目前它一直显示.

我一直在查看在CollapsingToolbarLayout更改大小时添加侦听器的事件,以便我可以检查它是否小于值并显示该视图.

这可能有点难以解释,但我相信我已经清楚了.我一直在谷歌搜索,找不到任何人试图做同样的事情.

我正在尝试使用自定义视图实现CollapsingToolbarLayout,但我无法执行此操作:

我想做什么(对不起,我不能发布图片所以它是imgur):

展开后,标题是带有图像和标题的配置文件屏幕

未展开(滚动),图像和标题将在工具栏上

但是我看到的一切都没有按照我的预期运作

我是新手和棒棒糖动画,所以如果有人能帮助我,我将非常感激!

(我不发布示例代码,因为我没有与帖子相关的内容)

介绍

我有一个活动,它实现使用具有视差的标题图片和滚动内容的共用图案CoordinatorLayout,AppBarLayout和CollapsingToolbarLayout.我的xml布局如下所示:

<android.support.design.widget.CoordinatorLayout
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <TextView
                android:background="@color/colorAccent"
                android:gravity="center"
                android:layout_height="250dp"
                android:layout_width="match_parent"
                android:text="ParallaxImage"
                app:layout_collapseMode="parallax"/>

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

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

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

        <TextView
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:layout_width="wrap_content"
            android:text="@string/large_text"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

正如您在下面的gif动画中看到的,一切正常.您可以从内容NestedScrollView以及Toolbar视差或视差中滚动整个屏幕View.

问题

谷歌推出了一个BottomSheetBehavior类(Android设计支持库23.2),以帮助开发人员实现Bottom表.我的带有Bottom工作表的xml布局如下所示:

<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/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <!-- ommited …

由于Error inflating类android.support.design.widget.CollapsingToolbarLayout,我的CollapsingToolbarLayout崩溃了.

我上周末更新了android studio.在更新之前,它工作正常.我更新后,它崩溃了.但是,我试图将它降级到2.0.0版本,它不再起作用了.我的同事对CollapsingToolbarLayout没有任何问题.我不确定发生了什么.

错误是:

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.test.android/com.test.android.ui.activity.RandomActivity}: android.view.InflateException: Binary XML file line #22: Error inflating class android.support.design.widget.CollapsingToolbarLayout
                                                                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
                                                                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387)
                                                                      at android.app.ActivityThread.access$800(ActivityThread.java:151)
                                                                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303)
                                                                      at android.os.Handler.dispatchMessage(Handler.java:102)
                                                                      at android.os.Looper.loop(Looper.java:135)
                                                                      at android.app.ActivityThread.main(ActivityThread.java:5254)
                                                                      at java.lang.reflect.Method.invoke(Native Method)
                                                                      at java.lang.reflect.Method.invoke(Method.java:372)
                                                                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
                                                                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
                                                                   Caused by: android.view.InflateException: Binary XML file line #22: Error inflating class android.support.design.widget.CollapsingToolbarLayout
                                                                      at android.view.LayoutInflater.createView(LayoutInflater.java:633)
                                                                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:743)
                                                                      at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
                                                                      at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
                                                                      at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
                                                                      at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
                                                                      at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
                                                                      at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
                                                                      at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:276)
                                                                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:136)
                                                                      at com.test.android.ui.activity.RefreshableActivity.onCreate(RefreshableActivity.java:31)
                                                                      at android.app.Activity.performCreate(Activity.java:5990) …

我正在尝试使用CoordinatorLayout和CollapsingToolbarLayout创建一些组合布局.

在第一个状态,当我们在最顶层的页面上,并且还没有滚动时,我希望工具栏如下所示(是的,我做到了):

在第二种状态下,当开始向下滚动时,图像和工具栏应该消失,如下所示(仅显示选项卡):

在最后一个状态,一旦我在列表中的某个点(但不是列表的顶部),我想开始向上滚动,一旦我开始向上滚动,我想要工具栏(而不是图片中消耗的工具栏)开始哇哇,如下图所示(如果没有到达列表的顶部,图像将不会显示,只有工具栏):

我能够实现第一个状态,但另一个状态是有问题的,一旦工具栏在CollapsingToolbarLayout中实现,我在CollapsingToolbarLayout组件之外可以用它做的灵活性不明确.我无法隐藏工具栏,如果我这样做,那么只有在我到达顶部时它才会显示.

无论如何,我当前的XML(如下所示)处于第一张图片实现的状态,但是一旦我开始向下滚动,工具栏就会停留在顶部并且不会隐藏.注意:我必须告诉工具栏保持"pin",因为如果我没有,那么工具栏内的信息就会消失,只有一个空的工具栏会显示(这是另一个帖子,但是知道为什么会发生这种情况仍然很有趣？) .

这是我当前的xml:

    <android.support.design.widget.CoordinatorLayout
    android:id="@+id/benefit_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"

                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"

                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayou