# ImageCompare

**Repository Path**: zhao-xiaoke/image-compare

## Basic Information

- **Project Name**: ImageCompare
- **Description**: 图像对比
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: Image02
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-15
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目简介

ImageCompare（图片对比）是一款 Android 应用，允许用户加载和比较两张图片，支持左右对比、上下对比和重叠对比三种模式。通过手势操作可以进行缩放、拖动和双击放大缩小，支持多种图片对比查看方式。

---

## 项目架构

### 核心组件结构

```
ImageCompare
├── ImageActivity (主活动)
│   └── 管理整个UI和业务逻辑，处理菜单和模式切换
│
├── CustomImageView (自定义图片视图)
│   └── 处理图片的缩放、拖动、双击和触摸交互
│
├── ImageViewSyncListener (图片视图同步监听器)
    └── 实现两个图片视图之间的矩阵变换同步
```

### 架构特点
- **多模式支持**：提供左右对比（Left-Right）、上下对比（Up-Down）和重叠对比（Overlay）三种模式
- **同步交互**：两个图片视图保持缩放和拖动状态同步
- **手势识别**：支持缩放、拖动、双击等多种触摸手势
- **灵活的UI切换**：可在三种模式间无缝切换

---

## 流程

```
选择图片(输入)——>解码和加载图片——>显示在CustomImageView——>通过手势进行交互——>同步处理——>输出展示
```

---

## 主要功能特性

### 1. **左右对比模式 (Left-Right)**
   - 两张图片左右并排显示
   - 独立的触摸交互
   - 支持缩放和拖动同步
   - 适合水平方向对比

### 2. **上下对比模式 (Up-Down)**
   - 两张图片上下排列显示
   - 同步缩放和平移操作
   - 适合竖直方向对比

### 3. **重叠对比模式 (Overlay)**
   - 单个图片全屏显示
   - 通过切换按钮在两张图片间快速切换
   - 适合详细对比查看
   - 支持同步的缩放和位置

### 4. **手势交互**
   - **单指拖动**：平移图片位置
   - **双指缩放**：放大缩小图片（1x-5x倍）
   - **双击**：在1倍和2倍缩放间快速切换

### 5. **图片信息展示**
   - 实时显示选中图片的文件名
   - 在不同模式下动态更新文件名显示

### 6. **图片管理**
   - 支持从系统相册选择图片
   - 支持重新选择和替换图片

---

## 使用说明

**1. 启动应用默认为左右对比模式**

点击左侧和右侧的选择按钮，从系统相册中选择图片

<img src="README.assets/image-20260108114140819.png" alt="image-20260108114140819" width="20%" />  <img src="README.assets/image-20260108114338554.png" alt="image-20260108114338554" width="20%" />

**2. 切换到上下对比模式**

在已经选择两张图片的前提下，点击设置按钮<img src="README.assets/image-20260108114537589.png" alt="image-20260108114537589" width="5%" /> → 选择"上下对比"

两张图片会按上下排列显示，支持同步缩放和拖动

<img src="README.assets/image-20260108114628620.png" alt="image-20260108114628620" width="20%" /> 

**3. 切换到重叠对比模式**

在已经选择两张图片的前提下，点击设置按钮<img src="README.assets/image-20260108114537589.png" alt="image-20260108114537589" width="5%" /> → 选择"重叠对比"

使用下方的"切换"按钮在两张图片间快速切换查看

<img src="README.assets/image-20260108114716892.png" alt="image-20260108114716892" width="20%" /> 

**4. 手势操作**

- **缩放**：两指同时触摸并分开/靠近
- **拖动**：单指按住并滑动
- **双击放大**：在图片上快速点击两次会将图片放大两倍，再双击恢复原大小

**5. 重新选择图片**

点击设置按钮<img src="README.assets/image-20260108114537589.png" alt="image-20260108114537589" width="5%" /> → 选择"重选图片"，可重新选择两张图片进行对比

---

## 技术细节

### CustomImageView
- 继承自 AppCompatImageView
- 实现 Matrix 矩阵变换处理缩放和平移
- 集成 ScaleGestureDetector 处理缩放手势
- 集成 GestureDetector 处理双击手势
- 通过 SyncListener 回调实现视图同步

### ImageViewSyncListener
- 定义矩阵变换回调接口
- 当一个图片视图的矩阵改变时，通知另一个视图同步更新

---

## 开发依赖

- androidx.appcompat:appcompat:1.4.1
- com.google.android.material:material:1.9.0
- androidx.constraintlayout:constraintlayout:2.1.3