在安卓底部视图上静态显示页脚视图

Question

我正在尝试在Android的bottomsheet上制作一个静态页脚。下面是我当前尝试的GIF。请注意，当它完全展开时，在页面底部的footer文本。我希望这个页脚文本无论表格处于什么状态都能始终显示。(例如，如果表格只展开了一半，页脚仍应该显示。随着表格的展开/折叠，页脚仍然应该始终显示等。) 我该如何实现这种行为？我已经看过了这个：https://github.com/umano/AndroidSlidingUpPanel 但我更喜欢得到一个不涉及任何外部库的原生安卓解决方案。

这是我的当前XML。我认为问题在于页脚被锚定在视图底部，但只有在表格完全展开时才能看到视图底部。我想知道是否可以让页脚在任何状态下都显示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:airbnb="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusableInTouchMode="true"
        android:orientation="vertical"
        android:id="@+id/linear_layout_container">

        <TextView
            android:id="@+id/header_text"
            android:layout_width="match_parent"
            android:text="Header"
            android:layout_height="36dp"
            android:layout_alignParentTop="true"
            />

        <com.airbnb.epoxy.EpoxyRecyclerView
            android:id="@+id/bottom_sheet_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            airbnb:layoutManager="LinearLayoutManager"
            android:layout_above="@+id/footer_text"
            android:layout_below="@+id/header_text"
            />
        <TextView
            android:id="@+id/footer_text"
            android:layout_width="match_parent"
            android:text="Footer"
            android:layout_height="36dp"
            android:layout_alignParentBottom="true"
            airbnb:layout_anchorGravity="bottom"
            />
    </RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这是我的fragment样式。它只是一个空白的fragment，显示底部sheet：ContainerFragment.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.LinearLayoutManager
import com.airbnb.epoxy.EpoxyRecyclerView
import com.google.android.material.bottomsheet.BottomSheetDialog

class ContainerFragment : Fragment() {


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.container_fragment_layout, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.alpha = 0f
        val bottomSheet = BottomSheetDialog(requireContext())
        val bottomSheetView = LayoutInflater.from(context).inflate(R.layout.test_bottom_sheet_layout, null)
        bottomSheet.setContentView(bottomSheetView)
        bottomSheet.show()
        val epoxyRecyclerView : EpoxyRecyclerView = bottomSheetView.findViewById(R.id.bottom_sheet_recycler_view)
        epoxyRecyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
        epoxyRecyclerView.withModels {
            (0..100).forEach {
                basicRow {
                    id(it)
                    title("This is the entry at index $it.")
                }
            }
        }
    }
    companion object {
        fun newInstance() = ContainerFragment()
    }
}

这是我的片段布局：container_fragment_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

</LinearLayout>

- Ryan

---

我们正在面临相同的问题，你找到任何解决方案了吗？ - droidster.me

我们最终使用了一个 Dialog 而不是底部工作表。在 Dialog 上，保持静态页脚非常容易。但我真的很想知道在底部工作表上是否也可能实现这一点。 - Ryan

Answer 1

你需要以编程方式完成它，但实际上比看起来要简单得多。只需在BottomSheet滑动时调整View的位置即可。

1. 将页脚视图添加为BottomSheet的直接子项

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#EECCCCCC"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <TextView
            android:id="@+id/pinned_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#500000FF"
            android:padding="16dp"
            android:text="Bottom" />
    </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 添加一个BottomSheetCallback，并在onSlide()方法中调整translationY。

BottomSheetBehavior.from(bottom_sheet).addBottomSheetCallback(
    object : BottomSheetBehavior.BottomSheetCallback() {

        override fun onSlide(bottomSheet: View, slideOffset: Float) {
            val bottomSheetVisibleHeight = bottomSheet.height - bottomSheet.top

            pinned_bottom.translationY =
                (bottomSheetVisibleHeight - pinned_bottom.height).toFloat()
        }

        override fun onStateChanged(bottomSheet: View, newState: Int) {
        }
    })

由于你只是改变了 translationY，所以它运行得很流畅。

你还可以使用这种技术将一个 View 固定在 BottomSheet 的中心位置:

pinned_center.translationY = (bottomSheetVisibleHeight - pinned_center.height) / 2f

我已经在 GitHub 上创建了一个示例项目，用于重现两种用例（固定在中心和底部）：https://github.com/dadouf/BottomSheetGravity

- David Ferrand

---

如果底部表单中包含可滚动内容，如RecyclerView或ScrollView，则无法正常工作。 - Максим Петлюк

你有关于可滚动内容的解决方案吗？我正在面临同样的问题。 - geek919

@МаксимПетлюк 的想法是，固定视图需要放在 RecyclerView 适配器或 ScrollView 之外。例如：将底部表格作为 FrameView，将滚动容器和固定视图都添加为其子项。 - David Ferrand

@DavidFerrand 有没有可能在 BottomSheetDialogFragment 中使用？ - Alessandro Scarozza

@DavidFerrand 它可以工作，但我需要在oncreate内手动调用“onSlide”。我不知道为什么。你不需要吗？ - Alessandro Scarozza

Answer 2

@DavidFerrand 使用Insead的BottomSheetDialogFragment

val behavior: BottomSheetBehavior<*> = (dialog as BottomSheetDialog).behavior
behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
    override fun onStateChanged(bottomSheet: View, newState: Int) {}
    override fun onSlide(bottomSheet: View, slideOffset: Float) {
        binding.bottom.y = ((bottomSheet.parent as View).height - bottomSheet.top - binding.bottom.height).toFloat()
    }
}.apply {
    binding.root.post { onSlide(binding.root.parent as View, 0f) }
})

- Alessandro Scarozza