d93d695d51
- 在 Images.xcassets 中创建三个新的 Image Set： * shareWechat.imageset - 微信分享按钮图标 * shareQQ.imageset - QQ分享按钮图标 * shareDouyin.imageset - 抖音分享按钮图标 - 为每个 Image Set 配置 Contents.json，支持 @1x/@2x/@3x 多倍率 - 增强 SharePanel.m 按钮样式设置，添加可选的边框和阴影效果 - 添加详细的图片添加指南文档： * images_xcassets_guide.md - Images.xcassets 使用指南 * share_button_guide.md - 分享按钮设计规范 图片规格：60×60pt (@1x), 120×120pt (@2x), 180×180pt (@3x) 支持圆形按钮设计，代码自动处理圆角效果
86 lines
2.5 KiB
Markdown
86 lines
2.5 KiB
Markdown
# 📱 Images.xcassets 添加指南
|
||
|
||
## ✅ 已完成的准备工作
|
||
我已经为您创建了三个 Image Set 的目录结构：
|
||
- `shareWechat.imageset/`
|
||
- `shareQQ.imageset/`
|
||
- `shareDouyin.imageset/`
|
||
|
||
每个目录都包含了正确的 `Contents.json` 配置文件。
|
||
|
||
## 🎯 接下来您需要做的：
|
||
|
||
### 1. 准备图片文件
|
||
创建以下9个图片文件：
|
||
|
||
**微信分享图标:**
|
||
- `shareWechat.png` (60×60像素)
|
||
- `shareWechat@2x.png` (120×120像素)
|
||
- `shareWechat@3x.png` (180×180像素)
|
||
|
||
**QQ分享图标:**
|
||
- `shareQQ.png` (60×60像素)
|
||
- `shareQQ@2x.png` (120×120像素)
|
||
- `shareQQ@3x.png` (180×180像素)
|
||
|
||
**抖音分享图标:**
|
||
- `shareDouyin.png` (60×60像素)
|
||
- `shareDouyin@2x.png` (120×120像素)
|
||
- `shareDouyin@3x.png` (180×180像素)
|
||
|
||
### 2. 放置图片文件
|
||
将准备好的图片文件复制到对应的目录：
|
||
|
||
```
|
||
msext/Images.xcassets/shareWechat.imageset/
|
||
├── Contents.json ✅ (已创建)
|
||
├── shareWechat.png (您需要添加)
|
||
├── shareWechat@2x.png (您需要添加)
|
||
└── shareWechat@3x.png (您需要添加)
|
||
|
||
msext/Images.xcassets/shareQQ.imageset/
|
||
├── Contents.json ✅ (已创建)
|
||
├── shareQQ.png (您需要添加)
|
||
├── shareQQ@2x.png (您需要添加)
|
||
└── shareQQ@3x.png (您需要添加)
|
||
|
||
msext/Images.xcassets/shareDouyin.imageset/
|
||
├── Contents.json ✅ (已创建)
|
||
├── shareDouyin.png (您需要添加)
|
||
├── shareDouyin@2x.png (您需要添加)
|
||
└── shareDouyin@3x.png (您需要添加)
|
||
```
|
||
|
||
### 3. 验证设置
|
||
1. 在 Xcode 中打开项目
|
||
2. 点击 `Images.xcassets`
|
||
3. 您应该能看到三个新的 Image Set：
|
||
- shareWechat
|
||
- shareQQ
|
||
- shareDouyin
|
||
4. 点击每个 Image Set，检查图片是否正确显示
|
||
|
||
### 4. 测试运行
|
||
编译并运行项目，检查分享面板中的按钮图标是否正确显示。
|
||
|
||
## 🎨 快速制作测试图标
|
||
|
||
如果您暂时没有设计好的图标，可以使用以下方法快速制作测试图标：
|
||
|
||
### 方法1: 使用在线工具
|
||
- **Canva**: 搜索"social media icon"
|
||
- **IconFinder**: 下载免费的社交媒体图标
|
||
- **Flaticon**: 下载PNG格式图标
|
||
|
||
### 方法2: 使用现有资源
|
||
临时使用纯色圆形背景 + 文字的方式：
|
||
- 微信: 绿色背景 (#07C160) + 白色"微"字
|
||
- QQ: 蓝色背景 (#12B7F5) + 白色"QQ"
|
||
- 抖音: 红色背景 (#FE2C55) + 白色"抖"字
|
||
|
||
## ⚠️ 注意事项
|
||
1. 图片文件名必须与 Contents.json 中的 filename 完全一致
|
||
2. PNG格式，支持透明背景
|
||
3. 建议使用无损压缩以保证图片质量
|
||
4. 确保@3x图片在高分辨率设备上清晰显示
|