android - добавить заголовок выше RecyclerView

Question

Мне нужно добавить заголовок выше RecyclerView в моем приложении. заголовок должен перемещаться по мере того, как пользователь прокручивает окно реселлера (рисунок справа). Я уже искал, но не нашел окончательного простого решения. Каков наилучший и простой способ его реализации?

кредит изображения: ссылка

Answer 1

Для этого у вас есть 2 варианта.

1. Первое и простое: вы можете добавить ImageView в CollapsingToolbarLayout внутри CoordinatorLayout, а затем добавить app:layout_behavior="@string/appbar_scrolling_view_behavior" в RecyclerView

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content>

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>

                    <androidx.appcompat.widget.Toolbar
                        android:layout_width="match_parent"
                        android:layout_height="?actionBarSize"
                        app:layout_collapseMode="pin"/>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/transparent"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Второй вариант, который будет иметь тот же эффект при прокрутке, заключается в том, что в вашем ReyclerViewAdapter он распознает 2 вида viewTypes, один для изображения и другой для элементов, таким образом, вы должны передать изображение в качестве первого элемента вашего список предметов

class CustomAdapter(
            private var list: ArrayList<String>
    ) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {


        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
            return if (viewType == VIEW_TYPE_ONE) {
                ViewHolder1(LayoutInflater.from(context).inflate(R.layout.your_list_item_1, parent, false))
            } else ViewHolder2(LayoutInflater.from(context).inflate(R.layout.your_list_item_2, parent, false))
        }

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            if (position == 0) {
                (holder as ViewHolder1).bind(position)
            } else {
                (holder as ViewHolder2).bind(position)
            }
        }

        override fun getItemCount(): Int {
            return list.size
        }

        override fun getItemViewType(position: Int): Int {
            return if (position == 0) {
                VIEW_TYPE_ONE
            } else VIEW_TYPE_TWO
        }


        private inner class ViewHolder1 internal constructor(itemView: View) : RecyclerView.ViewHolder(itemView) {

            var yourView: ImageView  = itemView.findViewById(R.id.yourView)

            fun bind(position: Int) {
                yourView.setImageResource(list[position])
            }
        }

        private inner class ViewHolder2 internal constructor(itemView: View) : RecyclerView.ViewHolder(itemView) {

            var yourView: TextView = itemView.findViewById(R.id.yourView)

            fun bind(position: Int) {
                yourView.text = list[position]
            }
        }

        companion object {
            private const val VIEW_TYPE_ONE = 1
            private const val VIEW_TYPE_TWO = 2
        }