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

时间:2018-10-20 08:15:48

标签: java android xml layout android-coordinatorlayout

我有一个布局,其中卡片视图锚定到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

enter image description here

1 个答案:

答案 0 :(得分:0)

发生这种情况的原因是:

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内容重叠的视图。