Question

问题：我正在尝试使用BottomSheetDialogFragment和RecyclerView重新制作TikTok的注释UI。

这是它的样子（原始）：

这是我现在尝试的方法：基本上，我有一个FrameLayour，它的第一个孩子包含除EditText之外的其他东西，第二个孩子当然是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>

请注意，我有一个固定大小的ScrollView，以便使edittext在屏幕上始终可见。如果我删除了该内容，则只有在底部全屏显示时，EditText才可见。

问题：现在的问题是，编辑文本始终都位于recylcer视图的顶部。那就是我想要的，但是它引入了一个新的问题：滚动到列表的底部（recylcerview）后，最后一个项目不完全可见，因为它被EditText隐藏。

Answer 1

您可以在RecyclerView的底部添加填充，以使填充始终位于EditText的顶部。这样，EditText显得“很粘”，RecyclerView不会覆盖EditText

Answer 2

只需将线性布局用作根，然后将权重应用于回收视图。

<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>

重新制作TikTok的注释UI：底部的Sticky EditText

2 个答案: