SwiftUI-粘性动画指示器引导页

立即下载用AI写一个

发布时间：2022-08-22

0人 | 浏览：971次 | 收藏 |

技术：SwiftUI3.0、动画指示器、粘性动画指示器、引导页

运行环境：SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI做一个`粘性动画指示器引导页` 的案例

详细

### 一、运行效果
![请添加图片描述](https://img-blog.csdnimg.cn/b865f899e1194e98866d542837f01f8f.gif)

### 二、项目结构图
![在这里插入图片描述](https://img-blog.csdnimg.cn/f6da8141d574476ea88649656d4fd412.png)

### 三、程序实现 - 过程
>思路: 
1.创建主页 `Home`
2.搭建主页进行偏移的逻辑处理 `OffsetTabView`
3.添加主页介绍信息的模型`Intro`
4.处理滚动的时候 通过 主页进行绑定`OffsetPageTabView`的偏移量`offset`进行监听 是否要改变当前页面

#### 1.创建一个项目命名为 `AnimatedIndicator`
![在这里插入图片描述](https://img-blog.csdnimg.cn/62c877296f7c4a448a44407c45550902.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/099de61c2230437db37a6acd0ab0333b.png)

#### 1.1.引入资源文件和颜色
> 颜色
> Blue `#5EC7F9`
> Pink `#EB627A`
> Yellow `#F7CE46`
> 引导页介绍图片3张

![在这里插入图片描述](https://img-blog.csdnimg.cn/097230456d7c4871a4446c1d47f102c4.png)

#### 2. 创建一个虚拟文件`New Group` 命名为 `View`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/05f2da65600f415eb12b2c64736c393b.png)

#### 2. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`Home`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/83ca565a956341feb36920ce4439cee2.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/cc227b7831854c56bf42b93911f5ac5b.png)

#### 2. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`OffsetTabView`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc11a5d821d4da1b9d465dcc4b354e9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/82a3e587744c46f0af08deabfd25a03f.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/c6edc65dd3a84f8ea7bcfb0556c81280.png)

#### 3. 创建一个虚拟文件`New Group` 命名为 `Model`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/0ef477eadb074e6784a642d75cc40c87.png)

#### 3. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`Intro` 、并且删除预览视图、改造成模型 继承`Identifiable`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc11a5d821d4da1b9d465dcc4b354e9.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/55480111ffe5412ca213d4f15d57b4dd.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/f9c6569826e846438537b6deab9cc960.png)

### Code

#### ContentView - 主窗口
> 主要是展示主窗口`Home`
> 并且获取屏幕总高度 - 传递给 Home页面

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
//        Home().preferredColorScheme(.dark)
        
        // Getting screenSzie Globally....
        GeometryReader{proxy in
            let size = proxy.size
            Home(screentSize:size).preferredColorScheme(.dark)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

#### Home - 主页
> 思路
> 1. 顶部模块 - 吃豆人图像
> 2. 中间部分核心模块 - 滚动页面 - UI创建`包含图片、两个文本`
> 3. 底部模块 - 指示器 和 下一页的按钮 `指示器使用Capsule创建`
> 4. 创建介绍页面数据、和滚动核心UI`OffsetPageTabView`

```swift
//
//  Home.swift
//  AnimatedIndicator (iOS)
//
//  Created by 李宇鸿 on 2022/8/16.
//

import SwiftUI

struct Home: View {
    
    var screentSize : CGSize
    @State var offset : CGFloat = 0
    
    var body: some View {
    
        VStack{
            
            Button  {
                
            } label: {
                Image("pacman")
                    .resizable()
                    .renderingMode(.template)
                    .foregroundColor(.white)
                    .frame(width: 30, height: 30)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
            
            OffsetPageTabView(offset: $offset) {
        
                HStack(spacing:0){
                    ForEach(intros){ intro in
                        VStack{
                            Image(intro.image)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                    .frame(height: screentSize.height/3)
                            
                            VStack(alignment: .leading, spacing: 22) {
                                Text(intro.title)
                                    .font(.largeTitle.bold())
                                
                                Text(intro.description)
                                    .fontWeight(.semibold)
                                    .foregroundColor(.secondary)

}
                            .foregroundStyle(.white)
                            .padding(.top,50)
                            .frame(maxWidth:.infinity,alignment:.leading)
                        }
                        .padding()
                        // 设置最大宽度
                        .frame(width: screentSize.width)
                    }
                }
                
            }
            
            // 动画指标……
            HStack(alignment:.bottom){
                
                // 指示器
                HStack(spacing:12){
                    ForEach(intros.indices,id:\.self){index in
                        Capsule()
                            .fill(.white)
                        // 仅为当前索引增加宽度…
                        // 当前指示器宽度为20 其他为7
                            .frame(width:getIndex() == index ? 20 :  7, height: 7)
                          
                    }
                }
                
                .overlay(
                    Capsule()
                        .fill(.white)
                        .frame(width:20, height: 7)
                        .offset(x:getIndicatorOffset())
                    ,alignment: .leading
                )
                
                .offset(x:10,y:-15)
                
                Spacer()
                Button  {
                    // 更新偏移量
                    let index = min(getIndex() + 1, intros.count - 1)
                    offset = CGFloat(index) * screentSize.width
                    
                } label: {
                    Image(systemName: "chevron.right")
                        .font(.title2.bold())
                        .foregroundColor(.white)
                        .padding(20)
                        .background(
                            
                            intros[getIndex()].color,
                            in: Circle()
                        )
                }

}
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        // 测试滚动监听
//        .onChange(of: offset) { _ in
//            print(offset)
//        }
        
        //   当索引改变时动画…
        .animation(.easeOut,value: getIndex())

}
    
    
    // 偏移量为指标……
    func getIndicatorOffset()->CGFloat{
        let progress = offset / screentSize.width
        // 12 =空格
        // 7 =圆的大小。
        let maxWidth : CGFloat = 12 + 7
        return progress * maxWidth
        
        
    }
    
    // 据offset扩展索引…
    func getIndex()-> Int{
        let progress = round(offset / screentSize.width)
        
        // 安全操作
        let index = min(Int(progress),intros.count - 1)
        return index
//        return Int(progress)
    }
    
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

#### OffsetPageTabView.swift -偏移Tab视图逻辑处理
> 主要是做 滚动页面的逻辑处理
> 思路
> 1. 基于ScrollView进行处理
> 2. 提供初始化构造器 - 方便上层通过偏移量进行 调用初始化  `init(offset: Binding<CGFloat>  , @ViewBuilder content: @escaping()->Content)`
> 3. 监听ScrollView滚动的代理、更新当前的偏移量 `class Coordinator`
> 4. 提供滚动的代理 滚动到下一个页面 进行是否更新当前的偏移量`updateUIView`
>

```swift

import SwiftUI

// 自定义视图泰式将返回填充控件的偏移量…
struct OffsetPageTabView<Content: View>: UIViewRepresentable  {
    
    var content: Content
    @Binding var offset : CGFloat
    func makeCoordinator() -> Coordinator {
        return OffsetPageTabView.Coordinator(parent: self)
    }
    
    
    init(offset: Binding<CGFloat>  , @ViewBuilder content: @escaping()->Content){
        self.content = content()
        self._offset = offset
    }

func makeUIView(context: Context) -> UIScrollView {
        let scrollview = UIScrollView()
        
        // 提取SwiftUI View并嵌入到UIKit ScrollView…
        let hostview = UIHostingController(rootView: content)
        hostview.view.translatesAutoresizingMaskIntoConstraints = false
        
        let constraints = [
            hostview.view.topAnchor.constraint(equalTo: scrollview.topAnchor),
            hostview.view.leadingAnchor.constraint(equalTo: scrollview.leadingAnchor),
            hostview.view.trailingAnchor.constraint(equalTo: scrollview.trailingAnchor),
            hostview.view.bottomAnchor.constraint(equalTo: scrollview.bottomAnchor),
            
            //如果你使用的是垂直填充…
            //然后不要声明高度限制…
            hostview.view.heightAnchor.constraint(equalTo: scrollview.heightAnchor)

]
        
        scrollview.addSubview(hostview.view)
        scrollview.addConstraints(constraints)
        
        // 启用分页
        scrollview.isPagingEnabled = true
        scrollview.showsVerticalScrollIndicator = false
        scrollview.showsHorizontalScrollIndicator = false
        
        
        // 设置代理
        scrollview.delegate = context.coordinator
        return scrollview
        
    }
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        //只有当offset被手动更改时才需要更新…
        //检查当前和滚动视图的偏移量…
        let currentOffset = uiView.contentOffset.x
        if currentOffset != offset {
            print("updating");
            uiView.setContentOffset(CGPoint(x: offset, y: 0),animated:true)
        }
   
    }
    
    // 页面抵消……
    class Coordinator : NSObject,UIScrollViewDelegate {
        var parent : OffsetPageTabView
        init(parent: OffsetPageTabView){
            self.parent = parent
        }
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            let offset = scrollView.contentOffset.x
            parent.offset = offset
        }
    }
    
    
}

struct OffsetPageTabView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

#### Intro - 模型
>  介绍模型

```swift
import SwiftUI

// 介绍模型和样本介绍的…
struct Intro: Identifiable{
    var id = UUID().uuidString
    var image: String
    var title: String
    var description: String
    var color: Color
}

var intros : [Intro] = [

Intro(image: "food2", title: "Choose your favourite menu", description: "But they are not the inconvenience that our pleasure.",color: Color("Blue")),
    Intro(image: "food1", title: "Find the best price", description: "There is no provision to smooth the consequences are.",color: Color("Yellow")),
    Intro(image: "food3", title: "Your food is ready to be delivered", description: "ter than the pain of the soul to the task.",color: Color("Pink")),

]

```

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

SwiftUI-粘性动画指示器引导页

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子