如何在Android Studio中实现个人主页带RecyclerView的可展开Bottom Sheet

Absolutely! This is a common and achievable pattern in Android. Let's break down how to modify your existing setup to get the expandable Bottom Sheet behavior when your post list exceeds 3 rows.

Step 1: Update Your Layout to Use CoordinatorLayout & BottomSheetBehavior #

First, you'll need to wrap your existing allPosts LinearLayout inside a CoordinatorLayout (since BottomSheetBehavior relies on this parent layout). We'll also add the necessary attributes to enable the bottom sheet behavior.

Here's the modified XML, keeping your original view attributes intact:

<!-- Wrap your entire content in CoordinatorLayout -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your existing user info layout (keep its original attributes) -->
    <LinearLayout
        android:id="@+id/userinfo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- ... your existing userinfo properties ... -->
        />

    <!-- Your post container, now configured as a Bottom Sheet -->
    <LinearLayout
        android:id="@+id/allPosts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:paddingTop="5dp"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:background="@drawable/rounded_behind_recycleview"
        android:orientation="vertical"
        android:elevation="1dp"
        <!-- Attach BottomSheetBehavior -->
        app:layout_behavior="@string/bottom_sheet_behavior">

        <com.taimoorsikander.myapplication.Widgets.B_RecycleView
            android:id="@+id/recycle_view"
            android:overScrollMode="never"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 2: Calculate Dynamic Peek Height (3 Rows of Posts) #

Hardcoding the collapsed height isn't reliable across devices. Instead, calculate the height of one post item, multiply by 3, and set that as the bottom sheet's peek height (the collapsed state height).

Add this code to your Activity/Fragment:

// Get references to your views
val bottomSheetLayout = findViewById<LinearLayout>(R.id.allPosts)
val recyclerView = findViewById<B_RecycleView>(R.id.recycle_view)

// Initialize BottomSheetBehavior
val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout)
bottomSheetBehavior.isHideable = false // Prevent the sheet from fully hiding

// Calculate height of a single post item
val postItemView = LayoutInflater.from(this).inflate(R.layout.your_post_item_layout, null)
postItemView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)
val singlePostHeight = postItemView.measuredHeight
val peekHeight = singlePostHeight * 3

// Set the calculated peek height
bottomSheetBehavior.peekHeight = peekHeight

Step 3: Enable Drag Only When Content Exceeds 3 Rows #

We only want the bottom sheet to be expandable if the total post content height exceeds the 3-row peek height. Add a listener to check the RecyclerView's content size once it's populated:

// Wait for RecyclerView to finish laying out its items
recyclerView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // Remove the listener to avoid repeated triggers
        recyclerView.viewTreeObserver.removeOnGlobalLayoutListener(this)

        // Calculate total content height of the RecyclerView
        val totalContentHeight = recyclerView.computeVerticalScrollRange()

        // Enable drag behavior only if content is taller than 3 rows
        bottomSheetBehavior.isDraggable = totalContentHeight > peekHeight

        // Lock the sheet in collapsed state if content fits in 3 rows
        if (totalContentHeight <= peekHeight) {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }
    }
})

Step 4: Optimize Scroll Behavior (Optional) #

When the bottom sheet is fully expanded, the RecyclerView should scroll normally. If you want to tweak behavior based on the sheet's state, add a callback:

bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
    override fun onStateChanged(bottomSheet: View, newState: Int) {
        // Disable RecyclerView scroll when sheet is collapsed (optional)
        recyclerView.isNestedScrollingEnabled = newState != BottomSheetBehavior.STATE_COLLAPSED
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {
        // Add custom slide animations here if needed
    }
})

Key Requirements #

• Ensure you have the AndroidX CoordinatorLayout dependency in your module-level build.gradle:

  implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
  

• Replace R.layout.your_post_item_layout with the actual layout file for your individual post items.
• Since your B_RecycleView extends RecyclerView, all the above logic will work seamlessly with it.

This setup will give you exactly what you want: the bottom sheet stays collapsed (showing 3 posts) when there are 3 or fewer posts, and becomes expandable (with scrollable content) when there are more than 3 posts.

内容的提问来源于stack exchange，提问作者SSS