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

技术:SwiftUI、SwiftUI3.0、基金、走势图、蚂蚁财富
运行环境:
SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI做一个一个类似蚂蚁财富的基金累计盈亏的走势图 效果

蚂蚁财富-基金盈亏效果图

详细

一、运行效果

二、项目结构图

三、程序实现 - 过程

思路:
1.创建头部模块
3.搭建底部模块
2.搭建图表模块 - 单独抽取

1. 绘制走势图的图表
2. 设置背景
3. 画出当前图表的指针表
4. 通过拖拽手势 进行进行指针表 更新位置

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

1.1.引入资源文件和颜色

颜色
BG #FCF9FF
Gradient1 #9555AC
Gradient2 #D9807D
随机图片9张
个人大图背景1张
logo1张

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

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

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

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

Code

ContentView - 主窗口

主要是展示主窗口Home

//
//  ContentView.swift
//  Shared
//
//  Created by lyh on 2022/8/24.
//import SwiftUIstruct ContentView: View {var body: some View {Home()}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

Home - 主页

思路

1. 主要就是展示
   头部
图形(逻辑比较复杂就单独抽取封装)
   底部的卡片

//
//  Home.swift
//  CustomScrollViewBottomShee (iOS)
//
//  Created by lyh on 2022/8/24.
//import SwiftUIstruct Home: View {var body: some View {VStack{HStack{Button  {} label: {Image(systemName: "slider.vertical.3").font(.title2)}Spacer()Button{}label:{Image("ijustine").resizable().aspectRatio( contentMode:.fit).frame(width: 45, height: 45).clipShape(Circle())}}.padding().foregroundColor(.black)VStack(spacing:10){Text("Total Balance").fontWeight(.bold)Text("$51 200").font(.system(size: 38,weight:.bold))}.padding(.top,20)Button{} label: {HStack(spacing:5){Text("Income")Image(systemName: "chevron.down")}.font(.caption.bold()).padding(.vertical,10).padding(.horizontal).background(.white, in: Capsule()).foregroundColor(.black).shadow(color: .black.opacity(0.05), radius: 5, x: 5, y: 5).shadow(color: .black.opacity(0.05), radius: 5, x: -5, y: -5)}// 图形视图…LineGraph(data: samplePlot)// 最大尺寸.frame(height:220).padding(.top,25)Text("Shorcuts").font(.title.bold()).frame(maxWidth: .infinity,alignment: .leading).padding().padding(.top)ScrollView(.horizontal, showsIndicators: false) {HStack(spacing: 20){CardView(image: "youtube", title: "YouTube", price: "$ 26", color: Color("Gradient1"))CardView(image: "apple", title: "Apple", price: "$ 2600", color: Color("Gradient2"))CardView(image: "xbox", title: "XBox", price: "$ 120", color: Color.green)}.padding()}}.frame(maxWidth:.infinity,maxHeight: .infinity,alignment: .top).background(Color("BG"))}// 卡片视图@ViewBuilderfunc CardView(image: String,title: String,price: String,color: Color)->some View{VStack(spacing: 15){Image(image).resizable().renderingMode(.template).aspectRatio(contentMode: .fit).foregroundColor(.white).frame(width: 35, height: 35).padding().background(color,in: Circle())Text(title).font(.title3.bold())Text(price).fontWeight(.semibold).foregroundColor(.gray)}.padding(.vertical).padding(.horizontal,25).background(.white,in: RoundedRectangle(cornerRadius: 15))// shadows....shadow(color: .black.opacity(0.05), radius: 5, x: 5, y: 5).shadow(color: .black.opacity(0.03), radius: 5, x: -5, y: -5)}}struct Home_Previews: PreviewProvider {static var previews: some View {Home()}
}// 图…的样本图
let samplePlot: [CGFloat] = [989,1200,750,790,650,950,1200,600,500,600,890,1203,1400,900,1250,
1600,1200
]

LineGraph - 主要是用来画图表

思路

1. 绘制走势图的图表
2. 设置背景
3. 画出当前图表的指针表
4. 通过拖拽手势 进行进行指针表 更新位置

//
//  LineGraph.swift
//  CustomScrollViewBottomShee (iOS)
//
//  Created by lyh on 2022/8/24.
//import SwiftUI// Custom View...
struct LineGraph: View {// 当前图表@State var currentPlot = ""// 偏移@State var offset : CGSize = .zero@State var showPlot = false@State var translation : CGFloat = 0var data : [CGFloat]var body: some View {GeometryReader{proxy inlet height = proxy.size.heightlet width = (proxy.size.width) / CGFloat(data.count-1)let maxPoint = (data.max() ?? 0) + 100let points = data.enumerated().compactMap { item -> CGPoint in// 获取进度\和高度相乘let progress = item.element / maxPointlet pathHeight = progress * height//宽度let pathWidth = width * CGFloat(item.offset)// 因为我们需要的是顶部而不是底部…return CGPoint(x:pathWidth,y:-pathHeight + height)}ZStack{// 将图转换为点// 路径Path {path in// 画点path.move(to: CGPoint(x: 0, y: 0))path.addLines(points)}.strokedPath(StrokeStyle(lineWidth: 2.5, lineCap: .round, lineJoin: .round)).fill(// Gradient...// 渐变颜色LinearGradient(colors: [Color("Gradient1"),Color("Gradient2"),], startPoint: .leading, endPoint: .trailing))FillBG()// 剪裁的形状…….clipShape(Path {path in// 画点path.move(to: CGPoint(x: 0, y: 0))path.addLines(points)path.addLine(to: CGPoint(x: proxy.size.width, y: height))path.addLine(to: CGPoint(x:0, y: height))}).padding(.top,15)}.overlay(// 阻力指标……VStack(spacing:0){Text(currentPlot).font(.caption.bold()).foregroundColor(.white).padding(.vertical,6).padding(.horizontal,10).background(Color("Gradient1"),in:Capsule()).offset(x:translation < 10 ? 30: 0).offset(x:translation > (proxy.size.width - 60) ? -30 : 0)Rectangle().fill(Color("Gradient1")).frame(width:1,height:40)Circle().fill(Color("Gradient1")).frame(width:22,height:22).overlay(Circle().fill(.white).frame(width:10,height:10))Rectangle().fill(Color("Gradient1")).frame(width:1,height:50)}// frame设置...// 锻造计算.frame(width:80,height:170)// 170 / 2 = 85 - 15 = 70 => circle ring size....offset(y:70).offset(offset).opacity(showPlot ? 1 : 0),alignment: .bottomLeading).contentShape(Rectangle()).gesture(DragGesture().onChanged({ value inwithAnimation{showPlot = true}let translation = value.location.x - 40// 得到指数……let index = max(min(Int((translation / width).rounded() + 1),data.count - 1),0)currentPlot = "$ \(data[index])"self.translation = translation// 删除一半宽度……offset = CGSize(width: points[index].x - 40, height: points[index].y - height)}).onEnded({ value inwithAnimation{showPlot = false}}))}.overlay(VStack(alignment: .leading){let max = data.max() ?? 0Text("$ \(Int(max))").font(.caption.bold())Spacer()Text("$ 0").font(.caption.bold())}.frame(maxWidth:.infinity,alignment: .leading)).padding(.horizontal,10)}@ViewBuilderfunc FillBG()->some View {// 路径背景颜色…LinearGradient(colors: [Color("Gradient2").opacity(0.3),Color("Gradient2").opacity(0.3),Color("Gradient2").opacity(0.1)]+ Array(repeating: Color("Gradient1").opacity(0.1), count: 4)+ Array(repeating: Color.clear, count: 2),startPoint: .top, endPoint: .bottom)}
}struct LineGraph_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

7. 【SwiftUI模块】0056、SwiftUI创建时尚的电影预订应用程序UI

   SwiftUI模块系列 - 已更新56篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.电影.电影预定.订票 运行环境: SwiftUI4. ...

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

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

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

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

最新文章

1. 安卓okhttp上传jason和图片_微信图片总是「已过期或被清理」？简单 3 招，可摆脱烦恼...
2. GBin1分享：jQuery新手技巧之“避免过多使用$('.someclass')”
3. QT——设置可执行文件图标
4. 奇门对接需求设计_从2020《奇门遁甲》看网络电影精品化的“正确打开方式”...
5. linux 测试网络端口通不通_【干货】网络中的各种互通与不通
6. 多线程日记（17.5.3）
7. flash与CPU连接及flash属性描述文件
8. leetcode136只出现一次的数字
9. js map遍历 修改对象里面的值_前端面试之你必须要懂的原生JS
10. php 随机经纬度,随机像mariadb插入10万数据，包括经纬度以及调用百度map API获取...
11. MATLAB生成（对角线上元素相同的）三对角矩阵的实例
12. 前端常用的八种数据结构
13. chromium的下载和编译(流程详解)
14. 无线射频专题《无线局域网排错，第二层重传问题7@远近问题》
15. QT报错：The inferior stopped because it received a signal from the Operating System.
16. 【word】系统内置样式
17. 基于linux的qos编程接口研究与分析,基于Linux的QoS编程接口研究与分析（2）
18. DSP28335—FLASH烧写的方法
19. 一招解决matplot绘图中文无法显示的问题
20. 用长微博工具发布长微博

热门文章

1. android 酷炫菜单
2. 原生js封装http请求，get、post请求
3. linux 采集卡 设备名,横跨Windows、Linux等平台的高性能图像采集卡PCIe-8604
4. 项目管理中的冲突是什么？
5. 阿里图标库盒子文字阴影圆角
6. 将镜像推送到阿里云私有仓库
7. Kubernete 安装
8. linux提示8080端口被占用
9. 物联网会是下一个支柱产业吗？
10. Android build.gradle 配置