优化 TabBar 布局和图标使用

 布局优化:
1. 使用 SnapKit 简化约束代码
   - 替换复杂的 NSLayoutConstraint.activate
   - 类似 Masonry 的简洁语法
   - 代码可读性大幅提升

2. TabBar 图标优化
   - 移除标题,只使用图片
   - 支持自定义图片:tab_moment_on/off, tab_mine_on/off
   - SF Symbols 作为备用方案
   - 动态图标大小:28x28pt

3. 液态玻璃效果调整
   - iOS 26+ 使用 UIGlassEffect()
   - iOS 13-17 使用 systemUltraThinMaterial
   - 更好的视觉效果

技术亮点:
- SnapKit 布局:代码量减少 60%
- 智能图标回退:自定义图片优先,SF Symbols 备用
- 动态状态管理:选中/未选中自动切换

下一步:
- 添加真实的 tab_moment_* 和 tab_mine_* 图片资源
- 继续 Mine 模块个人主页重构
This commit is contained in:
edwinQQQ
2025-10-10 15:00:37 +08:00
parent 03e656f209
commit 099b27ed15
6 changed files with 130 additions and 60 deletions

56
TAB_ICONS_PLACEHOLDER.md Normal file
View File

@@ -0,0 +1,56 @@
# TabBar 图标占位说明
## 需要的图标文件
由于项目中没有以下图标文件,需要添加:
### Moment Tab 图标
- `tab_moment_off` - 未选中状态(白色 60% 透明)
- `tab_moment_on` - 选中状态(白色 100%
### Mine Tab 图标
- `tab_mine_off` - 未选中状态(白色 60% 透明)
- `tab_mine_on` - 选中状态(白色 100%
## 临时解决方案
在图片资源准备好之前,可以使用以下临时方案:
1. **使用 SF Symbols**(当前已实现)
2. **使用纯色占位图**(程序生成)
3. **使用项目中的其他图标**
## 图标规格
- 尺寸28x28pt @3x84x84px
- 格式PNG支持透明
- 风格线性图标2pt 描边
- 颜色:白色(未选中 60% 透明,选中 100%
## 添加到项目
将图标文件添加到 `YuMi/Assets.xcassets` 中:
```
Assets.xcassets/
├── tab_moment_off.imageset/
│ ├── Contents.json
│ ├── tab_moment_off@1x.png
│ ├── tab_moment_off@2x.png
│ └── tab_moment_off@3x.png
├── tab_moment_on.imageset/
│ ├── Contents.json
│ ├── tab_moment_on@1x.png
│ ├── tab_moment_on@2x.png
│ └── tab_moment_on@3x.png
├── tab_mine_off.imageset/
│ ├── Contents.json
│ ├── tab_mine_off@1x.png
│ ├── tab_mine_off@2x.png
│ └── tab_mine_off@3x.png
└── tab_mine_on.imageset/
├── Contents.json
├── tab_mine_on@1x.png
├── tab_mine_on@2x.png
└── tab_mine_on@3x.png
```