具有 NestedScrollView 行为的 CoordinatorLayout

Question

我是一名 Android 新手程序员，但遇到了 UI 问题。我的目标是实现更接近此的目标： desirable layout

我考虑了一下，决定使用 CoordinatorLayout、AppBarLayout / CollapsingToolbarLayout 和带有 CardView 的 NestedScrollView。听起来很适合这个问题，对吧？

使用我的实际 XML，我已经有了工具栏、图像和滚动功能。

但是，滚动功能并不是我想要的 100%。首先，由于在屏幕中间附近（可能是因为android:layout_height="275dp"），所以不能向下滚动，只能向上滚动。 （当然还有折叠工具栏）。我的主要目标是全屏“打开”图像。你知道我怎样才能实现这种行为吗？也许在 .java 中控制 %？

还有一个烦人的错误，但我现在可以先离开它，如果它也给你一些强迫症，试着帮忙

我尝试向我的LinearLayout 添加一个透明属性，但没有成功。

普通滚动： Current scroll

Buggy 'panel' 因为它快要崩溃了： buggy panel image

我所有的 XML：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/annonce.main.coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="RtlHardcoded"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/flexible.example.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/flexible_example_collapsing"
            android:layout_width="match_parent"
            android:layout_height="275dp"
            app:title="Mosteiro dos Jerónimos"
            app:expandedTitleMarginBottom="94dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/CollapsingTextAppearance.Inverse"
            app:contentScrim="?attr/colorPrimary"
            >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:src="@drawable/mosteiro_dos_jeronimos"
                android:scaleType="centerCrop"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/flexible.example.toolbar"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:background="@null"
                app:layout_collapseMode="pin"
                app:title="Mosteiro dos Jerónimos"
                style="@style/ToolBarWithNavigationBack"
                />
        </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:scrollbars="none"
        app:behavior_overlapTop="78dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <android.support.v7.widget.CardView
                android:id="@+id/flexible.example.cardview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentPaddingBottom="16dp"
                app:contentPaddingLeft="16dp"
                app:contentPaddingRight="16dp"
                app:cardCornerRadius="16dp"
                app:cardBackgroundColor="@android:color/white"
                app:cardElevation="4dp"
                >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    >

                    <View
                        android:id="@+id/myRectangleView"
                        android:layout_width="40dp"
                        android:layout_height="4dp"
                        android:layout_gravity="center"
                        android:layout_marginTop="4dp"
                        android:background="@drawable/rectangle"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lisboa"
                        android:textAppearance="@style/TextAppearance.Header"
                        style="@style/TextComponent.ItemRow"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:fontFamily="sans-serif-light"
                        android:lineSpacingExtra="8dp"
                        android:textSize="16sp"
                        android:text="@string/lorem"
                        />
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/flexible.example.fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="32dp"
        android:elevation="8dp"
        android:src="@drawable/ic_adb_24dp"
        app:layout_anchor="@id/flexible.example.cardview"
        app:layout_anchorGravity="top|right|end"
        tools:ignore="RtlHardcoded"
        />
</android.support.design.widget.CoordinatorLayout>

Answer 1

我认为您的布局很好（在我这边工作），但也许您想要的行为更像是 Bottomsheet 行为。

Have you had a look at it?

基本上，这将使您能够使用谷歌地图之类的东西，因此您可以随心所欲地滚动。

Here is a tutorial to have a better understanding of what it is like.

如果这是您要找的，请告诉我。