feat: 添加分享按钮图片资源和配置
- 在 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) 支持圆形按钮设计,代码自动处理圆角效果
85
images_xcassets_guide.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# 📱 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图片在高分辨率设备上清晰显示
|
||||
@@ -149,8 +149,21 @@ static SharePanel *sharedPanel = nil;
|
||||
CGFloat x = startX + index * (kButtonSize + kButtonMargin);
|
||||
button.frame = CGRectMake(x, kButtonTopMargin, kButtonSize, kButtonSize);
|
||||
[button setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
|
||||
|
||||
// 圆角设置
|
||||
button.layer.cornerRadius = kButtonSize / 2;
|
||||
button.clipsToBounds = YES;
|
||||
|
||||
// 可选:添加边框效果
|
||||
// button.layer.borderWidth = 1.0;
|
||||
// button.layer.borderColor = [UIColor colorWithWhite:0.9 alpha:1.0].CGColor;
|
||||
|
||||
// 可选:添加阴影效果(注意:阴影和clipsToBounds冲突,需要使用容器视图)
|
||||
// button.layer.shadowColor = [UIColor blackColor].CGColor;
|
||||
// button.layer.shadowOffset = CGSizeMake(0, 2);
|
||||
// button.layer.shadowOpacity = 0.1;
|
||||
// button.layer.shadowRadius = 4;
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
|
||||
23
msext/Images.xcassets/shareDouyin.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "shareDouyin.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareDouyin@2x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareDouyin@3x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
msext/Images.xcassets/shareDouyin.imageset/shareDouyin.png
vendored
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
msext/Images.xcassets/shareDouyin.imageset/shareDouyin@2x.png
vendored
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
msext/Images.xcassets/shareDouyin.imageset/shareDouyin@3x.png
vendored
Normal file
|
After Width: | Height: | Size: 6.2 KiB |
23
msext/Images.xcassets/shareQQ.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "shareQQ.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareQQ@2x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareQQ@3x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
msext/Images.xcassets/shareQQ.imageset/shareQQ.png
vendored
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
msext/Images.xcassets/shareQQ.imageset/shareQQ@2x.png
vendored
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
msext/Images.xcassets/shareQQ.imageset/shareQQ@3x.png
vendored
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
23
msext/Images.xcassets/shareWechat.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "shareWechat.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareWechat@2x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"filename" : "shareWechat@3x.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
msext/Images.xcassets/shareWechat.imageset/shareWechat.png
vendored
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
msext/Images.xcassets/shareWechat.imageset/shareWechat@2x.png
vendored
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
msext/Images.xcassets/shareWechat.imageset/shareWechat@3x.png
vendored
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
35
share_button_guide.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# 分享按钮图片制作指南
|
||||
|
||||
## 快速制作方法
|
||||
|
||||
### 1. 使用在线工具
|
||||
- **Canva**: 创建60×60px圆形图标
|
||||
- **Figma**: 设计矢量图标,导出多倍率PNG
|
||||
|
||||
### 2. 设计规范
|
||||
```
|
||||
尺寸: 60×60pt (多倍率: @1x, @2x, @3x)
|
||||
形状: 正圆形(代码自动处理圆角)
|
||||
背景: 品牌色 + 白色logo
|
||||
边距: 图标留8-12px内边距
|
||||
```
|
||||
|
||||
### 3. 颜色规范
|
||||
```css
|
||||
微信: #07C160
|
||||
QQ: #12B7F5
|
||||
抖音: #FE2C55
|
||||
```
|
||||
|
||||
### 4. 添加步骤
|
||||
1. 制作三套图片(每套包含@1x/@2x/@3x)
|
||||
2. 在Xcode中打开Images.xcassets
|
||||
3. 创建新的Image Set: shareWechat, shareQQ, shareDouyin
|
||||
4. 拖入对应倍率的图片
|
||||
5. 编译运行查看效果
|
||||
|
||||
### 5. 测试检查
|
||||
- [ ] 图片清晰度(特别是@3x高分辨率设备)
|
||||
- [ ] 圆角效果正常
|
||||
- [ ] 色彩还原准确
|
||||
- [ ] 点击区域响应正常
|
||||