6.8 KiB

Raw Blame History Unescape Escape

自定义二维码样式界面

概述

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选择                            │
│ [水平滚动选择]                      │
└─────────────────────────────────────┘

技术实现

核心文件

QRCodeStyleView.swift - 主界面文件
QRCodeStyleModels.swift - 数据模型文件

数据模型

QRCodeColor

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

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

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

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()生成基础二维码：

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. 创建界面

QRCodeStyleView(qrCodeContent: "https://www.example.com")

2. 自定义样式

用户可以通过以下方式自定义二维码：

选择前景色和背景色
选择点类型样式
选择眼睛类型样式
选择Logo（可选）

3. 保存二维码

点击右上角的"保存"按钮将生成的二维码保存到相册。

界面特性

响应式设计

支持不同屏幕尺寸
自适应布局
流畅的滚动体验

实时预览

选择样式后立即生成预览
异步生成避免界面卡顿
加载状态指示

用户友好

直观的图标选择
清晰的分类展示
中文界面支持

扩展性

添加新颜色

在QRCodeColor枚举中添加新的颜色类型。

添加新点类型

在QRCodeDotType枚举中添加新类型
在Resources/dots/目录添加预览图片
更新displayName和pixelShape属性

添加新眼睛类型

在QRCodeEyeType枚举中添加新类型
在Resources/eyes/目录添加预览图片
更新displayName和eyeShape属性

添加新Logo

在QRCodeLogo枚举中添加新类型
在Resources/logos/目录添加Logo图片
更新displayName属性

注意事项

图片资源: 确保所有预览图片都已添加到Xcode项目中
性能优化: 二维码生成在后台线程进行，避免界面卡顿
内存管理: 及时释放不需要的图片资源
错误处理: 处理图片加载失败的情况

未来改进

更多样式: 添加更多颜色、形状和Logo选项
自定义Logo: 允许用户上传自定义Logo
样式预设: 提供预设的样式组合
导出选项: 支持不同格式和尺寸的导出
动画效果: 添加选择时的动画效果

6.8 KiB Raw Blame History Unescape Escape