# 图片缩放

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

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

![效果图](https://1875682420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsLm05CJpHEySN-1J4I%2F-LsLm1BylwnYD_75uf0o%2F-LsLm86xzrnGM_zqcBk-%2F20160412154813.png?generation=1572340274793585\&alt=media)

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

MultiZoomImageActivity的默认效果如下:

![默认效果](https://1875682420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsLm05CJpHEySN-1J4I%2F-LsLm1BylwnYD_75uf0o%2F-LsLm86zWgmNbyeN9pN_%2F20160412171417.png?generation=1572340274791288\&alt=media)

## 基本使用

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

### 声明

在主模块的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来为小圆点设置不同的状态. 当然, 虽然我习惯叫指示器为小圆点, 指示器也是可以为其他形状的, 如矩形, 圆角等.

加上此样式之后的效果:

![效果图](https://1875682420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsLm05CJpHEySN-1J4I%2F-LsLm1BylwnYD_75uf0o%2F-LsLm871T53xLUrsW-Sr%2F20160412174759.png?generation=1572340274722965\&alt=media)

## 缺陷

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ryan-8.gitbook.io/android-architecture-journey/widgets/zoom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
