|
|
# 启动页面、图标和应用名设置
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
本文档记录了MyQrCode应用的启动页面、应用图标和应用名称的设置过程。
|
|
|
|
|
|
## 主要功能
|
|
|
|
|
|
### 1. 启动页面 (LaunchScreenView)
|
|
|
|
|
|
**文件位置**: `MyQrCode/Views/LaunchScreenView.swift`
|
|
|
|
|
|
**功能特性**:
|
|
|
- **动画效果**: 包含多个动画元素，提供流畅的启动体验
|
|
|
- **渐变背景**: 使用蓝色渐变背景，营造现代感
|
|
|
- **QR码图标**: 中心显示旋转的QR码图标，与应用功能呼应
|
|
|
- **应用名称**: 显示"MyQrCode"和副标题"QR Code Scanner & Generator"
|
|
|
- **加载指示器**: 三个圆点的加载动画，提供视觉反馈
|
|
|
|
|
|
**动画细节**:
|
|
|
- 圆形背景缩放动画 (2秒循环)
|
|
|
- QR码图标旋转动画 (3秒循环)
|
|
|
- 文字淡入动画 (延迟0.5秒)
|
|
|
- 加载指示器动画 (延迟1秒)
|
|
|
|
|
|
### 2. 应用图标
|
|
|
|
|
|
**文件位置**: `MyQrCode/Assets.xcassets/AppIcon.appiconset/1024.png`
|
|
|
|
|
|
**设计特点**:
|
|
|
- **尺寸**: 1024x1024像素，符合App Store要求
|
|
|
- **风格**: 现代化设计，蓝色渐变背景
|
|
|
- **元素**:
|
|
|
- 圆形白色背景
|
|
|
- QR码样式的网格图案
|
|
|
- 中心Logo设计
|
|
|
- **颜色**: 蓝色主题，与应用整体风格一致
|
|
|
|
|
|
### 3. 应用名称
|
|
|
|
|
|
**统一名称**: 所有语言版本都使用"MyQrCode"
|
|
|
|
|
|
**本地化文件**:
|
|
|
- `MyQrCode/en.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/zh-Hans.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/ja.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/ko.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/fr.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/de.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/es.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/it.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/pt.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/ru.lproj/InfoPlist.strings`
|
|
|
- `MyQrCode/th.lproj/InfoPlist.strings`
|
|
|
|
|
|
**配置内容**:
|
|
|
```strings
|
|
|
"CFBundleDisplayName" = "MyQrCode";
|
|
|
"CFBundleName" = "MyQrCode";
|
|
|
```
|
|
|
|
|
|
## 技术实现
|
|
|
|
|
|
### 启动页面集成
|
|
|
|
|
|
**主应用文件**: `MyQrCode/MyQrCodeApp.swift`
|
|
|
|
|
|
**实现方式**:
|
|
|
```swift
|
|
|
@State private var showLaunchScreen = true
|
|
|
|
|
|
var body: some Scene {
|
|
|
WindowGroup {
|
|
|
ZStack {
|
|
|
ContentView()
|
|
|
.opacity(showLaunchScreen ? 0 : 1)
|
|
|
|
|
|
if showLaunchScreen {
|
|
|
LaunchScreenView()
|
|
|
.transition(.opacity)
|
|
|
.zIndex(1)
|
|
|
}
|
|
|
}
|
|
|
.onAppear {
|
|
|
// 显示启动页面3秒
|
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
|
|
|
withAnimation(.easeInOut(duration: 0.5)) {
|
|
|
showLaunchScreen = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Info.plist配置
|
|
|
|
|
|
**文件位置**: `MyQrCode/Info.plist`
|
|
|
|
|
|
**关键配置**:
|
|
|
```xml
|
|
|
<key>CFBundleDisplayName</key>
|
|
|
<string>MyQrCode</string>
|
|
|
<key>CFBundleName</key>
|
|
|
<string>MyQrCode</string>
|
|
|
<key>CFBundleLocalizations</key>
|
|
|
<array>
|
|
|
<string>en</string>
|
|
|
<string>zh-Hans</string>
|
|
|
<string>ja</string>
|
|
|
<string>ko</string>
|
|
|
<string>fr</string>
|
|
|
<string>de</string>
|
|
|
<string>es</string>
|
|
|
<string>it</string>
|
|
|
<string>pt</string>
|
|
|
<string>ru</string>
|
|
|
<string>th</string>
|
|
|
</array>
|
|
|
```
|
|
|
|
|
|
## 用户体验
|
|
|
|
|
|
### 启动流程
|
|
|
1. **应用启动**: 显示启动页面
|
|
|
2. **动画播放**: 3秒的动画展示
|
|
|
3. **平滑过渡**: 淡出启动页面，显示主界面
|
|
|
4. **品牌展示**: 统一的"MyQrCode"品牌标识
|
|
|
|
|
|
### 视觉一致性
|
|
|
- **颜色主题**: 蓝色渐变，与应用内设计保持一致
|
|
|
- **图标风格**: QR码元素，突出应用核心功能
|
|
|
- **字体设计**: 现代圆角字体，提升可读性
|
|
|
|
|
|
## 技术要点
|
|
|
|
|
|
### 动画性能
|
|
|
- 使用SwiftUI原生动画，性能优化
|
|
|
- 合理的动画时长，避免过长等待
|
|
|
- 流畅的过渡效果，提升用户体验
|
|
|
|
|
|
### 本地化支持
|
|
|
- 所有语言版本统一使用"MyQrCode"
|
|
|
- 保持品牌一致性
|
|
|
- 简化用户认知
|
|
|
|
|
|
### 图标规范
|
|
|
- 符合App Store图标要求
|
|
|
- 高分辨率支持
|
|
|
- 清晰的视觉识别度
|
|
|
|
|
|
## 总结
|
|
|
|
|
|
通过这次设置，MyQrCode应用获得了：
|
|
|
- **专业的启动体验**: 动画丰富的启动页面
|
|
|
- **统一的品牌形象**: 所有语言版本使用相同名称
|
|
|
- **现代化的图标设计**: 符合当前设计趋势
|
|
|
- **完整的本地化支持**: 支持12种语言的统一品牌展示
|
|
|
|
|
|
这些改进提升了应用的专业性和用户体验，为后续的App Store发布做好了准备。
|
