Android---PhotoViewer实现图片预览
PhotoViewer 图片查看器模仿微信朋侪圈查看图片的效果。在 Android 项目中引用 JitPack 库
https://latex.csdn.net/eq?%5Cbullet AGP 8.+ 根目录的 settings.gradle
dependencyResolutionManagement {
...
repositories {
...
maven { url 'https://jitpack.io' }
}
} https://latex.csdn.net/eq?%5Cbullet AGP 8.+ 根目录如果是 settings.gradle.kts 文件
dependencyResolutionManagement {
...
repositories {
...
maven { url = uri("https://jitpack.io") }
}
} https://latex.csdn.net/eq?%5Cbullet AGP 8.- 根目录的 build.gradle
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
} 添加依靠
// 点击多张图片（类似微信朋友圈查看图片）。在图片列表中，点击某张图片可以放大，并且可以作用滑动
// https://github.com/wanglu1209/PhotoViewer
implementation 'com.github.wanglu1209:PhotoViewer:0.50' 示例1：一张图片时（类似点击查看头像）
https://img-blog.csdnimg.cn/direct/82c6d34447ac46ed9f0cc5ddb1ce129f.gif
布局文件
<LinearLayout 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:gravity="center"
tools:context=".MainActivity">
<ImageView
android:id="@+id/PhotoViewer"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/header"/>
</LinearLayout> MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var Img : ImageView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val url = "https://dfzximg02.dftoutiao.com/news/20210308/" +
"20210308134023_7a9ca0543b00332147c42e1ee4146908_0_mwpm_03201609.png"
Img = findViewById(R.id.PhotoViewer)
Img.setOnClickListener{
PhotoViewer.setClickSingleImg(url, Img)
.setShowImageViewInterface(object : PhotoViewer.ShowImageViewInterface{
override fun show(iv: ImageView, url: String) {
// 这里的 url 可以是加载的网络图片
//Glide.with(this@MainActivity).load(url).into(iv)
// TODO 这里缩放的是本地图片
Glide.with(this@MainActivity).load(R.drawable.header).into(iv)
}
}).start(this)
}
}
} 上面代码中利用了 Glide 图片加载框架，所以在 build.gradle 里添加如下依靠
implementation ("com.github.bumptech.glide:glide:5.0.0-rc01") 注意：如果是加载网络图片，然后预览，需要在 AndroidManifest.xml 里开启网络权限
<uses-permission android:name="android.permission.INTERNET"/> 示例2：多张图片（类似微信朋侪圈查看图片）
https://img-blog.csdnimg.cn/direct/32b8a382763e426dafb8eb953de387d0.gif
添加一个封装了 RecyclerView，提供更高条理的接口
// 封装了 RecyclerView，提供更高层次的接口
// https://github.com/CymChad/BaseRecyclerViewAdapterHelper
implementation ("io.github.cymchad:BaseRecyclerViewAdapterHelper:4.0.3") 1. activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingEnd="5dp"
android:paddingStart="5dp"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout> 2. image_item.xml。recyclerView 的每一个 Item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp">
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="center"
/>
</LinearLayout> 3. ImageAdapter。加载图片。BaseQuickAdapter 和 QuickViewHolder 都是上面添加的依靠 BaseRecyclerViewAdapterHelper 里提供的。其中，BaseQuickAdapter 中的第一个参数就是我们要显示的数据。
class ImageAdapter : BaseQuickAdapter<String, QuickViewHolder>() {
override fun onBindViewHolder(holder: QuickViewHolder, position: Int, data: String?) {
// 显示图片
data?.let {
Glide.with(context).load(data).into(holder.getView(R.id.image))
}
}
override fun onCreateViewHolder(
context: Context,
parent: ViewGroup,
viewType: Int
): QuickViewHolder {
return QuickViewHolder(R.layout.image_item, parent)
}
} 4. MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var recyclerView : RecyclerView
private lateinit var adapter : ImageAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initView()
initDatum()
}
private fun initView() {
recyclerView = findViewById(R.id.recycler_view)
adapter = ImageAdapter()
}
private fun initDatum() {
// 网格布局，类似于微信朋友圈的发的图片
recyclerView.layoutManager = GridLayoutManager(this, 3)
recyclerView.adapter = adapter
// 给适配器填充数据
adapter.submitList(imageList)
// TODO 给适配器设置监听，当点击某个 item 时，查看该图片
adapter.setOnItemClickListener{ _, _, position ->
// TODO position 为点击图片的位置
Log.d("HL", position.toString())
//将 List 转为 ArrayList, 因为图片加载框架需要的是 ArrayList
val images = Lists.newArrayList<String>(imageList)
// TODO 给适配器设置监听，当点击某个 item 时，查看该图片
PhotoViewer.setData(images)
.setCurrentPage(position)// 设置预览位置，现在是哪页，即从那张图片开始预览（手指点击的位置）
.setImgContainer(recyclerView) // 他需要容器的目的是显示缩放动画
.setShowImageViewInterface(object : PhotoViewer.ShowImageViewInterface{// 设置图片加载回调
override fun show(iv: ImageView, url: String) {
Glide.with(this@MainActivity).load(url).into(iv)
}
}).start(this)// 启动界面
}
}
companion object{
private val imageList = listOf<String>(
"https://dfzximg02.dftoutiao.com/news/20210308/20210308134023_7a9ca0543b00332147c42e1ee4146908_0_mwpm_03201609.png",
"https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_1_mwpm_03201609.png",
"https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_2_mwpm_03201609.png",
"https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_3_mwpm_03201609.png",
"https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_1_mwpm_03201609.png",
"https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_2_mwpm_03201609.png"
)
}
} 其中，点击图片查看的焦点逻辑如下。利用 PhotoViewer 查看图片。
https://img-blog.csdnimg.cn/direct/e04973f7e75c47bfa643c82f5341d4e3.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]