SwiftUI-新手指引-新手指示-聚光灯介绍说明

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

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

### ⭐️ 额外给引导页的背景添加一个颜色值
> 默认颜色 `#000000`
> 暗黑模式 `#212121`

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

### 三、程序实现 - 过程
>思路: 
1.创建主页 `OnBoarding`
2.搭建主页进行偏移的逻辑处理 `OffsetTabView`
3.添加主页介绍信息的模型`BoardingScreen`
4.处理滚动的时候 通过 主页进行绑定`OffsetPageTabView`的偏移量`offset`进行监听 是否要改变当前页面
5.并且通过一个`圆形矩形背景`做一个`自身360`的旋转动画
⭐️新手指示效果:
> 1. 获取根控制器
> 2. 从根控制器获取view
> 3. 从根控制器的view 里面添加一个view 用来当做聚光灯的背景
> 4. 从聚光灯背景中反向提取指定区域 设置成白色 也就是高光效果

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

#### 1.1.引入资源文件和颜色
> 颜色
> screen1 `#D2BA64`
> screen2 `#5050CF`
> screen3 `#7EBA64`
> screen4 `#504F5F`
> 引导页介绍图片4张
> 图片名称 和 颜色名称一样 。方便统一根据名字设置对应的页面

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

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

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

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

#### 2. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`OffsetPageTabView` 
> 具体实现和 [0005、SwiftUI-粘性动画指示器引导页](https://blog.csdn.net/qq_42816425/article/details/126367573)  案例一样
> 如果上一个案例 你有跟我实现 - 那么可以直接拖拽过来即可

![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc11a5d821d4da1b9d465dcc4b354e9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/895b64374fbd4d1faa33a5343b5d6ba8.png)

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

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

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

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

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

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

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

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

### Code

#### ContentView - 主窗口
> 主要是展示主窗口`OnBoarding`

```swift
//
//  ContentView.swift
//  Shared
//
//  Created by 李宇鸿 on 2022/8/17.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
       OnBoarding()
    }
}

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

```

#### OnBoarding - 引导页
> 思路
> 1. 主要部分核心模块 - 滚动页面 - UI创建`包含图片、两个文本`
> 2. 叠加层 - 最顶层  做了指示器 和 跳过、下一页的按钮 `指示器使用Circle创建` 和 做了登录和注册按钮
> 3. 创建引导页面数据、和滚动核心UI`OffsetPageTabView`
> 4. 添加滚动的时候 做一个`圆形矩形背景` 进行`360度`自身旋转
> 5. ⭐️给需要新手指示的 添加聚光灯效果 - 通过View的扩展 - 使得每个控件都可以拥有聚光效果 - 然后设置当前的聚光位置

```swift
//
//  OnBoarding.swift
//  OnBoardingAnimation (iOS)
//
//  Created by 李宇鸿 on 2022/8/17.
//

import SwiftUI

struct OnBoarding: View {
    @State var offset : CGFloat = 0
    @State var showLight : Bool = true
//    @State var currentHighlight : Int = 0
    @State var currentHighlight : Int = 1 // 聚光灯从1开始 
    var body: some View {
        // 自定义页面视图…
        OffsetPageTabView(offset:$offset){
            
            HStack(spacing:0){
                ForEach(boardingScreens) { screen in
                    
                    VStack(spacing:15){
                        
                      Image(screen.image)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width:getScrrenBounds().width - 100,height: getScrrenBounds().width - 100)
                        // 小屏幕采用……
                            .scaleEffect(getScrrenBounds().height < 750 ? 0.9 : 1)
                            .offset(y:getScrrenBounds().height < 750 ? -100 :  -120)
                        
                        
                        VStack(alignment:.leading,spacing: 12){
                        
                            Text(screen.title)
                                .font(.largeTitle.bold())
                                .foregroundColor(.white)
                                .padding(.top,20)
                            
                            Text(screen.description)
                                .fontWeight(.semibold)
                                .foregroundColor(.white)

}
                        .frame(maxWidth:.infinity,alignment:.leading)
                        .offset(y:-70)
                        
                    }
                    .padding()
                    .frame(width:getScrrenBounds().width)
                    .frame(maxHeight: .infinity)
//                    .background(Color(screen.image))
                        
                }
                
            }
         
            
            
        }
        // 动画
        // 使用一个圆形矩形做一个背景动画 基于自身白色圆形矩形进行一个360动画效果
        .background(
            RoundedRectangle(cornerRadius: 50)
                .fill(.white)
            // 大小为图像大小…
                .frame(width:getScrrenBounds().width - 100,height: getScrrenBounds().width - 100)
                .scaleEffect(2)
                .rotationEffect(.init(degrees: 25))
                .rotationEffect(.init(degrees: getRotation()))
                .offset(y: -getScrrenBounds().width + 20)
            ,alignment: .leading
        )
        
        
        .background(Color("screen\(getIndex() + 1)"))
        .animation(.easeInOut,value: getIndex())
        // 适配刘海屏
        .ignoresSafeArea(.container,edges: .all)
        // 叠加层 放在最前面
        .overlay(
            VStack{
                HStack(spacing:25){
                    Button  {
                        
                    } label: {
                        Text("Login")
                            .fontWeight(.semibold)
                            .foregroundColor(.black)
                            .padding(.vertical,20)
                            .frame(maxWidth: .infinity)
                            .background(Color.white,in:RoundedRectangle(cornerRadius: 12))
                    }
                    // 增加聚光灯视野
                    .spotlight(enabled: currentHighlight == 1, title: "Login into Account")
                    
                    
                    Button  {
                        
                    } label: {
                        Text("SignUp")
                            .fontWeight(.semibold)
                            .foregroundColor(.black)
                            .offset(x:-5)
                            .padding(.vertical,20)
                            .frame(maxWidth: .infinity)
                            .background(Color.white,in:RoundedRectangle(cornerRadius: 12))
                    }
                    .spotlight(enabled: currentHighlight == 2, title: "SignUp New Account")

}
                
                
                HStack{
                    
                    Button{
                        
                    } label: {
                        Text("Skip")
                            .fontWeight(.semibold)
                            .foregroundColor(.white)
                    }
                    .spotlight(enabled: currentHighlight == 3, title: "Skip Intro's")

// 指示器
                    HStack(spacing:8){
                        ForEach(boardingScreens.indices,id:\.self){
                            index in
                            Circle()
                                .fill(.white)
                                .opacity(index == getIndex() ? 1 : 0.4)
                                .frame(width: 8, height: 8)
                                .scaleEffect(index == (getIndex()) ? 1.3 : 0.85)
                                .animation(.easeInOut,value:getIndex())
                        }
                    }
                    .frame(maxWidth:.infinity)
                    .spotlight(enabled: currentHighlight == 4, title: "Indicator's")

// 用于测试圆形形状
//                    Circle()
//                        .fill(.red)
//                        .frame(width: 45, height: 45)
//                        .spotlight(enabled: currentHighlight == 0, title: "")

Button{
                        
                        //设置Mac Offset…
                        // Max 4个屏幕，所以Max将是3*宽
                        offset = min(offset + getScrrenBounds().width,getScrrenBounds().width * 3)
                    } label: {
                        Text("Next")
                            .fontWeight(.semibold)
                            .foregroundColor(.white)
                    }
                    .spotlight(enabled: currentHighlight == 5, title: "Indicator's")

}
                .padding(.top,30)
                .padding(.horizontal,8)
                
                
            }
                .padding()
            ,alignment: .bottom
        )
        .onTapGesture{
            currentHighlight  += 1
        }
        
    }
    
    
    // 得到旋转
    func getRotation()-> Double{
        let progress = offset / (getScrrenBounds().width * 4 )
        
        // 做一个完整的旋转…
        let rotation = Double(progress) * 360
        return rotation
    }
    
    
    // 基于偏移改变背景颜色…
    func getIndex() -> Int {
        let progress = (offset / getScrrenBounds().width).rounded()
        return Int(progress)
    }
}

struct OnBoarding_Previews: PreviewProvider {
    static var previews: some View {
        OnBoarding()
    }
}

// 扩展视图获得屏幕边界…
extension View {
    func getScrrenBounds()-> CGRect{
        return UIScreen.main.bounds
    }
}

```

#### OffsetPageTabView.swift -偏移Tab视图逻辑处理
> 主要是做 滚动页面的逻辑处理
> 思路
> 1. 基于ScrollView进行处理
> 2. 提供初始化构造器 - 方便上层通过偏移量进行 调用初始化  `init(offset: Binding<CGFloat>  , @ViewBuilder content: @escaping()->Content)`
> 3. 监听ScrollView滚动的代理、更新当前的偏移量 `class Coordinator`
> 4. 提供滚动的代理 滚动到下一个页面 进行是否更新当前的偏移量`updateUIView`
> 比  [0005、SwiftUI-粘性动画指示器引导页](https://blog.csdn.net/qq_42816425/article/details/126367573)  `多做了一个清除背景操作`

```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
        
        // 清除背景
        hostview.view.backgroundColor = .clear

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()
    }
}

```

#### BoardingScreen - 模型
>  介绍模型

```swift
import SwiftUI

struct BoardingScreen: Identifiable {
    var id = UUID().uuidString
    var image : String
    var title : String
    var description : String
}

// 相同的标题和描述…
let title = "Easy Payments with \n Walletoy"
let description = "Samll business can receive device \npayment super fast and super easy"

// 因为图片名称和BG颜色名称相同…

// 样本模型屏幕…
var boardingScreens : [BoardingScreen] = [
    
    BoardingScreen(image: "screen1", title: title, description: description),
    BoardingScreen(image: "screen2", title: title, description: description),
    BoardingScreen(image: "screen3", title: title, description: description),
    BoardingScreen(image: "screen4", title: title, description: description)

]

```

#### ⭐️Extensions - 扩展 `用来处理 新手指引`
> 思路 
> 1. 获取根控制器
> 2. 从根控制器获取view
> 3. 从根控制器的view 里面添加一个view 用来当做聚光灯的背景
> 4. 从聚光灯背景中反向提取指定区域 设置成白色 也就是高光效果

```swift
//
//  Extensions.swift
//  OnBoardingAnimation (iOS)
//
//  Created by 李宇鸿 on 2022/8/18.
//

import SwiftUI

extension View{
    // MARK:自定义Spolitght编辑
    func spotlight(enabled: Bool,title: String = "")->some View{
        return self
            .overlay{
                if enabled{
                    //获取当前内容大小
                    GeometryReader{proxy in
                        let rect = proxy.frame(in:.global)
                        SpotlightView(rect:rect, title: title) {
                            self
                        }
                    }
                }
            }
            
    }
    
    
    //屏幕边界
    func screenBounds()-> CGRect{
        return UIScreen.main.bounds
    }
    
    // 获取根控制器
    func rootController()-> UIViewController {
        guard let screen = UIApplication.shared.connectedScenes.first as? UIWindowScene else
        {
            return .init()
        }
        guard let root = screen.windows.first?.rootViewController else
        {
            return .init()
        }

return root
        
    }
    
}

// 给当前类文件做一个预览窗口
struct OnBoarding_Spotlight_Previews: PreviewProvider {
    static var previews: some View {
        OnBoarding()
    }
}

//聚光灯视野
struct SpotlightView<Content: View> : View{
    var content : Content
    
    var rect : CGRect
    
    var title : String
    
    init(rect:CGRect, title: String,@ViewBuilder content: @escaping ()-> Content){
        self.content = content()
        self.title = title
        self.rect = rect
    }
    
    @State var tag: Int = 1009
    
    var body : some View{
        Rectangle()
        // 如果你想避免用户互动 就不要使用clear
            .fill(.clear)
//            .fill(.white.opacity(0.02))

.onAppear{
                addOverlayView()
            }
            .onDisappear{
                removeOverlay()
            }
    }
    
    
    // 当视图消失时移除覆盖层
    func removeOverlay(){
        rootController().view.subviews.forEach { view in
            if view.tag == self.tag{
                view.removeFromSuperview()
            }
        }
    }
    
    //在当前视图上添加一个额外视图
    //从根控制器中提取UIView
    func addOverlayView(){
        
        // 转换SwiftUI View到UIKit
        let hostingView = UIHostingController(rootView: OverlaySwiftUIView())
        hostingView.view.frame = screenBounds()
        hostingView.view.backgroundColor = .clear
        //有时候SiwftUI On Appear会被调用两次
        //添加到当前视图
        // 要标识添加的是哪个视图，可以向视图添加一个标记
        if self.tag == 1009
        {
            self.tag = generateRandom()
        }
        hostingView.view.tag = self.tag
        
        rootController().view.subviews.forEach { view in
            if view.tag == self.tag{return}
        }
        
        // 添加到当前视图
        rootController().view.addSubview(hostingView.view)
    }
    
    @ViewBuilder
    // 叠加的view
    func  OverlaySwiftUIView()-> some View {
   
        ZStack{
            Rectangle()
                .fill(Color("Spotlight").opacity(0.8))
            // 反向屏蔽当前高光点
                .mask({
                    
                    // 如果高度和宽度几乎相同，那么使它圆形esle，圆形
                    let radius = (rect.height / rect.width) > 0.7 ? rect.width : 6
                    
                    Rectangle()
                        .overlay(
                            content
                                .frame(width:rect.width,height:rect.height)
                            // 特别亮的小区域
                                .padding(10)
                                .background(.white,in: RoundedRectangle(cornerRadius: radius))
                            // 放置在正确的位置
                                .position()
                             //位置将把内容放在左上角
                            //在MidXY的帮助下，我们将它设置在正确的位置
                                .offset(x:rect.midX,y:rect.midY)
                            
                            // The Exact coent Size
                            // 确切的股份大小
                                .blendMode(.destinationOut)
                        )
                })
            
            // 显示文本
            if title != "" {
                Text(title)
                    .font(.title.bold())
                    .foregroundColor(.white)
                    .position()
                
                // 如果是底部，则在上面或下面显示文本
                    .offset(x:screenBounds().midX,y:rect.maxY > (screenBounds().height - 150)  ? (rect.minY - 150) : (rect.maxY + 150) )
            }
        }
        .frame(width: screenBounds().width, height: screenBounds().height)
        .ignoresSafeArea()
    }
    
    // 标签的随机数
    func generateRandom()-> Int{
        let random = Int(UUID().uuid.0)
        
        // 检查是否有一个视图已经拥有这个标签
        let subViews = rootController().view.subviews
        
        for index in subViews.indices {
            // 相同的话 就一直递归 直到找到不同View
            if subViews[index].tag == random {
                return generateRandom()
            }
        }
        
        return random
    }
}

```

SwiftUI-新手指引-新手指示-聚光灯介绍说明

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子