-
Découvrez PaperKit
Découvrez comment intégrer PaperKit à vos apps iOS, iPadOS, macOS et visionOS. Nous verrons comment intégrer de manière transparente le dessin PencilKit avec des fonctionnalités de balisage telles que des formes et des images, et comment personnaliser l'interface utilisateur. Découvrez les bonnes pratiques en matière de compatibilité ascendante et découvrez des options de personnalisation avancées pour créer des expériences de balisage vraiment uniques dans vos apps.
Chapitres
- 0:00 - Introduction
- 1:36 - Apprendre à connaître PaperKit
- 3:35 - Débuter avec PaperKit
- 8:37 - Personnalisation de l’ensemble des fonctionnalités
Ressources
Vidéos connexes
WWDC24
WWDC20
-
Rechercher dans cette vidéo…
-
-
3:47 - Adopt PaperKit in iOS
// Adopt PaperKit in iOS override func viewDidLoad() { super.viewDidLoad() let markupModel = PaperMarkup(bounds: view.bounds) let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest) view.addSubview(paperViewController.view) addChild(paperViewController) paperViewController.didMove(toParent: self) becomeFirstResponder() let toolPicker = PKToolPicker() toolPicker.addObserver(paperViewController) pencilKitResponderState.activeToolPicker = toolPicker pencilKitResponderState.toolPickerVisibility = .visible toolPicker.accessoryItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(plusButtonPressed(_:))) } @objc func plusButtonPressed(_ button: UIBarButtonItem) { let markupEditViewController = MarkupEditViewController(supportedFeatureSet: .latest) markupEditViewController.delegate = paperViewController markupEditViewController.modalPresentationStyle = .popover markupEditViewController.popoverPresentationController?.barButtonItem = button present(markupEditViewController, animated: true) } -
6:11 - Adopt PaperKit in macOS
// Adopt PaperKit in macOS override func viewDidLoad() { super.viewDidLoad() let markupModel = PaperMarkup(bounds: view.bounds) let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest) view.addSubview(paperViewController.view) addChild(paperViewController) // Create toolbar for macOS let toolbarViewController = MarkupToolbarViewController(supportedFeatureSet: .latest) toolbarViewController.delegate = paperViewController view.addSubview(toolbarViewController.view) // Set layout setupLayoutConstraints() } -
7:18 - Auto-save markup changes
// Auto-save markup changes func paperMarkupViewControllerDidChangeMarkup(_ paperMarkupViewController: PaperMarkupViewController) { let markupModel = paperMarkupViewController.markup Task { // Create a data blob and save it let data = try await markupModel.dataRepresentation() try data.write(toFile: paperKitDataURL) } } -
8:02 - Thumbnail for forward compatibility
// Thumbnail for forward compatibility func updateThumbnail(_ markupModel: PaperMarkup) async throws { // Set up CGContext to render thumbnail in let thumbnailSize = CGSize(width: 200, height: 200) let context = makeCGContext(size: thumbnailSize) context.setFillColor(gray: 1, alpha: 1) context.fill(renderer.format.bounds) // Render the PaperKit markup await markupModel.draw(in: context, frame: CGRect(origin: .zero, size: thumbnailSize)) thumbnail = context.makeImage() } -
9:02 - Customized markup FeatureSet
// Customized markup FeatureSet var featureSet: FeatureSet = .latest featureSet.remove(.text) featureSet.insert(.stickers) // HDR support featureSet.colorMaximumLinearExposure = 4 toolPicker.colorMaximumLinearExposure = 4 let paperViewController = PaperMarkupViewController(supportedFeatureSet: featureSet) let markupEditViewController = MarkupEditViewController(supportedFeatureSet: featureSet) -
10:50 - Custom background on markup controller
// Custom background on markup controller let template = UIImage(named: "MyTemplate.jpg") let templateView = UIImageView(image: template) paperViewController.contentView = templateView
-
-
- 0:00 - Introduction
Grâce à PaperKit, vous pouvez créer des expériences de balisage riches dans diverses apps iOS et macOS, notamment Notes, Captures d’écran, QuickLook et l’app Journal. Le framework fournit un canevas sur lequel il est possible de dessiner et d’ajouter des formes, des images, des champs de saisie de texte, etc. PaperKit simplifie l’intégration de fonctionnalités de balisage dans n’importe quelle app, offrant ainsi une expérience utilisateur fluide.
- 1:36 - Apprendre à connaître PaperKit
L’app prise en exemple est un outil de gestion de recettes qui permet aux utilisateurs de créer, mettre à jour et annoter des recettes à l’aide de balises. L’app comprend un contrôleur de balisage, un conteneur de modèle de données et un menu ou une barre d’outils d’insertion (selon le système d’exploitation) pour faciliter l’annotation. La démo présente ces fonctionnalités avec l’ajout d’une image, la mise en évidence des ingrédients et l’évaluation d’une recette traditionnelle de biscuits roumains.
- 3:35 - Débuter avec PaperKit
Pour intégrer PaperKit dans une app iOS, créez une sous-classe UIViewController et initialisez un conteneur de modèle de données de balisage et un contrôleur. Ensuite, configurez un sélecteur d’outils PencilKit et un contrôleur de menu d’insertion qui s’affichera sous forme de fenêtre contextuelle lorsqu’il sera déclenché par un bouton accessoire. Vous pouvez également intégrer PaperKit de manière transparente dans un environnement SwiftUI. Le contrôleur de balisage comprend un délégué pour la gestion personnalisée des rappels et est conforme à Observable pour la gestion de l’état. Lorsque vous chargez des données à partir d’un disque, il est essentiel de vérifier la version du contenu pour garantir la compatibilité ascendante. PaperKit fournit des outils permettant de générer des miniatures pour le pré-rendu, en cas d’incompatibilité entre les versions.
- 8:37 - Personnalisation de l’ensemble des fonctionnalités
Le FeatureSet de PaperKit définit les fonctionnalités de balisage disponibles dans une app. Vous pouvez commencer par FeatureSet.latest pour inclure toutes les dernières fonctionnalités. Pour personnaliser l’app, vous pouvez supprimer ou insérer des outils et des interactions à l’aide des fonctions fournies. Pour activer la prise en charge HDR, définissez la propriété colorMaximumLinearExposure sur une valeur supérieure à 1, qui effectue une conversion tonale vers la plage HDR prise en charge par l’appareil. Cela améliore la qualité visuelle du balisage, en particulier lorsque vous utilisez de nouveaux outils tels que l’outil de calligraphie introduit dans PencilKit. Vous pouvez également personnaliser le contentView du contrôleur de balisage afin d’afficher n’importe quelle UIView, par exemple un modèle, et offrir ainsi un arrière-plan cohérent pour le balisage et le dessin.