|
|
# 自定义二维码样式界面
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
`QRCodeStyleView` 是一个功能丰富的自定义二维码样式界面，允许用户自定义二维码的外观，包括颜色、点类型、眼睛类型和Logo。
|
|
|
|
|
|
## 功能特性
|
|
|
|
|
|
### 1. 颜色选择
|
|
|
- **前景色**: 8种纯色 + 12种渐变色
|
|
|
- **背景色**: 10种浅色系
|
|
|
|
|
|
### 2. 点类型选择
|
|
|
支持40多种不同的点类型，包括：
|
|
|
- 基础形状：方形、圆形、菱形、六边形等
|
|
|
- 特殊形状：星形、心形、花朵、齿轮等
|
|
|
- 抽象形状：抽象、斑点、电路、交叉线等
|
|
|
- 动态形状：火焰、漩涡、波浪等
|
|
|
|
|
|
### 3. 眼睛类型选择
|
|
|
支持40多种不同的眼睛类型，包括：
|
|
|
- 基础形状：方形、圆形、弧形等
|
|
|
- 特殊形状：云朵、孔雀、UFO、泪滴等
|
|
|
- 动态形状：火焰、爆炸、火球等
|
|
|
|
|
|
### 4. Logo选择
|
|
|
支持15种不同的Logo：
|
|
|
- 社交媒体：Facebook、Instagram、X、TikTok等
|
|
|
- 通讯工具：WhatsApp、Telegram、Viber等
|
|
|
- 其他服务：Gmail、PayPal、Spotify等
|
|
|
|
|
|
## 界面布局
|
|
|
|
|
|
```
|
|
|
┌─────────────────────────────────────┐
|
|
|
│ 自定义样式 [保存] │
|
|
|
├─────────────────────────────────────┤
|
|
|
│ │
|
|
|
│ 二维码预览区域 │
|
|
|
│ │
|
|
|
├─────────────────────────────────────┤
|
|
|
│ 前景色选择 │
|
|
|
│ [颜色网格] │
|
|
|
│ │
|
|
|
│ 背景色选择 │
|
|
|
│ [颜色网格] │
|
|
|
│ │
|
|
|
│ 点类型选择 │
|
|
|
│ [水平滚动选择] │
|
|
|
│ │
|
|
|
│ 眼睛类型选择 │
|
|
|
│ [水平滚动选择] │
|
|
|
│ │
|
|
|
│ Logo选择 │
|
|
|
│ [水平滚动选择] │
|
|
|
└─────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
## 技术实现
|
|
|
|
|
|
### 核心文件
|
|
|
|
|
|
1. **QRCodeStyleView.swift** - 主界面文件
|
|
|
2. **QRCodeStyleModels.swift** - 数据模型文件
|
|
|
|
|
|
### 数据模型
|
|
|
|
|
|
#### QRCodeColor
|
|
|
```swift
|
|
|
enum QRCodeColor: String, CaseIterable {
|
|
|
case black, white, red, blue, green, yellow, purple, orange, pink, cyan
|
|
|
case magenta, brown, gray, navy, teal, indigo, lime, maroon, olive, silver
|
|
|
// 渐变色
|
|
|
case gradientRed, gradientBlue, gradientGreen, gradientPurple, gradientOrange
|
|
|
case gradientPink, gradientYellow, gradientCyan, gradientMagenta, gradientTeal
|
|
|
case gradientIndigo, gradientLime
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### QRCodeDotType
|
|
|
```swift
|
|
|
enum QRCodeDotType: String, CaseIterable {
|
|
|
case square, circle, roundedRect, squircle, diamond, hexagon, star, heart
|
|
|
case flower, gear, abstract, arrow, blob, circuit, crosshatch, crt
|
|
|
case curvePixel, diagonal, diagonalStripes, donut, dripHorizontal, dripVertical
|
|
|
case flame, grid2x2, grid3x3, grid4x4, horizontal, koala, pointy, razor
|
|
|
case roundedEndIndent, roundedPath, roundedTriangle, sharp, shiny, spikyCircle
|
|
|
case stitch, vertical, vortex, wave, wex
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### QRCodeEyeType
|
|
|
```swift
|
|
|
enum QRCodeEyeType: String, CaseIterable {
|
|
|
case square, circle, roundedRect, squircle, arc, barsHorizontal, barsVertical
|
|
|
case cloud, cloudCircle, corneredPixels, crt, diagonalStripes, dotDragHorizontal
|
|
|
case dotDragVertical, edges, explode, eye, fabricScissors, fireball, flame
|
|
|
case headlight, holePunch, leaf, peacock, pinch, pixels, roundedOuter
|
|
|
case roundedPointingIn, roundedPointingOut, shield, spikyCircle, squarePeg
|
|
|
case surroundingBars, teardrop, ufo, ufoRounded, usePixelShape
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### QRCodeLogo
|
|
|
```swift
|
|
|
enum QRCodeLogo: String, CaseIterable {
|
|
|
case scanMe, gmail, paypal, googlePlaystore, spotify, telegram, whatsApp
|
|
|
case linkedIn, tikTok, snapchat, youtube, x, pinterest, instagram, facebook
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 二维码生成
|
|
|
|
|
|
使用Core Image的`CIFilter.qrCodeGenerator()`生成基础二维码：
|
|
|
|
|
|
```swift
|
|
|
let context = CIContext()
|
|
|
let filter = CIFilter.qrCodeGenerator()
|
|
|
filter.message = Data(qrCodeContent.utf8)
|
|
|
filter.correctionLevel = "M"
|
|
|
|
|
|
if let outputImage = filter.outputImage {
|
|
|
let scaleX = 600 / outputImage.extent.width
|
|
|
let scaleY = 600 / outputImage.extent.height
|
|
|
let transform = CGAffineTransform(scaleX: scaleX, y: scaleY)
|
|
|
let scaledImage = outputImage.transformed(by: transform)
|
|
|
|
|
|
if let cgImage = context.createCGImage(scaledImage, from: scaledImage.extent) {
|
|
|
let image = UIImage(cgImage: cgImage)
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 图片资源
|
|
|
|
|
|
所有样式预览图片存储在`Resources/`目录下：
|
|
|
- `Resources/dots/` - 点类型预览图片
|
|
|
- `Resources/eyes/` - 眼睛类型预览图片
|
|
|
- `Resources/logos/` - Logo预览图片
|
|
|
|
|
|
## 使用方法
|
|
|
|
|
|
### 1. 创建界面
|
|
|
```swift
|
|
|
QRCodeStyleView(qrCodeContent: "https://www.example.com")
|
|
|
```
|
|
|
|
|
|
### 2. 自定义样式
|
|
|
用户可以通过以下方式自定义二维码：
|
|
|
- 选择前景色和背景色
|
|
|
- 选择点类型样式
|
|
|
- 选择眼睛类型样式
|
|
|
- 选择Logo（可选）
|
|
|
|
|
|
### 3. 保存二维码
|
|
|
点击右上角的"保存"按钮将生成的二维码保存到相册。
|
|
|
|
|
|
## 界面特性
|
|
|
|
|
|
### 响应式设计
|
|
|
- 支持不同屏幕尺寸
|
|
|
- 自适应布局
|
|
|
- 流畅的滚动体验
|
|
|
|
|
|
### 实时预览
|
|
|
- 选择样式后立即生成预览
|
|
|
- 异步生成避免界面卡顿
|
|
|
- 加载状态指示
|
|
|
|
|
|
### 用户友好
|
|
|
- 直观的图标选择
|
|
|
- 清晰的分类展示
|
|
|
- 中文界面支持
|
|
|
|
|
|
## 扩展性
|
|
|
|
|
|
### 添加新颜色
|
|
|
在`QRCodeColor`枚举中添加新的颜色类型。
|
|
|
|
|
|
### 添加新点类型
|
|
|
1. 在`QRCodeDotType`枚举中添加新类型
|
|
|
2. 在`Resources/dots/`目录添加预览图片
|
|
|
3. 更新`displayName`和`pixelShape`属性
|
|
|
|
|
|
### 添加新眼睛类型
|
|
|
1. 在`QRCodeEyeType`枚举中添加新类型
|
|
|
2. 在`Resources/eyes/`目录添加预览图片
|
|
|
3. 更新`displayName`和`eyeShape`属性
|
|
|
|
|
|
### 添加新Logo
|
|
|
1. 在`QRCodeLogo`枚举中添加新类型
|
|
|
2. 在`Resources/logos/`目录添加Logo图片
|
|
|
3. 更新`displayName`属性
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
|
1. **图片资源**: 确保所有预览图片都已添加到Xcode项目中
|
|
|
2. **性能优化**: 二维码生成在后台线程进行，避免界面卡顿
|
|
|
3. **内存管理**: 及时释放不需要的图片资源
|
|
|
4. **错误处理**: 处理图片加载失败的情况
|
|
|
|
|
|
## 未来改进
|
|
|
|
|
|
1. **更多样式**: 添加更多颜色、形状和Logo选项
|
|
|
2. **自定义Logo**: 允许用户上传自定义Logo
|
|
|
3. **样式预设**: 提供预设的样式组合
|
|
|
4. **导出选项**: 支持不同格式和尺寸的导出
|
|
|
5. **动画效果**: 添加选择时的动画效果
|
