重新制作TikTok的注释UI:底部的Sticky EditText [英] Remaking TikTok's comments UI: Sticky EditText at the bottom

问题描述

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

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

这是它的样子(原始):

This is how it looks like (ORIGINAL):

这是我现在尝试的方法:基本上，我有一个FrameLayour，它的第一个孩子包含除EditText之外的其他东西，第二个孩子当然是EditText.

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>

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

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.

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

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.

推荐答案

您可以在 RecyclerView 的底部添加填充，以使填充始终位于 EditText的顶部.这样， EditText 会显示为粘性"，而 EditText

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

这篇关于重新制作TikTok的注释UI:底部的Sticky EditText的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！