在 behavior_overlapTop 的 CoordinatorLayout 中使用浮动操作按钮
using floating action button in CoordinatorLayout with behavior_overlapTop
-
android
-
floating-action-button
-
android-collapsingtoolbarlayout
-
android-appbarlayout
-
android-nestedscrollview
我正在尝试在 CoordinatorLayout
中添加 floating action button
,其中 NestedScrollView
的 56dp
为 app:behavior_overlapTop
。
我的 fab 的 layout_anchor
设置在 Appbar
并且当 CollapsingToolbarLayout
崩溃时它隐藏得很好,但是由于 overlapTop
设置在 NestedScrollView
,它是位置不好..见下图:
这是我的 XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="@dimen/status_margin_top"
android:id="@+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="@color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="@dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="@drawable/appbar_gradient"
android:id="@+id/profile_pic"
app:srcCompat="@drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="@+id/toolbar"
app:titleMarginTop="@dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="@dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="@drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="@color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="@id/nestedscrollview"
app:srcCompat="@drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
尝试在崩溃时使用 this 和 hide()
fab 来触发 Appbar 崩溃事件!
android
floating-action-button
android-collapsingtoolbarlayout
android-appbarlayout
android-nestedscrollview
我正在尝试在 CoordinatorLayout
中添加 floating action button
,其中 NestedScrollView
的 56dp
为 app:behavior_overlapTop
。
我的 fab 的 layout_anchor
设置在 Appbar
并且当 CollapsingToolbarLayout
崩溃时它隐藏得很好,但是由于 overlapTop
设置在 NestedScrollView
,它是位置不好..见下图:
这是我的 XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="@dimen/status_margin_top"
android:id="@+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="@color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="@dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="@drawable/appbar_gradient"
android:id="@+id/profile_pic"
app:srcCompat="@drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="@+id/toolbar"
app:titleMarginTop="@dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="@dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="@drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="@color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="@id/nestedscrollview"
app:srcCompat="@drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
尝试在崩溃时使用 this 和 hide()
fab 来触发 Appbar 崩溃事件!