Android底页上的静态页脚视图

Posted 2023-04-18

【中文标题】Android底页上的静态页脚视图

【英文标题】：Static Footer View On Android Bottom Sheet

【发布时间】：2020-02-06 02:26:50

【问题描述】：

我正在尝试在 android 的底页上制作 静态页脚。下面是我当前尝试的 GIF。当工作表完全展开时，请注意工作表底部的 footer 文本。无论工作表处于何种状态，我都希望此页脚文本始终显示。（例如，如果工作表仅展开一半，页脚仍应显示。当工作表展开/折叠时，页脚仍应始终显示等）我怎样才能完成这种行为？我看过这个：https://github.com/umano/AndroidSlidingUpPanel，但我更愿意得到一个不涉及任何外部库的 vanilla android 解决方案。

这是我当前的 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_
    android:layout_>
    <RelativeLayout
        android:layout_
        android:layout_
        android:focusableInTouchMode="true"
        android:orientation="vertical"
        android:id="@+id/linear_layout_container">

        <TextView
            android:id="@+id/header_text"
            android:layout_
            android:text="Header"
            android:layout_
            android:layout_alignParentTop="true"
            />

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

这是我的片段的样子。它只是一个显示底部工作表的空白片段： 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_
    android:layout_>

</LinearLayout>

【问题讨论】：

我们面临同样的问题，您找到解决方案了吗？

我们最终使用了Dialog 而不是底页。在Dialogs 上，保持静态页脚非常容易。真的很想知道它是否可以在底片上。

【参考方案1】：

您需要以编程方式执行此操作，但它确实比看起来更简单。只需在 BottomSheet 滑动时调整 View 的位置。

将页脚视图添加为 BottomSheet 的直接子级

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_
    android:layout_>

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

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

在 onSlide() 中添加 BottomSheetCallback 并调整 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) 
        
    )

它运行顺利，因为你只是改变了翻译Y。

您还可以使用此技术将 View 固定在 BottomSheet 的中心：

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

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

【讨论】：

它不适用于可滚动内容 - 如果您在底页中有 recyclerview 或 scrollview。

您有任何可滚动内容的解决方案吗？我面临同样的问题

对于可滚动的内容，我使用了setY() 而不是setTranslationY()，效果非常棒。

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

@DavidFerrand 是否有可能在 BottomSheetDialogFragment 中使用？

【参考方案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) 
)