学习|Android中两个PhotoView对比及Glide的扩展使用
学习|Android中两个PhotoView对比及Glide的扩展使用
学更好的别人，
做更好的自己。
——《微卡智享》
本文长度为3874字，预计阅读10分钟
PhotoView
简介
PhotoView是在Android一个比较常用的图片预览的开源库，在搜索中也发现了两个不同的PhotoView，分别是com.github.chrisbanes:PhotoView:2.3.0和com.bm.photoview:library:1.4.1，从使用对比的效果来说，个人更倾向于com.bm.photoview，这个除了有上面的那个的功能外，还可以加入图像的旋转。
我们在加载图像存放在PhotoView中用到了Glide这个开源库，在《学习|Android播放网络视频综合运用》中也简单介绍了一下，正好这篇中我们再加上一个glide-transformations的组件，这个是在Glide的基础可以对图像进行一次处理，如：模糊处理、灰度处理、圆角处理等。
实现效果
代码演示
微卡智享
要使用两个PhotoView及Glide和相关的transformations时，我们要在项目的build.gradle中加入对应的依赖项。
bulid.gradle
android {
//在android中加入下面的allprojects
allprojects {
repositories {
maven { url "https://jitpack.io" }
mavenCentral()
jcenter()
}
}
}
dependencies {
//加入两个不同的photoview
implementation 'com.github.chrisbanes:PhotoView:2.3.0'
implementation 'com.bm.photoview:library:1.4.1'
//加入glide的依赖项
implementation 'com.github.bumptech.glide:glide:4.10.0'
//glide的摭展依赖项
implementation 'jp.wasabeef:glide-transformations:3.0.1'
}activity_main.xml
布局文件中，我们改为垂直线性布局，然后分别加入两个PhotoView组件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photo_view"
android:layout_width="match_parent"
android:layout_height="200dp" />
<com.bm.library.PhotoView
android:id="@+id/photo_view2"
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="200dp" />
</LinearLayout>MainActivity代码文件
com.github.chrisbanes:PhotoView直接加载组件即可
com.bm.photoview加载后默认图片是无法绽放的，需
要使用enable这个参数开户缩放功能后才可以进行图片
缩放
正好的加载图片还是通过Glide方式，语法就是
Glide.with(context).load("图片资源")
.apply(图片的transformations)
.into(我们的PhotoView)从上面我们可以看出，要使用glide-tranformations的话主要是把我们的效果放入到apply里面即可。
图片剪裁 | CropCircleTransformation（圆形剪裁）CropSquareTransformation（正方形剪裁）RoundedCornersTransformation （圆角剪裁）CropTransformation （自定义矩形剪裁） |
|---|---|
颜色转换 | ColorFilterTransformation （颜色滤镜）GrayscaleTransformation（灰度级转换） |
模糊处理 | BlurTransformation |
遮罩掩饰（视图叠加处理） | MaskTransformation |
除了上面这些常用的还有一些别的方法，像GPU过滤（需要依赖GPUImage库）这里就不再多说明了。
当然还有多种方式进行组合的方法，可以通过MultiTransformation进行实现，如下：
//模糊处理 BlurTransformation
//灰度处理 GrayscaleTransformation
//圆角处理 RoundedCornersTransformation
val multi = MultiTransformation(
BlurTransformation(1),
GrayscaleTransformation(),
RoundedCornersTransformation(50, 0, RoundedCornersTransformation.CornerType.ALL)
)
MainActivity代码
package dem.vac.photoviewtest
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import com.bumptech.glide.load.MultiTransformation
import com.bumptech.glide.request.RequestOptions
import com.github.chrisbanes.photoview.PhotoView
import jp.wasabeef.glide.transformations.*
class MainActivity : AppCompatActivity() {
private val url = "http://www.sumsoft.cn/uploads/allimg/190920/1-1Z920164912.jpg"
private lateinit var mPhotoView: PhotoView
private lateinit var mPhotoView2: com.bm.library.PhotoView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//模糊处理 BlurTransformation
//灰度处理 GrayscaleTransformation
//圆角处理 RoundedCornersTransformation
val multi = MultiTransformation(
BlurTransformation(1),
GrayscaleTransformation(),
RoundedCornersTransformation(50, 0, RoundedCornersTransformation.CornerType.ALL)
)
//设置Glide的apply的参数
val option=RequestOptions()
.transform(multi)
mPhotoView = findViewById(R.id.photo_view)
Glide.with(this).load(url)
.apply(option)
.placeholder(R.drawable.ic_launcher_background)
.into(mPhotoView)
val options2=RequestOptions()
.transform(BlurTransformation(25))
mPhotoView2 = findViewById(R.id.photo_view2)
// 启用图片缩放功能
mPhotoView2.enable()
Glide.with(this).load(url)
.apply(options2)
.placeholder(R.drawable.ic_launcher_background)
.into(mPhotoView2)
}
}完
扫描二维码
获取更多精彩
微卡智享