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

青春壹個敷衍的年華 提交于 2021-02-11 15:42:58

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!