协调器布局锚点 (Java/Android/XML)

Question

我有一个布局，其卡片视图锚定到 CoordinatorLayout 中的 AppBarLayout。卡片视图用代码按比例缩小，直到我滚动到顶部时它达到所需的大小。 AppBarLayout 内的工具栏折叠，直到达到我设置的高度

以下是问题：

• 当我滚动到布局顶部时，卡片视图的一半位于 AppBarLayout 下方。
• 如果我使用不同的布局（而不是卡片视图），那么只有浮动操作按钮不会低于 AppBarLayout。

有谁知道我该如何解决这个问题？

这是我的 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: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.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:layout_scrollFlags="scroll|exitUntilCollapsed"

        >

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="bottom"
            android:paddingRight="5dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_collapseMode="pin"
             />


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

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


<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:clipToPadding="false"
    android:scrollbars="none"
    android:scrollingCache="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="vjdsflkjsdfjdsfj;adsjfjdsfl \n    
            kjsdfjdsfj;adsjfjdsflkjsdfjdsfj;adsjf"/>
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>



<android.support.v7.widget.CardView
    android:fitsSystemWindows="true"
    android:id="@+id/my_card"
    android:layout_width="@dimen/_270sdp"
    android:layout_height="150dp"
    android:layout_marginTop="-20dp"
    android:clickable="true"
    app:layout_collapseMode="parallax"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|center" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
        ></LinearLayout>
     </android.support.v7.widget.CardView>


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

这是我用于缩放的 java 代码：

        ((AppBarLayout) view.findViewById(R.id.app_bar_layout)).addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {


        int min_height = ViewCompat.getMinimumHeight(collapsing_toolbar) * 2;
        float scale = (float) (min_height + verticalOffset) / min_height;

        if (scale >= 0.6)
            cardView.setScaleY(scale >= 0 ? scale : 0);

    });

卡片视图低于AppBarLayout后：

enter image description here

Answer 1

发生这种情况是因为：

app:layout_collapseMode="parallax"

并将scroll|exitUntilCollapsed 添加到CollapsingToolbarLayout，这使得CardView 在折叠后低于AppBarLayout。

添加：

app:layout_collapseMode="pin" 

到CardView，然后删除app:layout_collapseMode="parallax"。

---

您还有另一个选项可以让它比这更漂亮。

检查这个答案：https://stackoverflow.com/a/48892896/4409113

下面是示例：https://github.com/saulmm/CoordinatorBehaviorExample

只需使用：

app:behavior_overlapTop="64dp"

到您希望它与CollapsingToolbarLayout 内容重叠的视图。