标签: android-collapsingtoolbarlayout

我正在尝试创建一个CollapsingToolbarLayout在它下面的列表视图,当列表视图滚动时,工具栏应该折叠,但滚动工具栏时它不工作不会崩溃.

使用本教程:http://android-developers.blogspot.in/2015_05_01_archive.html

注意:FrameLayout包含listview

    <LinearLayout 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="wrap_content"
        android:orientation="vertical"
        android:scrollbars="vertical">

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

framelayout代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ranjithnair02.com.supporttest.BlankFragment">

    <ListView
        android:id="@+id/rcyv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:src="@android:drawable/ic_search_category_default"
        app:borderWidth="0dp"
        app:elevation="5dp"
        app:rippleColor="@color/wallet_highlighted_text_holo_light" />
</RelativeLayout>

最近,我使用了Android设计支持库,我的折叠工具栏有以下代码.

<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/media_detail_appbar"
        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/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            >

            <include
                layout="@layout/layout_card"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/media_detail_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>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <android.support.design.widget.TabLayout
            android:id="@+id/media_detail_tabs"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/blue_2"
            app:tabMode="scrollable"
            />

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

    </LinearLayout>

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

我有两个片段用于View Pager.一个是NestedScrollView,另一个是Recycler View.我的问题是NestedScrollView,这是下面的代码.

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

我的问题是,当您向上滚动视图时,只要您的手指在侧面移动一点,它就会触发视图寻呼机的水平滚动.你能帮我避免吗？当我们向上和向下滚动时,不应触发视图寻呼机.它在我的Recycler视图片段中运行良好.谢谢.

我想为我创建一个自定义contentScrim collapsingToolbarLayout.我的collapsingToolbarLayout有一个imageview内部.当它滚动时,理论上,imageview被认为是淡出,我的稀松布颜色被假定为淡入.

我们都知道我们可以制作这样的稀松布:

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

然而,当您在屏幕上滚动3/4时,Android默认稀松布似乎才开始工作.在此之前,imageview仍然完整显示.此外,当你达到屏幕的3/4时,平纹棉布开始并自动将collapsingtoolbarlayout的颜色更改为你的稀松布颜色:

当你向上滚动3/4并且在我们到达之前,它没有让它完全充满屏幕toolbar,我希望它轻轻地褪色,直到你滚动到toolbar.

如果您想查看我想要创建的效果的示例,请查看Facebook应用程序.当collapsingToolbarLayout完全展开时,这是Facebook应用程序:

滚动到大约3/4时,collapsingToolbarLayout有一个褪色的蓝色,蓝色不完全饱和:

所以我在我的内部创建了以下内容collapsingToolbarLayout:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frame_picture">

        <com.customshapes.SquareImageView
            android:id="@+id/backdrop"
            android:contentDescription="@string/photo"
            android:transitionName="@string/transition"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            />

        <com.customshapes.SquareImageView
            android:id="@+id/fading_backdrop"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:layout_height="240dp"
            android:alpha="0"
            android:fitsSystemWindows="true"
            />

    </FrameLayout>

framelayout包含背景imageview,该背景保存在我的collapsingToolbarLayout中显示的图片,在它前面是一个imageview,它只保存'scrimColor'？attr/colorPrimary,其alpha值为0,这样背景imageview就会闪耀.

然后我实现了appBarLayout的onOffsetChangedListener:

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

    fading_backdrop.setImageAlpha(verticalOffset);
    fading_backdrop.invalidate();
}

我们设置了fading_backdrop的alpha值,以便在向上滚动时显示.我正在努力创造一个人造稀松布.

但是,这似乎不能正常工作.运行此代码时,根本没有淡入淡出.有谁知道我做错了什么？

有没有办法为CollapsingToolabrLayout编辑动画速度？我的意思是在向下滚动时折叠的View的淡出动画.

我想在nestedscrollview中发生滚动/触摸事件时,只在CollapsingToolbarLayout/AppBarLayout上进行垂直滚动(这是有效的),但是如果用户试图直接滚动CollapsingToolbarLayout/AppBarLayout,它应该不起作用.我需要这个,因为那里的滚动/触摸事件搞乱了我的recyclerview滚动事件.

我有这个结构:

CoordinatorLayout

-- AppBarLayout

---- CollapsingToolbarLayout (scrollflags: scroll, exitUntilCollapsed, snap)

------ Toolbar (CollapseMode: pin)

------ RecyclerView (Horizontal, CollapseMode: pin)

----- /CollapsingToolbarLayout

-- /AppBarLayout

-- NestedScrollView (Behaviour: appbar_scrolling_view_behavior)

-- /NestedScrollView

/ CoordinatorLayout

我尝试为CollapsingToolbarLayout/AppBarLayout覆盖onTouch()和onInterceptTouchEvent(),但它会一直拦截触摸事件/滚动.

我试图把一个ImageView在CollapsingToolbarLayout其中占据了整个屏幕上的负载,当你滚动内容时,16:9高分辨率图像的宽度大小调整,直到图像占据屏幕的整个宽度.那时,我希望图像的视差app:layout_collapseParallaxMultiplier为0.5

使用此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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

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

            <ImageView
                android:id="@+id/img_hero"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/lake"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

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

完成以下任务:

以下显示图像的实际边界:

当我滚动时,我希望更多的图像宽度显示为图像的高度缩小并导致以下结果:

一旦我到达这一点,这就是我希望0.5的崩溃视差乘数生效的地方.

我已经搞砸了许多不同的滚动行为,尝试了所有的ImageViewscrollTypes,但没有用.有没有人知道这是否可能,如果可以的话,可以提供任何关于我做错或不做的指示.

我是否需要创建自己的自定义CoordinatorLayout.Behavior才能完成此操作？

我正在创建一个具有ProfilePage的应用程序,其中包含三个片段 - 关于| 帖子| 画廊,我正在使用带有用户图像的可折叠工具栏.我的第二个和第三个片段将有一个应始终可见的页脚,但这是我得到的:

当我的图像被展开时,页脚会消失.我想要的是我的两个片段让这些页脚始终可见,而不是依赖于工具栏是否折叠.我的画廊页脚应该类似于帖子页脚.

profile_layout.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:id="@+id/main_content"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

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

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

        <ImageView
            android:id="@+id/profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:contentDescription="@string/profile_photo"
            app:layout_collapseMode="none"/>

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

            <ImageView
                android:id="@+id/toolbarEdit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:contentDescription="@string/block"
                android:paddingEnd="20dp"
                android:paddingStart="5dp"
                app:srcCompat="@drawable/ic_icon_edit" />
        </android.support.v7.widget.Toolbar>

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.TabLayout
        android:id="@+id/myProfileTabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:tabContentStart="72dp"
        app:tabGravity="fill"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/myProfileViewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

posts_fragment.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" …

我使用了CollapsingToolbarLayout,我需要让它像这样伸展:

这是我的布局:

        <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:collapsedTitleGravity="bottom|center_horizontal"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        app:title="@string/app_name">


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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            app:layout_collapseMode="pin"

            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

我需要在imageView上进行拉伸.有什么方法可以使用CollapsingToolbarLayout吗？或者只是第三方图书馆？我找到了一种方法,只有第三方(这个),但使用ListView,我有一个Recyclerview.但无论如何我需要使用android.support.design.widget.CollapsingToolbarLayou.

所以有可能像这样的东西支持CollapsingToolbarLayout吗？如果没有,那么第三方是否正在使用动作栏？

谢谢你的帮助

我有一个直接的CollapsingToolbarLayout.它到目前为止工作正常,但如果我折叠工具栏,标题的位置不会垂直居中.

这是我的布局:

<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="@dimen/appbar_header_height_expanded"
    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">

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text" />

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

看看我的截图,这样你就可以看到它在两个状态下的表现.

这是折叠的工具栏的标题问题.

我在我的BaseFragment中将此工具栏设置为实际的片段:

protected void setToolbar(View view, int resource, String title, String subtitle) {
    Toolbar toolbar = view.findViewById(resource);
    ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setTitle(title);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setSubtitle(subtitle);
}

所以我发现了,..如果我显示一个Snackbar然后标题跳到正确的位置,扩展/折叠工作正常!所以任何想法为什么它显示一个Snackbar后工作？

View …

更新：

• 实际的问题是CoordinatorLayout没有RecycleView。
• 而不是使用RecycleView我尝试TextView内部ScrollView，这是相同的问题。
• 如果你有什么不对齐Toolbar的ActionBar，并使用CoordinatorLayout与其他ToolBar如粘头与底部滚动元素

原版的：

我正在开发一个视图，该视图需要Sticky标头实现和底部的回收视图。我已经使用了协调器布局支持，如此处所述。

工作原理：

• 滚动列表上的粘滞视图。
  • 使用layout_collapseMode = pin和CollapsingToolbarLayout使用layout_scrollFlags = scroll|exitUntilCollapsed|snap属性的工具栏。
  • 与行为回收视图app:layout_behavior="@string/appbar_scrolling_view_behavior“

问题是什么：

• 回收视图，将边距留在底部，其大小与Toolbar我用于粘性视图的大小相同。
• 回收视图的最后一项没有显示，它需要额外bottom_margin的粘性工具栏视图的大小。

观察：

• 如果我填满回收站，那它就起作用了。但是如果延迟通知它会导致问题。
• 更新。在另一次试运行中，我没有使用Recycle，而是TextView将NestedScrollView。（PFA）放在了其中（此处布局未更新）。
  • 在这里，我添加了来自xml的文本，并在延迟2秒后仅添加了一些文本，结果是相同的。
  • 它的布局再次占用了底部边距。因此，与Recycle视图无关的东西似乎与都存在问题CoordinatorLayout。

我已经尝试过在这里（这里）提供多种解决方案，但是没有任何效果。

PFA，电流输出。

更新 PFA，尝试延迟文本视图。

这是布局文件。

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/summaryAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"> …