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

我们要实现的效果

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

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

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

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


具体如下图:

Android图片预览功能(可旋转、缩放、左右切换)_第1张图片    Android图片预览功能(可旋转、缩放、左右切换)_第2张图片      Android图片预览功能(可旋转、缩放、左右切换)_第3张图片


使用到的第三方库

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"?>
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:id="@+id/imageBrowseViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

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

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

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

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
}


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


你可能感兴趣的:(Android笔记,Android开发实战)