Переделка пользовательского интерфейса комментариев TikTok: Sticky EditText внизу - PullRequest
0 голосов
/ 22 апреля 2019

Проблема: Я пытаюсь переделать пользовательский интерфейс комментариев TikTok, используя BottomSheetDialogFragment и RecyclerView.

Вот как это выглядит (ОРИГИНАЛ):

enter image description here

Это то, что я сейчас пробовал: в основном, у меня есть 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 станет видимым только тогда, когда нижняя таблица будет в полноэкранном режиме.

Проблема: проблема теперь в том, что текст редактирования всегда находится поверх представления recylcer. Это то, что я хочу, но это породило новую проблему: после прокрутки до конца списка (recylcerview) последний элемент не полностью виден, поскольку он скрыт EditText.

enter image description here

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Вы можете добавить отступ в нижней части вашего RecyclerView, чтобы он всегда оставался поверх EditText.Таким образом, EditText выглядит «липким», а RecyclerView не будет покрываться EditText

0 голосов
/ 22 апреля 2019

Просто используйте линейную компоновку в качестве корня и примените вес для повторного просмотра.

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