-
Conoce PaperKit
Descubre cómo incorporar PaperKit en tus apps de iOS, iPadOS, macOS y visionOS. Hablaremos sobre cómo integrar dibujos de PencilKit en funcionalidades de marcado como formas e imágenes, y cómo personalizar la interfaz de usuario. Conoce las prácticas recomendadas sobre la compatibilidad del futuro y descubre opciones de personalización para crear experiencias de marcado únicas en tus apps.
Capítulos
- 0:00 - Introducción
- 1:36 - Conoce PaperKit
- 3:35 - Primeros pasos con PaperKit
- 8:37 - Personalización del conjunto de funcionalidades
Recursos
Videos relacionados
WWDC24
WWDC20
-
Buscar este video…
-
-
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 - Introducción
Con PaperKit, puedes crear experiencias de marcado enriquecidas en varias apps de iOS y macOS, incluidas Notas, Capturas de pantalla, QuickLook y la app Diario. La estructura proporciona un lienzo para dibujar y agregar formas, imágenes, campos de entrada de texto y más. PaperKit simplifica la integración de la funcionalidad de marcado en cualquier app, ofreciendo una experiencia de usuario perfecta.
- 1:36 - Conoce PaperKit
La app de ejemplo es una herramienta de gestión de recetas que permite a las personas crear, actualizar y anotar recetas utilizando marcado. La app incluye un controlador de marcado, un contenedor de modelo de datos y un menú de inserción o barra de herramientas (según el sistema operativo) para realizar anotaciones fácilmente. La demostración muestra estas funciones agregando una imagen, resaltando los ingredientes y calificando una receta de galletas tradicionales rumanas.
- 3:35 - Primeros pasos con PaperKit
Para integrar PaperKit en una app iOS, subclase 'UIViewController' e inicialice un contenedor y un controlador de modelo de datos de marcado. Luego, configura un selector de herramientas PencilKit y configura un controlador de menú de inserción para que se muestre como una ventana emergente cuando se activa mediante un elemento accesorio de botón. También, puedes integrar PaperKit perfectamente en un entorno SwiftUI. El controlador de marcado incluye un delegado para el manejo personalizado de devoluciones de llamadas y se ajusta a 'Observable' para la gestión del estado. Cuando cargues datos desde el disco, es fundamental verificar siempre la versión del contenido para garantizar la compatibilidad con versiones posteriores. PaperKit proporciona herramientas para generar miniaturas para la renderización previa, en caso de que no haya coincidencias de versiones.
- 8:37 - Personalización del conjunto de funcionalidades
'FeatureSet' de PaperKit define la funcionalidad de marcado disponible en una app. Puede comenzar con 'FeatureSet.latest' para incluir todas las funciones más recientes. Para personalizar la app, puedes eliminar o insertar herramientas e interacciones utilizando las funciones proporcionadas. Para habilitar la compatibilidad con HDR, configure la propiedad 'colorMaximumLinearExposure' en un valor mayor que 1, que asigna tonos al margen HDR admitido por el dispositivo. Al hacerlo se mejora la calidad visual del marcado, especialmente cuando se utilizan herramientas nuevas como la herramienta de caña de caligrafía introducida en PencilKit. También puede personalizar el 'contentView' del controlador de marcado para mostrar cualquier 'UIView', como una plantilla, proporcionando un fondo consistente para el marcado y el dibujo.