youle_app_ios/images_xcassets_guide.md

📱 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图片在高分辨率设备上清晰显示