我在 recyclerview 中使用 viewpager2，但图像没有输出。为什么？

Question

无论我做什么，图片都不显示。

即使我设置items匹配parent，我还是有同样的问题，我从早上就开始处理了，如果我找到了，我会很放松的:D

这是我的 viewpager 2 适配器：

    class ViewPagerAdapter ( private val context : Context , private val album_id : Int , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<ViewPagerAdapter.PagerHolder>()  {
    
        inner class PagerHolder (view : View ) : RecyclerView.ViewHolder ( view ) {
    
            var image_view : ImageView
    
            init {
    
                image_view = view.findViewById ( R.id.pager_imageview )
            }
        }
    
        override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : PagerHolder {
    
            val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.viewpager_item , parent , false )
    
            return PagerHolder ( v )
        }
    
        override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    
            val list = photo_list.filter { it.albumId == album_id }
    
            for ( i in list [ position ].url ) {
    
                    Glide.with ( context ).load ( i.toString() ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
            }
        }
    
        override fun getItemCount ( ) : Int {
    
            return photo_list.size
        }
    }

这是我的 viewpager 项目的 xml 代码：

    <androidx.cardview.widget.CardView 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"
        app:cardCornerRadius="20dp">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <ImageView
                android:id="@+id/pager_imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.cardview.widget.CardView>

这是我的 recyclerview 定义的代码：

class AlbumRecyclerAdapter (  private val context : Context , private val album_list : ArrayList<Albums> , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<AlbumRecyclerAdapter.Adapterholder>() {

    inner class Adapterholder(view : View) : RecyclerView.ViewHolder(view) {

        var album_title : TextView

        var view_pager2 : ViewPager2

        init {

            album_title = view.findViewById(R.id.album_title)

            view_pager2 = view.findViewById ( R.id.view_pager2 )
        }
    }

    override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : Adapterholder {

        val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.album_recycler_list , parent , false )

        return Adapterholder(v)
    }

    override fun onBindViewHolder ( holder : AlbumRecyclerAdapter.Adapterholder , position : Int) {

        val pager_adapter = ViewPagerAdapter ( context , album_list [ position ].id ,  photo_list )

        holder.view_pager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL
        holder.view_pager2.adapter = pager_adapter
        holder.view_pager2.clipToPadding = false
        holder.view_pager2.clipChildren = false
        holder.view_pager2.offscreenPageLimit = 3
        holder.view_pager2.getChildAt ( 0 ).overScrollMode = RecyclerView.OVER_SCROLL_NEVER

        holder.album_title.text = album_list [ position ].title
    }

    override fun getItemCount ( ) : Int {

        return album_list.size
    }
}

最后，这是我的 xml recyclerview 代码：

<androidx.cardview.widget.CardView 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="300dp"
    android:layout_marginTop ="10dp"
    android:layout_marginLeft ="5dp"
    android:layout_marginRight="5dp"
    app:cardCornerRadius="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/album_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="Album Title"
            app:autoSizeTextType="uniform"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_pager2" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Answer 1

我是 Java 开发人员，所以我无法使用 Kotlin 进行编码，但我会向您展示如何在 ViewPager.

上显示图像

首先，从 onBindViewHolder 中删除 for ( i in list [ position ].url )。并直接从 photo_list.get(position).getImage 加载，如下所示

override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    
            val list = photo_list.filter { it.albumId == album_id }
    
                    Glide.with ( context ).load ( photo_list.get(position).getImage // your imageModel ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
        }

确保将我的代码中的 JAVA 更改为 Kotlin。如果您有任何问题，请告诉我

Answer 2

不是传递整个 photo_list 然后 filter 在 ViewPager 中传递它，而是只传递 filtered 列表给它。因为在 getItemCount 中您返回的是整个 photo_list 的大小，但在 onBindViewHolder 中您访问的是 filtered 列表，这可能会导致崩溃，因为 filtered 列表将小于原始列表。

在 AlbumRecyclerAdapter 的 onBindViewHolder 中将过滤后的列表传递给 ViewPager 适配器。

val pager_adapter = ViewPagerAdapter ( 
    context , 
    album_list [ position ].id ,  
    ArrayList(photo_list.filter { it.albumId == album_list[position].id }
)

在 ViewPagerAdapter 的 onBindViewHolder() 中，你为什么要迭代 url 而我假设你的 url 是 String 并且当你迭代时在它上面，它循环遍历字符串的所有单个字符，这就是为什么您首先看不到任何图像的原因。

override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    val photo = photo_list[position]
    
    Glide.with ( context )
        .load ( photo.url )
        .diskCacheStrategy ( DiskCacheStrategy.ALL )
        .into ( holder.image_view )
}

我在 recyclerview 中使用 viewpager2，但图像没有输出。为什么？

I am using viewpager2 inside a recyclerview but the images are not outputting. Why?

android

kotlin

android-studio

android-recyclerview

android-viewpager2