Ramotion / paper-onboarding

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion
https://www.ramotion.com/agency/app-development/
MIT License
3.33k stars 339 forks source link

support swiftUI #126

Open xakacuk opened 4 years ago

xakacuk commented 4 years ago

i can use in swiftUI? if yes, so how?

igork-ramotion commented 4 years ago

@xakacuk hey!) this library is currently not support swiftUI. You can try to wrap it in UIViewControllerRepresentable

igork-ramotion commented 4 years ago

I'll leave it as enhancement for future, hope sometime we will have time to make it :)

starkdmi commented 4 years ago
import SwiftUI
import UIKit
import Foundation
import paper_onboarding // https://github.com/Ramotion/paper-onboarding

final class PaperOnboardingUIKit: NSObject, UIViewControllerRepresentable {
    typealias UIViewControllerType = UIViewController

    var items: [OnboardingItemInfo]
    init(_ items: [OnboardingItemInfo]) {
        self.items = items
    }

    func makeUIViewController(context: Context) -> UIViewController {
        let controller = UIViewController()

        // Init PaperOnboarding
        let onboarding = PaperOnboarding()
        onboarding.delegate = self
        onboarding.dataSource = self
        onboarding.translatesAutoresizingMaskIntoConstraints = false

        controller.view.addSubview(onboarding)

        // Add constraints
        for attribute: NSLayoutConstraint.Attribute in [.left, .right, .top, .bottom] {
            let constraint = NSLayoutConstraint(item: onboarding, attribute: attribute, relatedBy: .equal, toItem: controller.view, attribute: attribute, multiplier: 1, constant: 0)
            controller.view.addConstraint(constraint)
        }

        return controller
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {

    }
}

extension PaperOnboardingUIKit: PaperOnboardingDataSource, PaperOnboardingDelegate {
    func onboardingItem(at index: Int) -> OnboardingItemInfo {
        items[index]
    }

    func onboardingItemsCount() -> Int {
        return items.count
    }

    func onboardingWillTransitonToIndex(_ index: Int) {
        // Transition Delegate
    }

    // Item Customization
    @objc(onboardingConfigurationItem:index:) func onboardingConfigurationItem(_ item: OnboardingContentViewItem, index: Int) {
        // Setup Labels
        //item.titleLabel?.textColor = .white
        //item.descriptionLabel?.textColor = .white

        // Rounded Image
        //item.imageView?.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        //item.imageView?.layer.cornerRadius = 100
        //item.imageView?.layer.masksToBounds = true
        //item.imageView?.contentMode = .scaleToFill
    }

    /* Bottom Icon Customization
     func onboardingPageItemColor(at index: Int) -> UIColor { }
     func onboardinPageItemRadius() -> CGFloat { }
     func onboardingPageItemSelectedRadius() -> CGFloat { }
     */
}

struct PaperOnboardingSwiftUI: View {
    static let titleFont = UIFont.boldSystemFont(ofSize: 36.0)
    static let descriptionFont = UIFont.systemFont(ofSize: 14.0)

    let items = [
        OnboardingItemInfo(informationImage: UIImage(named: "image1")!,
                           title: "Title 1",
                           description: "Description 1",
                           pageIcon: UIImage(named: "icon1")!,
                           color: .systemBlue,
                           titleColor: .white,
                           descriptionColor: .white,
                           titleFont: titleFont,
                           descriptionFont: descriptionFont),

        OnboardingItemInfo(informationImage: UIImage(named: "image2")!,
                           title: "Title 2",
                           description: "Description 2",
                           pageIcon: UIImage(named: "icon2")!,
                           color: .systemGreen,
                           titleColor: .white,
                           descriptionColor: .white,
                           titleFont: titleFont,
                           descriptionFont: descriptionFont),

        OnboardingItemInfo(informationImage: UIImage(named: "image3")!,
                           title: "Title 3",
                           description: "Description 3",
                           pageIcon: UIImage(named: "icon3")!,
                           color: .systemRed,
                           titleColor: .white,
                           descriptionColor: .white,
                           titleFont: titleFont,
                           descriptionFont: descriptionFont),
    ]

    var body: some View {
        PaperOnboardingUIKit(items).edgesIgnoringSafeArea(.all)
    }
}

struct PaperOnboardingSwiftUI_Previews: PreviewProvider {
    static var previews: some View {
        PaperOnboardingSwiftUI().previewDevice(PreviewDevice(rawValue: "iPhone XS"))
    }
}