ToB企服应用市场:ToB评测及商务社交产业平台

标题: Android---PhotoViewer实现图片预览 [打印本页]
作者: 勿忘初心做自己    时间: 2024-7-22 12:08
标题: Android---PhotoViewer实现图片预览
PhotoViewer 图片查看器模仿微信朋侪圈查看图片的效果。
在 Android 项目中引用 JitPack 库
 AGP 8.+ 根目录的 settings.gradle
  1. dependencyResolutionManagement {
  2.     ...
  3.     repositories {
  4.         ...
  5.         maven { url 'https://jitpack.io' }
  6.     }
  7. }
复制代码
 AGP 8.+ 根目录如果是  settings.gradle.kts 文件
  1. dependencyResolutionManagement {
  2.     ...
  3.     repositories {
  4.         ...
  5.         maven { url = uri("https://jitpack.io") }
  6.     }
  7. }
复制代码
 AGP 8.- 根目录的 build.gradle
  1. allprojects {
  2.     repositories {
  3.         ...
  4.         maven { url 'https://jitpack.io' }
  5.     }
  6. }
复制代码
添加依靠
  1. // 点击多张图片（类似微信朋友圈查看图片）。在图片列表中，点击某张图片可以放大，并且可以作用滑动
  2. // https://github.com/wanglu1209/PhotoViewer
  3. implementation 'com.github.wanglu1209:PhotoViewer:0.50'
复制代码
示例1：一张图片时（类似点击查看头像）

布局文件
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:gravity="center"
  6.     tools:context=".MainActivity">
  8.     <ImageView
  9.         android:id="@+id/PhotoViewer"
  10.         android:layout_width="150dp"
  11.         android:layout_height="150dp"
  12.         android:src="@drawable/header"/>
  14. </LinearLayout>
复制代码
MainActivity.kt
  1. class MainActivity : AppCompatActivity() {
  3.     private lateinit var Img : ImageView
  4.     override fun onCreate(savedInstanceState: Bundle?) {
  5.         super.onCreate(savedInstanceState)
  6.         setContentView(R.layout.activity_main)
  8.         val url = "https://dfzximg02.dftoutiao.com/news/20210308/" +
  9.                 "20210308134023_7a9ca0543b00332147c42e1ee4146908_0_mwpm_03201609.png"
  10.         Img = findViewById(R.id.PhotoViewer)
  12.         Img.setOnClickListener{
  13.             PhotoViewer.setClickSingleImg(url, Img)
  14.                 .setShowImageViewInterface(object : PhotoViewer.ShowImageViewInterface{
  15.                     override fun show(iv: ImageView, url: String) {
  16.                         // 这里的 url 可以是加载的网络图片
  17.                         //Glide.with(this@MainActivity).load(url).into(iv)
  18.                         // TODO 这里缩放的是本地图片
  19.                         Glide.with(this@MainActivity).load(R.drawable.header).into(iv)
  20.                     }
  21.                 }).start(this)
  22.         }
  23.     }
  24. }
复制代码
上面代码中利用了 Glide 图片加载框架，所以在  build.gradle 里添加如下依靠 
  1. implementation ("com.github.bumptech.glide:glide:5.0.0-rc01")
复制代码
注意：如果是加载网络图片，然后预览，需要在 AndroidManifest.xml 里开启网络权限
  1. <uses-permission android:name="android.permission.INTERNET"/>
复制代码
示例2：多张图片（类似微信朋侪圈查看图片）

添加一个封装了 RecyclerView，提供更高条理的接口
  1. // 封装了 RecyclerView，提供更高层次的接口
  2. // https://github.com/CymChad/BaseRecyclerViewAdapterHelper
  3. implementation ("io.github.cymchad:BaseRecyclerViewAdapterHelper:4.0.3")
复制代码
1. activity_main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:paddingEnd="5dp"
  7.     android:paddingStart="5dp"
  8.     tools:context=".MainActivity">
  10.     <androidx.recyclerview.widget.RecyclerView
  11.         android:id="@+id/recycler_view"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="wrap_content" />
  15. </LinearLayout>
复制代码
2. image_item.xml。recyclerView 的每一个 Item
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:padding="2dp">
  7.     <ImageView
  8.         android:id="@+id/image"
  9.         android:layout_width="100dp"
  10.         android:layout_height="100dp"
  11.         android:scaleType="center"
  12.         />
  14. </LinearLayout>
复制代码
3. ImageAdapter。加载图片。BaseQuickAdapter 和 QuickViewHolder 都是上面添加的依靠 BaseRecyclerViewAdapterHelper 里提供的。其中，BaseQuickAdapter 中的第一个参数就是我们要显示的数据。
  1. class ImageAdapter : BaseQuickAdapter<String, QuickViewHolder>() {
  2.    
  3.     override fun onBindViewHolder(holder: QuickViewHolder, position: Int, data: String?) {
  4.         // 显示图片
  5.         data?.let {
  6.             Glide.with(context).load(data).into(holder.getView(R.id.image))
  7.         }
  8.     }
  10.     override fun onCreateViewHolder(
  11.         context: Context,
  12.         parent: ViewGroup,
  13.         viewType: Int
  14.     ): QuickViewHolder {
  15.         return QuickViewHolder(R.layout.image_item, parent)
  16.     }
  17. }
复制代码
4. MainActivity.kt 
  1. class MainActivity : AppCompatActivity() {
  3.     private lateinit var recyclerView : RecyclerView
  4.     private lateinit var adapter : ImageAdapter
  6.     override fun onCreate(savedInstanceState: Bundle?) {
  7.         super.onCreate(savedInstanceState)
  8.         setContentView(R.layout.activity_main)
  11.         initView()
  12.         initDatum()
  14.     }
  16.     private fun initView() {
  17.         recyclerView = findViewById(R.id.recycler_view)
  18.         adapter = ImageAdapter()
  19.     }
  21.     private fun initDatum() {
  22.         // 网格布局，类似于微信朋友圈的发的图片
  23.         recyclerView.layoutManager = GridLayoutManager(this, 3)
  24.         recyclerView.adapter = adapter
  25.         // 给适配器填充数据
  26.         adapter.submitList(imageList)
  27.         
  28.         // TODO 给适配器设置监听，当点击某个 item 时，查看该图片
  29.         adapter.setOnItemClickListener{ _, _, position ->
  30.             // TODO position 为点击图片的位置
  31.             Log.d("HL", position.toString())
  32.             //将 List 转为 ArrayList, 因为图片加载框架需要的是 ArrayList
  33.             val images = Lists.newArrayList<String>(imageList)
  35.             // TODO 给适配器设置监听，当点击某个 item 时，查看该图片
  36.             PhotoViewer.setData(images)
  37.                 .setCurrentPage(position)// 设置预览位置，现在是哪页，即从那张图片开始预览（手指点击的位置）
  38.                 .setImgContainer(recyclerView) // 他需要容器的目的是显示缩放动画
  39.                 .setShowImageViewInterface(object : PhotoViewer.ShowImageViewInterface{// 设置图片加载回调
  40.                     override fun show(iv: ImageView, url: String) {
  41.                         Glide.with(this@MainActivity).load(url).into(iv)
  42.                     }
  44.                 }).start(this)// 启动界面
  45.         }
  46.     }
  49.     companion object{
  50.         private val imageList = listOf<String>(
  51.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308134023_7a9ca0543b00332147c42e1ee4146908_0_mwpm_03201609.png",
  52.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_1_mwpm_03201609.png",
  53.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_2_mwpm_03201609.png",
  54.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_3_mwpm_03201609.png",
  55.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_1_mwpm_03201609.png",
  56.             "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_2_mwpm_03201609.png"
  57.         )
  58.     }
  59. }
复制代码
其中，点击图片查看的焦点逻辑如下。利用 PhotoViewer 查看图片。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4