如何在android中制作折叠工具栏？

Posted 2023-04-18

【中文标题】如何在android中制作折叠工具栏？

【英文标题】：How to make a collapsing toolbar in android?

【发布时间】：2017-02-14 08:46:31

【问题描述】：

所以我试图实现一个简单的折叠工具栏，但我认为我的 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_
    android:layout_
    tools:ignore="RtlHardcoded">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/cardInfo_appbar"
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/cardInfo_collapsing"
            android:layout_
            android:layout_
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <ImageView
                android:layout_
                android:layout_
                android:src="@drawable/image_kyoto"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_
        android:layout_>
        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical">
            <TextView
                android:layout_
                android:layout_
                android:text="Hello there"
                android:textSize="30dp"/>
            <TextView
                android:layout_
                android:layout_
                android:text="Hello there"
                android:textSize="30dp"/>
            <TextView
                android:layout_
                android:layout_
                android:text="Hello there"
                android:textSize="30dp"/>        <TextView
            android:layout_
            android:layout_
            android:text="Hello there"
            android:textSize="30dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

这是图片

【问题讨论】：

您正在使用 CollapsingToolbarLayout 小部件，但您的 xml 中没有 Toolbar 元素。是故意的吗？

【参考方案1】：

你的 ImageView 应该有一个名为

的属性

app:layout_collapseMode="parallax"

如果你想在你的布局中添加工具栏，应该有一个名为

的属性

app:layout_collapseMode="pin"

最后你错过了 NestedScrollView 的一个属性。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

【参考方案2】：

在您的 ImageView 中，添加以下属性：

app:layout_collapseMode="parallax"

另外，在您的 NestedScrollView 标记中，添加以下内容：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

【讨论】：

这让它崩溃了，但是“你好，文本仍然在图像上方而不是下方？！？

好的，试着给你的 AppBarLayout 标签一个明确的高度：android:layout_

是的，成功了。不知道为什么我不能使用 wrap_content？

我相信你可以，但一定要在你的所有视图中添加：android:fitSystemWindows="true"，包括 AppBarLayout。一开始我很困惑，我发现这有助于澄清任何问题：medium.com/google-developers/…