Android图片预览功能(可旋转、缩放、左右切换)

    xiaoxiao2021-03-25  81

    我们要实现的效果

    1、点击图片出现预览界面

    2、可对图片进行旋转、缩放

    3、能左右滑动,预览其他图片

    4、单击预览界面后,回到上一界面

    具体如下图:

              

    使用到的第三方库

    1、图片加载缓存库 Picasso:https://github.com/square/picasso

    2、图片浏览缩放控件 PhotoView:https://github.com/bm-x/PhotoView

    万事俱备,就差实现了, Let ' s  go!!

    一、创建一个图片预览 ImageBrowseActivity

    布局文件如下:

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff171b19" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/imageBrowseViewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

    二、点击图片开始预览,需要通过 Intent 跳转到 ImageBrowseActivity

    1、传递图片列表,因为用到Picasso,所以列表存储的是图片URL

    2、传递要第一个显示的图片下标

    private val imageList = ArrayList<String>() //图片列表

    val intent = Intent(context, ImageBrowseActivity::class.java) intent.putStringArrayListExtra("imageList", imageList) intent.putExtra("index", position) context.startActivity(intent)

    三、ImageBrowseActivity中的具体逻辑

    1、拿到图片列表、第一个显示的图片下标

    if(intent.extras != null){ index = intent.getIntExtra("index", 0) imageList = intent.getStringArrayListExtra("imageList") }

    2、写一个图片适配器 ImageBrowseAdapter

    图片加载使用 Picasso

    需要注意的几点:

    图片的 ScaleType 最好设置为 centerInside不需要使用 PhotoView 的 animFrom()、animTo() 函数,会出现一些问题可自己设置最大缩放倍数

    private inner class ImageBrowseAdapter(var context: Context) : PagerAdapter() { override fun getCount(): Int { return imageList.size } override fun isViewFromObject(view: View, `object`: Any): Boolean { return view === `object` } override fun instantiateItem(container: ViewGroup, position: Int): View { val image = PhotoView(context) // 开启图片缩放功能 image.enable() // 设置缩放类型 image.scaleType = ImageView.ScaleType.CENTER_INSIDE // 设置最大缩放倍数 image.maxScale = 2.5f // 加载图片 Picasso.with(context) .load(imageList[position]) .into(image) // 单击图片,返回 image.onClick { image.disenable() finish() } container.addView(image) return image } override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) { container.removeView(`object` as View) } }

    3、初始化 ViewPager

    fun initViewPager(){ imageBrowseViewPager.adapter = ImageBrowseAdapter(this) imageBrowseViewPager.currentItem = index }

    到此,功能就实现了!!!!

    转载请注明原文地址: https://ju.6miu.com/read-36043.html

    最新回复(0)