图片缩放

图片缩放控件位于CoreLibs下views.zoom.ZoomImageView. ZoomImageView的代码基本上均是参考Android 手势检测实战 打造支持缩放平移的图片预览效果. 想要了解原理可以去拜读一下上面的文章.

图片缩放功能一般是用于展示类APP使用, 如电商中的商品的图片, 社交中的用户朋友圈图片等等. 效果如下图:

效果图

从效果图可以看到, 这是一个Activity, 里面包含了一个ViewPager, ViewPager包含了用户想看到的图片, 图片可以缩放. 并且单击图片可以回到上一页. 由于此界面的功能都一样, 只是样式有略微差别, 因为我们可以写一个公共的Activity, 并提供一些可配置的效果, 即MultiZoomImageActivity. 此类与ZoomImageView位于同一包下.

MultiZoomImageActivity的默认效果如下:

默认效果

基本使用

首先来看看默认效果的使用方法.

声明

在主模块的AndroidManifest的application节点中, 添加如下代码:

<activity
    android:name="com.corelibs.views.zoom.MultiZoomImageActivity"
    android:screenOrientation="portrait" />

跳转

在需要跳转至MultiZoomImageActivity的地方添加如下代码:

context.startActivity(MultiZoomImageActivity.getLaunchIntent(context, images, position));

只需上述两个步骤就可以使用MultiZoomImageActivity. 接下来看看MultiZoomImageActivity的getLaunchIntent方法:

public static Intent getLaunchIntent(Context context, List<String> images, int position) {
    Intent intent = new Intent(context, MultiZoomImageActivity.class);
    intent.putExtra(EXTRA_IMAGES, (Serializable) images);
    intent.putExtra(EXTRA_INIT_POSITION, position);
    return intent;
}

具体参数说明如下:

• Context context 上下文

• List images 图片地址集合, 请使用网络图片地址

• int position 设置初始显示第几张图片

自定义样式

MultiZoomImageActivity提供6个自定义选项:

<attr name="backgroundColor" format="color"/> //背景色
<attr name="indicator" format="reference"/> //小圆点样式
<attr name="indicatorWidth" format="dimension"/> //小圆点宽度
<attr name="indicatorHeight" format="dimension"/> //小圆点高度
<attr name="indicatorLeftMargin" format="dimension"/> //小圆点的LeftMargin
<attr name="indicatorRightMargin" format="dimension"/> //小圆点的RightMargin

接着我们可以在AndroidManifest中的activity节点中加入theme属性:

<activity
    android:name="com.corelibs.views.zoom.MultiZoomImageActivity"
    android:theme="@style/mzi_indicator"
    android:screenOrientation="portrait" />

以下是mzi_indicator样式:

<style name="mzi_indicator" parent="@style/AppBaseTheme">
    <item name="backgroundColor">@color/white</item>
    <item name="indicator">@drawable/mzi_indicator</item>
    <item name="indicatorWidth">6dp</item>
    <item name="indicatorHeight">6dp</item>
    <item name="indicatorLeftMargin">3dp</item>
    <item name="indicatorRightMargin">3dp</item>
</style>

请注意需要加上parent="@style/AppBaseTheme", 以保持其他基本样式与其他的Activity一样. drawable mzi_indicator的样式:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/dot_focused" />
    <item android:drawable="@drawable/dot_normal" />
</selector>

小圆点如果处于选中状态就会被设置成selected. 所以此处可以使用selector来为小圆点设置不同的状态. 当然, 虽然我习惯叫指示器为小圆点, 指示器也是可以为其他形状的, 如矩形, 圆角等.

加上此样式之后的效果:

效果图

缺陷

当然MultiZoomImageActivity也是有缺陷需要改进的, 比如背景只能设置颜色, 不能设置图片或者drawable, 如果需要背景虚化还需要另外去实现. 加载图片的时候没有加载框, 还有图片放大超出屏幕大小之后快速滑动不跟手, 这是ZoomImageView的问题. 这些问题都是需要去优化完善的.