Remaking TikTok's comments UI: Sticky EditText at the bottom

问题

Problem: I am trying to remake TikTok's comments UI using a BottomSheetDialogFragment and a RecyclerView.

This is how it looks like (ORIGINAL):

This is what I have tried for now: Basically, I have a FrameLayour whose first child contains eveerything other than the EditText and the second child is, of course, the EditText.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <TextView
            android:id="@+id/no_of_comments"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:text="30.8k comments"
            android:gravity="center_vertical|center_horizontal"
            android:textColor="@color/darkGreyText" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="300dp">

            <androidx.recyclerview.widget.RecyclerView
                tools:listitem="@layout/item_comment"
                android:id="@+id/comments_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </ScrollView>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
       >

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/border_edit_text"
            android:hint="Leave a comment"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12sp" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/bleh"
            android:background="@android:color/white"
            android:alpha="0.3"
            android:layout_alignParentRight="true"
            android:hapticFeedbackEnabled="true"
            />

    </RelativeLayout>

</FrameLayout>

Note that I have a fixed size ScrollView so that the edittext is always visible on the screen. If I remove that, the EditText only becomes visible when the bottomsheet is full screen.

Problem: The problem now is, that the edittext sits on top of the recylcer view at all times. That is what I want, but it introduced a new problem: After scrolling to the bottom of the list (recylcerview), the last item is not completely visible as it is hidden by the EditText.

回答1:

You can add a padding to the bottom of your RecyclerView so that it always stays on top of the EditText. This way, the EditText appears "sticky" and the RecyclerView won't be covered by EditText

回答2:

Just use linear layout as root and apply weight to recycle view.

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

    <TextView
        android:id="@+id/no_of_comments"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:text="30.8k comments"
        android:gravity="center_vertical|center_horizontal"
        android:textColor="@color/darkGreyText" />



        <androidx.recyclerview.widget.RecyclerView
            tools:listitem="@layout/item_comment"
            android:id="@+id/comments_list"
            android:layout_width="match_parent"
            android:layout_weight="1"         
            android:layout_height="0dp" />




<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:layout_gravity="bottom"
   >

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/border_edit_text"
        android:hint="Leave a comment"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textSize="12sp" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/bleh"
        android:background="@android:color/white"
        android:alpha="0.3"
        android:layout_alignParentRight="true"
        android:hapticFeedbackEnabled="true"
        />

   </RelativeLayout>
</LinearLayout>

来源：https://stackoverflow.com/questions/55788594/remaking-tiktoks-comments-ui-sticky-edittext-at-the-bottom