Переделка пользовательского интерфейса комментариев TikTok: Sticky EditText внизу

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

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

Переделка пользовательского интерфейса комментариев TikTok: Sticky EditText внизу

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

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

Переделка пользовательского интерфейса комментариев TikTok: Sticky EditText внизу

Разве вы не можете просто добавить отступ в нижней части RecyclerView, чтобы он оставался поверх EditText, чтобы последний элемент не закрывался?

Jack 22.04.2019 05:16

@jackz314 Отлично. Не стесняйтесь добавлять это в качестве ответа!

code 23.04.2019 17:56

Я только что сделал. Проверьте, если это то, что вы собираетесь

Jack 23.04.2019 22:19
0
3
604
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

@Abhishek Soni, вы пробовали, как указано выше в моем ответе?

Hemant N. Karmur 22.04.2019 06:47

@Abhishek Soni, если мой ответ полезен для вас, вы можете проголосовать и принять мой ответ, так что это будет полезно для других, у которых такая же проблема.

Hemant N. Karmur 22.04.2019 06:49
Ответ принят как подходящий

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

Потрясающий! Спасибо за вашу помощь. :)

code 24.04.2019 06:38

Другие вопросы по теме