欢迎页

iOS 欢迎页让你能够极其轻松地创建引导页、更新说明，或者任何你能想象到的东西！这个项目背后的主要想法是尽可能地遵循 Apple 原生引导页的设计，因此你始终可以确信它们在 iPhone SE 屏幕以及 iPad Pro 巨大的 12.9 英寸显示屏上看起来都很棒！

SwiftUI

要在 SwiftUI 中创建一个欢迎页，只需将 `.welcomeSheet` 视图修饰符添加到你的视图，并将页面数组作为参数传递即可。

import SwiftUI
import WelcomeSheet

struct ContentView: View {
    @State private var showSheet = false
    
    let pages = [
        WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
            WelcomeSheetPageRow(imageSystemName: "rectangle.stack.fill.badge.plus",
                                title: "Quick Creation",
                                content: "It's incredibly intuitive. Simply declare an array of pages filled with content."),
            
            WelcomeSheetPageRow(imageSystemName: "slider.horizontal.3",
                                title: "Highly Customisable",
                                content: "Match sheet's appearance to your app, link buttons, perform actions after dismissal."),
            
            WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone",
                                title: "Works out of the box",
                                content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
        ])
    ]
    
    var body: some View {
        Button("Show sheet") {
            showSheet.toggle()
        }
        .welcomeSheet(isPresented: $showSheet, pages: pages)
    }
}

.welcomeSheet

当您提供的 Boolean 值的绑定为 true 时，.welcomeSheet 会呈现包含给定页面的欢迎页。

.welcomeSheet(isPresented: $showSheet, 
              onDismiss: { /* Run this code when sheet is dismissed */ }, 
              isSlideToDismissDisabled: true, 
              preferredColorScheme = .dark,
              pages: pages)

isPresented - bool 绑定。当设置为 true 时，呈现页面。
onDismiss - 页面关闭后调用的闭包。
isSlideToDismissDisabled - 当设置为 true 时，禁用页面的滑动关闭手势。
preferredColorScheme - 覆盖默认的配色方案。
pages - 要按时间顺序显示的页面数组。

UIKit

要在 UIKit 中创建一个欢迎页，创建 WelcomeSheetController 并从你的 ViewController 呈现它。

class ViewController: UIViewController {

    @IBOutlet weak var showSheetButton: UIButton!

    let pages = [
        WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
            WelcomeSheetPageRow(imageSystemName: "rectangle.stack.fill.badge.plus",
                                title: "Quick Creation",
                                content: "It's incredibly intuitive. Simply declare an array of pages filled with content."),
            
            WelcomeSheetPageRow(imageSystemName: "slider.horizontal.3",
                                title: "Highly Customisable",
                                content: "Match sheet's appearance to your app, link buttons, perform actions after dismissal."),
            
            WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone",
                                title: "Works out of the box",
                                content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
        ])
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        showSheetButton.addTarget(self, action: #selector(showSheet), for: .touchUpInside)
    }

    @objc func showSheet() {
        let sheetVC = WelcomeSheetController()
        sheetVC.pages = pages
        sheetVC.onDismiss = sheetDismissed

        present(sheetVC, animated: true)
    }

    func sheetDismissed() {
        print("Sheet dismissed")
    }
}

WelcomeSheetController

WelcomeSheetController 控制器，用于创建、配置和呈现页面。

let sheetVC = WelcomeSheetController()
sheetVC.pages = pages
sheetVC.onDismiss = { /* Run this code when sheet is dismissed */ }
sheetVC.isModalInPresentation = true

present(sheetVC, animated: true)

pages - 要按时间顺序显示的页面数组。
onDismiss - 页面关闭后调用的闭包。
isModalInPresentation - 当设置为 true 时，禁用页面的滑动关闭手势。

模型

用于配置页面的对象。每个模型还拥有一组 UIKit 数据初始化器。

WelcomeSheetPage

WelcomeSheetPage 描述页面内容的类型。

WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
    // Rows
],
mainButtonTitle: "Let's go!",
accentColor: Color.purple, 
optionalButtonTitle: "About Welcome Sheet...", 
optionalButtonURL: URL(string: "https://github.com/MAJKFL/Welcome-Sheet"))

title - 显示在顶部的大标题。
rows - 正文中的内容行。
mainButtonTitle - 主按钮的可选标题。默认为 "Continue"。
accentColor - 用于按钮的颜色。当设置为 nil 时，使用默认的强调色。
optionalButtonTitle - 可选按钮的标题。
optionalButtonURL - 点击可选按钮时要打开的 URL。

WelcomeSheetPageRow

WelcomeSheetPageRow 描述行的内容。

WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone", // Or `image: Image("ExampleImageName")`
                    accentColor: Color.green,
                    title: "Works out of the box",
                    content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")

imageSystemName - 显示在行首的图像的 SF Symbol 名称。
image - 显示在行首的图像。
accentColor - 用于图像的颜色。当设置为 nil 时，使用默认的强调色。
title - 显示在内容上方的标题。
content - 显示在标题下方的文本。

Decodable 支持

你可以从 JSON 解码页面。

[
   {
      "optionalButtonURL":"https:\/\/github.com\/MAJKFL\/Welcome-Sheet",
      "accentColor":"BF5AF2",
      "isShowingOptionalButton":true,
      "title":"Welcome to Welcome Sheet",
      "rows":[
         {
            "accentColor":"63E6E1",
            "title":"Quick Creation",
            "content":"Sheet creation is incredibly intuitive. Simply create an array of pages filled with your content.",
            "imageName":"rectangle.stack.fill.badge.plus"
         },
         {
            "accentColor":"5E5CE6",
            "title":"Highly Customizable",
            "content":"Set accent colors, add optional buttons, disable dismiss gestures, perform actions after button taps or sheet dismissal and more!",
            "imageName":"gears"
         },
         {
            "accentColor":"30D158",
            "title":"Works out of the box",
            "content":"Don't worry about different screen sizes. Your Welcome Sheet will look gorgeous on every iOS device!",
            "imageName":"ipad.and.iphone"
         }
      ],
      "optionalButtonTitle":"About Welcome Sheet...",
      "mainButtonTitle":"Continue"
   }
]

注意： imageName 可以存储资源目录图像名称或 SF Symbol 名称。

UIKit Storyboards 支持

你无需编写一行代码即可配置你的欢迎页。

有关如何通过 storyboards 进行配置的逐步指南，请参阅文档

安装

使用 Swift Package Manager

.package(url: "https://github.com/MAJKFL/Welcome-Sheet", from: "0.1.1"),

示例

import SwiftUI
import WelcomeSheet

struct ContentView: View {
    @State private var showSheet = false
    
    let pages = [
        WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
            WelcomeSheetPageRow(imageSystemName: "rectangle.stack.fill.badge.plus",
                                accentColor: Color.mint,
                                title: "Quick Creation",
                                content: "It's incredibly intuitive. Simply declare an array of pages filled with content."),
            
            WelcomeSheetPageRow(imageSystemName: "slider.horizontal.3",
                                accentColor: Color.indigo,
                                title: "Highly Customisable", content: "Match sheet's appearance to your app, link buttons, perform actions after dismissal."),
            
            WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone",
                                accentColor: Color.green,
                                title: "Works out of the box",
                                content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
        ], accentColor: Color.purple, optionalButtonTitle: "About Welcome Sheet...", optionalButtonURL: URL(string: "https://github.com/MAJKFL/Welcome-Sheet")),
        
        WelcomeSheetPage(title: "What's New in Translate", rows: [
            WelcomeSheetPageRow(imageSystemName: "platter.2.filled.iphone",
                                title: "Conversation Views",
                                content: "Choose a side-by-side or face-to-face conversation view."),
            
            WelcomeSheetPageRow(imageSystemName: "mic.badge.plus",
                                title: "Auto Translate",
                                content: "Respond in conversations without tapping the microphone button."),
            
            WelcomeSheetPageRow(imageSystemName: "iphone",
                                title: "System-Wide Translation",
                                content: "Translate selected text anywhere on your iPhone.")
        ], mainButtonTitle: "Wassup?")
    ]
    
    var body: some View {
        Button("Show sheet") {
            showSheet.toggle()
        }
        .welcomeSheet(isPresented: $showSheet, onDismiss: { print("Sheet dismissed") }, isSlideToDismissDisabled: true, pages: pages)
    }
}