如何像最近的Google设计一样使AppBarLayout浮动在内容上方

时间:2019-04-12 23:57:26

标签: android android-layout layout material-design

我正在尝试重新创建this design屏幕截图未显示它,但是如果用户向下滚动一些并向后稍微向上滚动,则工具栏将悬停在电子邮件内容上方。

另一方面,我的应用看起来像这样

Toolbar has its own space so you can not see the list content below it

如您所见,appbarlayout空间下方有一个列表,该列表将卡内容隐藏在其下方。该应用栏布局具有透明背景,因此不确定为什么会发生这种情况。

这是相关的布局文件:

<androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/content"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:animateLayoutChanges="false"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
                android:id="@+id/refresh"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/timeline"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:animateLayoutChanges="false"
                    tools:listitem="@layout/custom_row_tweet" />

            </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/top_offset"
                android:background="#00000000"
                android:fitsSystemWindows="true"
                app:elevation="0dp">

                <com.google.android.material.card.MaterialCardView
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center_horizontal"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="4dp"
                    android:onClick="searchTweets"
                    app:cardCornerRadius="8dp"
                    app:cardElevation="8dp"
                    app:layout_scrollFlags="scroll|enterAlways">

                    ...

                </com.google.android.material.card.MaterialCardView>

            </com.google.android.material.appbar.AppBarLayout>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:onClick="addClick"
                android:src="@drawable/ic_tweet"
                android:tag="0"
                app:fabSize="normal"
                app:layout_anchor="@+id/timeline"
                app:layout_anchorGravity="end|bottom" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

我不久前看到一个答案,建议给出负的页边距并将占位符项添加为列表中的第一项,但是不幸的是,由于我正在使用PagedListAdapter直接从数据库中获取项,因此很难做到这一点。

>

1 个答案:

答案 0 :(得分:0)

尝试类似方法时,我也遇到了同样的问题。我能够实现的是:Recycler view top padding = status bar height + toolbar height。不幸的是,我在这里没有使用任何行为,并且工具栏的位置是固定的。 这是我实现此目标的方法:

<FrameLayout 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_width="match_parent"
android:layout_height="match_parent"
android:background="?primaryColor"
tools:context=".ui.fragments.mainactivity.library.LibraryFragment">

<com.simplecityapps.recyclerview_fastscroll.views.FastScrollRecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:scrollbars="none" />

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

    <com.paolovalerdi.abbey.views.StatusBarView
        android:id="@+id/statusBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/status_bar_padding" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/Toolbar"
            android:elevation="0dp"
            app:contentInsetStart="0dp"
            tools:ignore="UnusedAttribute">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/userImage"
                    style="@style/ToolbarIcon"
                    android:layout_alignParentStart="true"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="@dimen/default_item_margin"
                    android:padding="8dp"
                    android:src="@drawable/default_artist_image"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:id="@+id/toolbarTile"
                    style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center_horizontal"
                    android:singleLine="true"
                    android:text="@string/library"
                    android:textColor="?android:textColorPrimary"
                    tools:ignore="RelativeOverlap,RtlSymmetry" />

                <com.paolovalerdi.abbey.views.IconImageView
                    android:id="@+id/searchIcon"
                    style="@style/ToolbarIcon"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/default_item_margin"
                    android:src="@drawable/ic_search" />

            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>

        <ViewStub
            android:id="@+id/cab_stub"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize" />

    </FrameLayout>

</LinearLayout>

StatusBarView.Kt

class StatusBarView : View {

constructor(context: Context) : super(context)

constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

constructor(
        context: Context,
        attrs: AttributeSet,
        defStyleAttr: Int
) : super(
        context,
        attrs,
        defStyleAttr
)

override fun onApplyWindowInsets(insets: WindowInsets): WindowInsets {
    val lp = layoutParams
    lp.height = insets.systemWindowInsetTop
    layoutParams = lp
    return super.onApplyWindowInsets(insets)
}

所有您需要做的就是将padding-top应用于回收者视图:

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    ViewCompat.requestApplyInsets(view)
    ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
        topPadding = insets.systemWindowInsetTop + resources.getDimensionPixelSize(R.dimen.mini_player_height)
        recyclerView.updatePadding(top = topPadding)
        insets
    }
}

请注意,我请求插入是因为这是在一个片段中完成的,然后您所要做的只是将侦听器设置为根视图(或您的recyclerview)。此外,您的回收者视图还应包含剪辑android:clipToPadding =“ false”。 希望这会有所帮助:)

我将留下一些有助于我理解如何像专家一样处理插图的帖子。

Windows Insets + Fragment TransitionsWindowInsets — Listeners to layouts