ViewPager2 滑动图片浏览

1. 基于 “Gallery 简易图片浏览” 添加

Gallery 简易图片浏览https://blog.csdn.net/u011193452/article/details/127006679

2. ViewPager 适配器

  2.1 适配器布局文件 pager_photo_view.xml

<?xml version="1.0" encoding="utf-8"?>
<io.supercharge.shimmerlayout.ShimmerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/shimmerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/pagerPhoto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true" />
</io.supercharge.shimmerlayout.ShimmerLayout>

  2.2 创建 ViewPager 适配器 PagerPhotoListAdapter.kt

class PagerPhotoListAdapter : ListAdapter<PhotoItem, PagerPhotoViewHolder>(DiffCallback) {

    object DiffCallback : DiffUtil.ItemCallback<PhotoItem>() {
        override fun areItemsTheSame(oldItem: PhotoItem, newItem: PhotoItem): Boolean {
            return oldItem == newItem
        }
        override fun areContentsTheSame(oldItem: PhotoItem, newItem: PhotoItem): Boolean {
            return oldItem.photoId == newItem.photoId
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerPhotoViewHolder {
        return PagerPhotoViewHolder(
            LayoutInflater.from(parent.context).inflate(R.layout.pager_photo_view, parent, false)
        )
    }

    override fun onBindViewHolder(holder: PagerPhotoViewHolder, position: Int) {
        holder.view.shimmerLayout.apply {
            setShimmerColor(0x55FFFFFF)
            setShimmerAngle(0)
            startShimmerAnimation()
        }
        Glide.with(holder.itemView)
            .load(getItem(position).fullUrl)
            .placeholder(R.drawable.ic_photo_place_holder)
            .listener(object : RequestListener<Drawable> {
                override fun onLoadFailed(
                    e: GlideException?,
                    model: Any?,
                    target: Target<Drawable>?,
                    isFirstResource: Boolean
                ): Boolean {
                    return false
                }
                override fun onResourceReady(
                    resource: Drawable?,
                    model: Any?,
                    target: Target<Drawable>?,
                    dataSource: DataSource?,
                    isFirstResource: Boolean
                ): Boolean {
                    return false.also { holder.view.shimmerLayout.stopShimmerAnimation() }
                }
            })
            .into(holder.view.pagerPhoto)
    }
}

class PagerPhotoViewHolder(itemView: View) : ViewHolder(itemView) {
    val view = PagerPhotoViewBinding.bind(itemView)
}

3. ViewPager 浏览图片页

  3.1 Fragment 导航布局, navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/navigation"
    app:startDestination="@id/galleryFragment">
    <fragment
        android:id="@+id/galleryFragment"
        android:name="com.example.gallery.GalleryFragment"
        android:label="Gallery"
        tools:layout="@layout/fragment_gallery">
        <action
            android:id="@+id/action_galleryFragment_to_pagerPhotoFragment"
            app:destination="@id/pagerPhotoFragment" />
    </fragment>
    <fragment
        android:id="@+id/pagerPhotoFragment"
        android:name="com.example.gallery.PagerPhotoFragment"
        android:label="PagerPhoto"
        tools:layout="@layout/fragment_pager_photo" />
</navigation>

  3.2 布局文件 frament_pager_photo.xml  

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:drawable/screen_background_dark"
    tools:context=".PagerPhotoFragment">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp" />

    <TextView
        android:id="@+id/photoTag"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        android:gravity="bottom|center_horizontal"
        android:text="@string/hello_blank_fragment"
        android:textColor="@color/white"
        android:textSize="20sp" />
</FrameLayout>

  3.3 传人值实现 GalleryAdapter.kt

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val holder = MyViewHolder(
            LayoutInflater.from(parent.context).inflate(R.layout.gallery_cell, parent, false)
        )
        holder.itemView.setOnClickListener {
            Bundle().apply {
                //putParcelable("PHOTO", getItem(holder.adapterPosition))
                //holder.itemView.findNavController().navigate(R.id.action_galleryFragment_to_photoFragment,this)
                putParcelableArrayList("PHOTO_LIST", ArrayList(currentList))
                putInt("PHOTO_POSITION", holder.adapterPosition)
                holder.itemView.findNavController().navigate(R.id.action_galleryFragment_to_pagerPhotoFragment,this)
            }
        }
        return holder
    }

  3.4 实现ViewPager页 PagerPhotoFragment.kt

class PagerPhotoFragment : Fragment() {
    private lateinit var binding: FragmentPagerPhotoBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        binding = FragmentPagerPhotoBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val photoList = arguments?.getParcelableArrayList<PhotoItem>("PHOTO_LIST")
        PagerPhotoListAdapter().apply {
            binding.viewPager2.adapter = this
            submitList(photoList)
        }
        
        binding.viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                binding.photoTag.text = "${position + 1}/${photoList?.size}"
            }
        })
        binding.viewPager2.setCurrentItem(arguments?.getInt("PHOTO_POSITION") ?: 0, false)
    }
}

4. 效果图

代码007普通

打赏 收藏 海报 链接