如何在RecyclerView末尾添加“显示更多”按钮?

时间:2018-03-31 17:28:28

标签: android android-layout android-recyclerview kotlin android-viewholder

这是我必须创建的屏幕:

enter image description here

问题是这个“>”列表末尾的图标。我不确定它是否必须在列表上方,如浮动按钮或它是否应该是列表中最后一项的一部分(如图像上方的图像框架布局)?不太确定。

我会发布我的布局和适配器,我想问你是否有人有类似的任务/问题。

活动的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbarImageDetails"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ToolbarColoredBackArrow" />

<android.support.design.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"
    android:orientation="vertical">

    <ImageView
        android:paddingTop="?attr/actionBarSize"
        android:id="@+id/imageDetails"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="130dp"
        android:scaleType="centerCrop"
        android:src="@drawable/thumbnail" />

    <TextView
        android:id="@+id/imageNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="170dp"
        android:layout_marginStart="20dp"
        android:background="@drawable/shape_image_number"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="16sp"
        android:visibility="gone"
        app:layout_anchor="@id/imageDetails"
        app:layout_anchorGravity="bottom"
        tools:text="1 of 7" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginBottom="150dp"
        android:background="@color/button_grey"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_anchor="@id/imageDetails"
        app:layout_anchorGravity="bottom" />


    <include layout="@layout/bottom_sheet_details" />


</android.support.design.widget.CoordinatorLayout>

这是Adapter的ViewHolder的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/imageHolder"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_margin="10dp"
    android:src="@drawable/thumbnail" />

这是我的适配器:

    class ImageDetailsAdapter(private val context: Context, private val listener: ImageDetailsIconClickListener) : RecyclerView.Adapter<ImageDetailsAdapter.ImageDetailsViewHolder>() {
    private val imagesList = ArrayList<String>()

    fun setImages(images: List<String>) {
        imagesList.clear()
        imagesList.addAll(images)
        notifyDataSetChanged()
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageDetailsViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.view_holder_image_details, parent, false)
        return ImageDetailsViewHolder(view, context)
    }

    override fun onBindViewHolder(holder: ImageDetailsViewHolder, position: Int) {
        val imageUrl = getImage(position)
        if (imageUrl != null) {
            holder.loadImage(imageUrl)
        }
    }

    private fun getImage(position: Int): String? {
        return if (imagesList.isEmpty()) null else imagesList[position]
    }

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

    inner class ImageDetailsViewHolder(itemView: View, private val context: Context) : RecyclerView.ViewHolder(itemView) {
        private val imageView: ImageView = itemView.findViewById(R.id.imageHolder)

        init {
            imageView.setOnClickListener { listener.onImageClick(adapterPosition) }
        }

        fun loadImage(imageUrl: String) {
            GlideApp.with(context)
                    .load(GlideUrl(imageUrl, AuthentificationGlideHeaders.headers))
                    .error(R.drawable.show_more_btn_background)
                    .dontAnimate()
                    .placeholder(R.drawable.ic_home)
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(imageView)
        }
    }
}

1 个答案:

答案 0 :(得分:0)

在RecycleView中使用多个布局,最后一项是添加更多视图。 查看此文章:http://www.codexpedia.com/android/android-recyclerview-with-multiple-different-layouts/