SwiftUI模块系列 - 已更新56篇
SwiftUI项目 - 已更新5个项目
往期Demo源码下载

技术:SwiftUI、SwiftUI4.0、电影、电影预定、订票
运行环境:
SwiftUI4.0 + Xcode14 + MacOS12.6 + iPhone Simulator iPhone 14 Pro Max

概述

使用SwiftUI做一个时尚的电影预订应用程序UI - 效果

详细

一、运行效果

二、项目结构图

三、程序实现 - 过程

思路:
1.创建头部模块 进行测试上下滚动拥有放大缩小效果
2.搭建分类模块 固定在头部下面
3.搭建列表模块
4.监听滚动偏移的操作

1.创建一个项目命名为 SpotifyResponvieUI

1.1.引入资源文件和颜色

颜色
BG #281A1A
Green #4DD037
随机图片9张
个人大图背景1张
logo1张

2. 创建一个虚拟文件New Group 命名为 View

3. 创建一个虚拟文件New Group 命名为 Model

4. 创建一个文件New File 选择SwiftUI View类型 命名为Album 并且继承Identifiable

5. 创建一个文件New File 选择SwiftUI View类型 命名为Home

主要是:

6. 创建一个文件New File 选择SwiftUI View类型 命名为OffsetModifier

Code

ContentView - 主窗口

主要是展示主窗口Home和设置暗黑模式

import SwiftUIstruct ContentView: View {var body: some View {Home()// 永远是黑暗模式.preferredColorScheme(.dark)}}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

Home - 主页

思路

1. 主要就是展示大图背景 + 固定的分类 + 列表模块

//
//  Home.swift
//  SpotifyResponvieUI (iOS)
//
//  Created by lyh on 2022/8/23.
//import SwiftUIstruct Home: View {@State var currentType: String = "Popular"// 光滑滑动效果@Namespace var animation@State var _albums: [Album] = albums// x,y@State var headerOffsets: (CGFloat,CGFloat) = (0,0)var body: some View {ScrollView(.vertical, showsIndicators: false) {VStack(spacing: 0){HeaderView()// 带内容的固定标题LazyVStack(pinnedViews: [.sectionHeaders]) {Section {SongList()} header: {PinnedHeaderView().background(Color.black).offset(y: headerOffsets.1 > 0 ? 0 : -headerOffsets.1 / 8).modifier(OffsetModifier(offset: $headerOffsets.0, returnFromStart: false)).modifier(OffsetModifier(offset: $headerOffsets.1))}}}}.overlay(content: {Rectangle().fill(.black).frame(height: 50).frame(maxHeight: .infinity,alignment: .top).opacity(headerOffsets.0 < 5 ? 1 : 0)}).coordinateSpace(name: "SCROLL").ignoresSafeArea(.container, edges: .vertical)}// 固定的内容@ViewBuilderfunc SongList()->some View{VStack(spacing: 25){ForEach($_albums){$album inHStack(spacing: 12){Text("#\(getIndex(album: album) + 1)").fontWeight(.semibold).foregroundColor(.gray)Image(album.albumImage).resizable().aspectRatio(contentMode: .fill).frame(width: 55, height: 55).clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))VStack(alignment: .leading, spacing: 8) {Text(album.albumName).fontWeight(.semibold)Label {Text("65,587,909")} icon: {Image(systemName: "beats.headphones").foregroundColor(.white)}.foregroundColor(.gray).font(.caption)}.frame(maxWidth: .infinity,alignment: .leading)Button {album.isLiked.toggle()} label: {Image(systemName: album.isLiked ? "suit.heart.fill" : "suit.heart").font(.title3).foregroundColor(album.isLiked ? Color("Green") : .white)}Button {} label: {Image(systemName: "ellipsis").font(.title3).foregroundColor(.white)}}}}.padding().padding(.top,25).padding(.bottom,150)}func getIndex(album: Album)->Int{return _albums.firstIndex { currentAlbum inreturn album.id == currentAlbum.id} ?? 0}// 头部视图@ViewBuilderfunc HeaderView()->some View{GeometryReader{proxy inlet minY = proxy.frame(in: .named("SCROLL")).minYlet size = proxy.sizelet height = (size.height + minY)Image("Ariana").resizable().aspectRatio(contentMode: .fill).frame(width: size.width,height: height > 0 ? height : 0,alignment: .top).overlay(content: {ZStack(alignment: .bottom) {// 调暗文本内容LinearGradient(colors: [.clear,.black.opacity(0.8)], startPoint: .top, endPoint: .bottom)VStack(alignment: .leading, spacing: 12) {Text("宇夜iOS").font(.callout).foregroundColor(.gray)HStack(alignment: .bottom, spacing: 10) {Text("Ariana Grande").font(.title.bold())Image(systemName: "checkmark.seal.fill").foregroundColor(.blue).background{Circle().fill(.white).padding(3)}}Label {Text("Monthly Listeners").fontWeight(.semibold).foregroundColor(.white.opacity(0.7))} icon: {Text("62,354,659").fontWeight(.semibold)}.font(.caption)}.padding(.horizontal).padding(.bottom,25).frame(maxWidth: .infinity,alignment: .leading)}}).cornerRadius(15).offset(y: -minY)}.frame(height: 250)}// 固定在头部@ViewBuilderfunc PinnedHeaderView()->some View{let types: [String] = ["Popular","Albums","Songs","Fans also like","About"]ScrollView(.horizontal, showsIndicators: false) {HStack(spacing: 25){ForEach(types,id: \.self){type inVStack(spacing: 12){Text(type).fontWeight(.semibold).foregroundColor(currentType == type ? .white : .gray)ZStack{if currentType == type{RoundedRectangle(cornerRadius: 4, style: .continuous).fill(.white).matchedGeometryEffect(id: "TAB", in: animation)}else{RoundedRectangle(cornerRadius: 4, style: .continuous).fill(.clear)}}.padding(.horizontal,8).frame(height: 4)}.contentShape(Rectangle()).onTapGesture {withAnimation(.easeInOut){currentType = type}}}}.padding(.horizontal).padding(.top,25).padding(.bottom,5)}}
}struct Home_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

OffsetModifier - 主要是监听ScrollView的滚动

用来监听ScrollView的滚动 偏移量的改变

//
//  OffsetModifier.swift
//  SpotifyResponvieUI (iOS)
//
//  Created by lyh on 2022/8/23.
//import SwiftUI// 继承于 ViewModifier 最主要是能方便扩展一些常见的设置属性
/*比如 给Text设置字体\背景颜色\阴影效果extension Text {func songStyle() -> some View {self.font(.system(size: 24, weight: .bold)).foregroundColor(.white).shadow(radius: 20)}}⭐️如果是继承ViewModifierstruct SongTextViewModifier: ViewModifier {func body(content: Content) -> some View {content.font(.system(size: 24, weight: .bold)).foregroundColor(.white).shadow(radius: 20)}}然后直接通过Text(song).modifier(SongTextViewModifier())设置*/struct OffsetModifier: ViewModifier {@Binding var offset: CGFloat// 可选从0返回值var returnFromStart: Bool = true@State var startValue: CGFloat = 0func body(content: Content) -> some View {content.overlay {GeometryReader{proxy inColor.clear.preference(key: OffsetKey.self, value: proxy.frame(in: .named("SCROLL")).minY).onPreferenceChange(OffsetKey.self) { value inif startValue == 0{startValue = value}print(value);offset = (value - (returnFromStart ? startValue : 0))print("offset is \(offset)");}}}}
}// 偏好的关键
struct OffsetKey: PreferenceKey{static var defaultValue: CGFloat = 0static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {value = nextValue()}
}

Album - 模型

//
//  Album.swift
//  SpotifyResponvieUI (iOS)
//
//  Created by lyh on 2022/8/23.
//import SwiftUI// Ablum模型和样本数据
struct Album: Identifiable {var id = UUID().uuidStringvar albumName: Stringvar albumImage : Stringvar isLiked : Bool = false
}var albums : [Album] = [Album(albumName: "Positions", albumImage: "Album1"),Album(albumName: "The Best", albumImage: "Album2",isLiked: true),Album(albumName: "My Everything", albumImage: "Album3"),Album(albumName: "Yours Truly", albumImage: "Album4"),Album(albumName: "Sweetener", albumImage: "Album5",isLiked: true),Album(albumName: "Rain On Me", albumImage: "Album6"),Album(albumName: "Stuck With U", albumImage: "Album7"),Album(albumName: "7 rings", albumImage: "Album8",isLiked: true),Album(albumName: "Bang Bang", albumImage: "Album9"),]

【SwiftUI模块】0056、SwiftUI创建时尚的电影预订应用程序UI相关推荐

1. 【SwiftUI模块】0052、使用SwiftUI设计时尚旅行应用程序UI

   SwiftUI模块系列 - 已更新52篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.旅行.旅行App.旅行应用程序.时尚旅行 运行环境: ...

2. 【SwiftUI模块】0058、 SwiftUI设计时尚的漫画应用程序UI[用户界面]

   SwiftUI模块系列 - 已更新58篇 SwiftUI项目 - 已更新4个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.漫画.应用程序.UI.用户界面 运行环境: Swif ...

3. 【SwiftUI模块】0033、SwiftUI创建用户双击帖子时的心形动画

   SwiftUI模块系列 - 已更新33篇 SwiftUI项目 - 已更新3个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.双击动画.心形动画.动画 运行环境: SwiftUI ...

4. 【SwiftUI模块】0026、SwiftUI制作具有半透明底部标签栏滚动效果的动画轮播滑块

   SwiftUI模块系列 - 已更新26篇 SwiftUI项目 - 已更新2个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.半透明底部标签栏.滚动效果.动画轮播滑块 运行环境: ...

5. 【SwiftUI模块】0012、SwiftUI-搭建一个类似微博、网易云、抖音个人页面的头部下拉放大图片效果

   SwiftUI模块系列 - 已更新11篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.下拉放大.tableview粘性头部.头部下拉放大图 ...

6. 【SwiftUI模块】0007、SwiftUI新手指引-新手指示-聚光灯介绍说明

   SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...

7. 【SwiftUI模块】0018、SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果

   SwiftUI模块系列 - 已更新18篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.支付宝.余额宝.数字动画 运行环境: SwiftUI ...

8. 【SwiftUI模块】0032、SwiftUI搭建一个类似抖音评论模块的半页模式 - 底部抽屉

   SwiftUI模块系列 - 已更新32篇 SwiftUI项目 - 已更新3个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.抖音评论.半页模式.底部抽屉 运行环境: Swift ...

9. 【SwiftUI模块】0013、SwiftUI搭建-类似蚂蚁财富的基金累计盈亏的走势图

   SwiftUI模块系列 - 已更新13篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.基金.走势图.蚂蚁财富 运行环境: SwiftUI3 ...

最新文章

1. java分享第五天（数组）
2. 2016弱校联萌十一专场10.2
3. 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用...
4. PyCharm 查找文件名
5. 无法执行添加/移除操作，因为代码元素**是只读的
6. 深入JavaScript与.NET Framework中的日期时间（1）：基本概念与概述
7. NFC服务器在Linux,linux 安装 libnfc ,打开串口PN532
8. 全开源纵横支付多平台多功能支付系统源码
9. 3_less混和(使用类来混合)
10. 买房子还是不买房子，这是一个问题
11. BZOJ 3668: [Noi2014]起床困难综合症【二进制+贪心】
12. 面试题--------1、HashMap和HashTable的区别
13. qq android qav,33 BK.QQAVManager 音视频管理
14. 记录红米k40解BL、Root、装XPOSED
15. Windows 查看端口占用情况并关闭端口
16. 三维空间中直线间距离的计算
17. 基于嵌入式linux的课程设计课题背景,嵌入式系统课题研究背景
18. 关于做深度学习，如何配置本地工作站(CPU、GPU等一系列问题扫盲和推荐)
19. 知晓云 php,2020 知晓云小程序年度评选获奖名单发布
20. MS-DOS 命令例子

热门文章

1. oracle的shutdown命令
2. 奋斗吧，程序员——第三十五章 莫愁前路无知己，天下谁人不识君
3. 蜂巢科技融资6200万元，打响工业无人机平台争夺战
4. iOS 动态化的故事
5. 《转角的风景》重庆当代青年雕塑展开幕
6. 2006年大学生就业“力”调查：就业中的歧视与陷阱
7. 亮个相吧小宝贝儿，五款压箱底的软件
8. 计算机英语 软件维护,PC Reviver
9. 【JZOJ】【暴力】 游戏
10. 牛客小白月赛4 20180616C