admin
1. 创建启动画板，LaunchScreen.storyboard 添加组件如图:
2. 项目中设置只支持竖屏，添加启动画板，如图:
3. 创建启动画面动画视图，LaunchView.swift
import SwiftUI
/// 启动视图
struct LaunchView: View {
/// 字符串转换为字符串数组，字符串中包含单个字母组成
@State private var loadingText: [String] = "Loading your portfolio...".map { String($0) }
/// 是否显示文字
@State private var showLoadingText: Bool = false
/// 计时器
private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
/// 计数
@State private var counter: Int = 0
/// 循环次数
@State private var loops: Int = 0
/// 是否显示启动 View
@Binding var showLaunchView: Bool
var body: some View {
ZStack {
// 背景颜色
Color.launch.background.ignoresSafeArea()
// 图标
Image("logo-transparent")
.resizable()
.frame(width: 100, height: 100)
// 文字
ZStack {
if showLoadingText {
HStack(spacing: 0) {
ForEach(loadingText.indices, id: \.self) { index in
Text(loadingText[index])
.font(.headline)
.fontWeight(.heavy)
.foregroundColor(Color.launch.accent)
.offset(y: counter == index ? -5 : 0)
}
}
.transition(AnyTransition.scale.animation(.easeIn))
}
}
.offset(y: 70)
}
.onAppear {
showLoadingText.toggle()
}
.onReceive(timer) { _ in
// 添加弹簧动画
withAnimation(.spring()) {
let lastIndex = loadingText.count - 1
if counter == lastIndex {
counter = 0
// 循环多少次
loops += 1
// 检查次数
if loops >= 2 {
showLaunchView = false
}
}else{
counter += 1
}
}
}
}
}
struct LaunchView_Previews: PreviewProvider {
static var previews: some View {
LaunchView(showLaunchView: .constant(true))
}
}
4. 启动结构体中添加版本适配、启动页、主页，SwiftfulCryptoApp.swift
import SwiftUI
@main
struct SwiftfulCryptoApp: App {
/// 主 ViewModel
@StateObject private var viewModel = HomeViewModel()
/// 是否显示启动 View
@State private var showLaunchView: Bool = true
init() {
// 修改导航栏中标题的颜色, 适配 iOS 15 导航栏背景自动更改为默认颜色
if #available(iOS 15, *) {
let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithOpaqueBackground() // 重置背景和阴影颜色
barAppearance.titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent) ]
barAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
barAppearance.backgroundColor = UIColor(Color.theme.background) // 设置导航栏背景色
// let buttonAppearance = UIBarButtonItemAppearance()
// buttonAppearance.normal.titleTextAttributes = [
// .foregroundColor: UIColor(Color.theme.accent)
// ]
//appBarAppearance.buttonAppearance = buttonAppearance
UINavigationBar.appearance().standardAppearance = barAppearance // 带scroll滑动的页面
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance // 常规页面
UINavigationBar.appearance().compactAppearance = barAppearance
}else{
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
UINavigationBar.appearance().backgroundColor = UIColor(Color.theme.background)
UINavigationBar.appearance().tintColor = UIColor(Color.theme.accent) //前景色，按钮颜色
//UINavigationBar.appearance().barTintColor = UIColor(Color.theme.background) //背景色，导航条背景色
// 更改表格背景颜色
UITableView.appearance().backgroundColor = .clear
}
}
var body: some Scene {
WindowGroup {
ZStack {
NavigationView {
HomeView()
//.navigationBarHidden(true)
}
// 适配 iPad 导航栏
.navigationViewStyle(.stack)
// 环境对象中添加 view model，便于每个 View 都能够去访问
.environmentObject(viewModel)
.accentColor(Color.theme.accent)
// 防止 Z 堆栈跳转时产生混乱问题
ZStack {
// 是否显示启动 View
if showLaunchView {
LaunchView(showLaunchView: $showLaunchView)
//.transition(.move(edge: .leading))
// transition: 过渡动画 .scale(scale: 0)
.transition(.move(edge: .leading))
}
}
.zIndex(2.0)
}
}
}
}
5. 效果图: