Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi; Parte 1

March 3|0 Vistas|

Resumen: Si eres nuevo aquí, tal vez quieras suscribirte a mi feed RSS o seguirme en Twitter. ¡Gracias por su visita! Esta es una entrada en el blog de Too Abayomi, un desarrollador de iOS y fundador de App Design Vault, su fuente para el diseño de aplicacion

Advertisement

Si eres nuevo aquí, tal vez quieras suscribirte a mi feed RSS o seguirme en Twitter. ¡Gracias por su visita!

Esta es una entrada en el blog de Too Abayomi, un desarrollador de iOS y fundador de App Design Vault, su fuente para el diseño de aplicaciones para iPhone.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Aprenda a crear un PDF mediante programación!

A veces, en las aplicaciones, es posible que desee generar un PDF con datos de la aplicación para sus usuarios. Por ejemplo, imagina que tenías una aplicación que permitía a los usuarios firmar un contrato; querrías que los usuarios pudieran obtener un PDF con el resultado final.

Pero, ¿cómo generar un PDF mediante programación? Bueno, es fácil de hacer en iOS con la ayuda de Quartz2D!

En esta serie de tutoriales, obtendrá experiencia práctica con la creación de un PDF simple con Quartz2D. El PDF que haremos será para una aplicación de facturación, como se puede ver en la captura de pantalla.

Este tutorial supone que está familiarizado con las nuevas funciones básicas de iOS 5, como Storyboards y ARC. Si eres nuevo en iOS 5, echa un vistazo a algunos de los otros tutoriales de iOS 5 en este sitio primero.

Empezando

Ejecute Xcode y cree un nuevo proyecto con la plantilla de aplicación iOS \ Application \ Single View. Escriba PDFRenderer para el nombre del proyecto, elija iPhone para la familia de dispositivos, asegúrese de que Use Storyboard y Use Automatic Reference Counting estén marcados y finalice la creación del proyecto.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Vamos a usar dos pantallas en este proyecto. La primera simplemente tendrá un botón que mostrará el PDF cuando se pulsa. La segunda pantalla será el propio PDF.

Seleccione el archivo MainStoryboard.storyboard. En la ventana principal, verá un controlador de visualización. Necesitamos que este Controlador de Vista sea incorporado en un Controlador de Navegación para empezar, así que haga clic en el Menú del Editor, luego seleccione Controlador de Incorporación / Navegación.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

El Controlador de Vista tiene ahora una secuencia desde el Controlador de Navegación.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Ahora arrastre un UIButton desde la pestaña de objetos hasta el controlador de vista y cambie el nombre de la etiqueta "Dibujar PDF".

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Si ejecuta la aplicación, debería ver una vista sencilla con un botón que muestra "Dibujar PDF", pero no hace nada cuando se pulsa. Nos ocuparemos de eso en breve.

Ahora vamos a agregar la segunda vista que contendrá el PDF.

Arrastre un nuevo controlador de vista desde la pestaña de objetos hasta el Storyboard. Ctrl + Arrastre el botón "Dibujar PDF" en el nuevo Controlador de vistas. Cuando suelte el mouse, debería ver un popup similar al que aparece en la imagen de abajo.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Seleccione la opción Empujar. Esto creará un segue en el nuevo View Controller para que se muestre cuando se pulsa el botón. En otras palabras, ¡nuestro botón es ahora funcional!

Ejecute la aplicación, puntee en el botón y verá un controlador de vista vacío en la pantalla. Regla de guiones gráficos

Creación de PDF y texto de dibujo

Ahora que tenemos el marco para nuestro PDF, estamos listos para escribir algún código.

Antes de hacerlo, seleccione File \ New \ New File para agregar un nuevo archivo al proyecto. Elija la plantilla de subclase iOS \ Cocoa Touch \ UIViewController, ingrese PDFViewController para la Clase y UIViewController para la Subclase, asegúrese de que "Con XIB para la interfaz de usuario" NO esté marcada y finalice la creación del archivo. No necesitamos un plumín porque usaremos el View Controller creado en el storyboard.

Conecte el último controlador de vista que creamos a este nuevo archivo seleccionando View Controller en el Storyboard y cambiando la clase a PDFViewController en el inspector de identidad.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Para dibujar un poco de texto en nuestro PDF, vamos a tener que usar el marco de texto básico. Para ello, seleccione el destino de PDFRenderer y vaya a la pestaña Fases de construcción. Haga clic en el signo + debajo de la opción Vincular binarios con bibliotecas y, a continuación, seleccione el marco de CoreText.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

A continuación, abra PDFViewController.h e importe el encabezado de CoreText:

  #import <CoreText / CoreText.h> 

Aceptar el tiempo para el código! Agregue un nuevo método a PDFViewController.m para crear un "mundo hola" PDF. Este es un método largo, pero no te preocupes - lo explicaremos poco a poco después.

  - (void) drawText {NSString * fileName = @ "Invoice.PDF";  NSArray * arrayPaths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);  NSString * path = [arrayPaths objectAtIndex: 0];  NSString * pdfFileName = [path stringByAppendingPathComponent: fileName];  NSString * textToDraw = @ "Hola Mundo";  CFStringRef stringRef = (__bridge CFStringRef) textToDraw;  // Preparar el texto usando un marco de texto de núcleo.  CFAttributedStringRef currentText = CFAttributedStringCreate (NULL, stringRef, NULL);  CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString (currentText);  CGRect frameRect = CGRectMake (0, 0, 300, 50);  CGMutablePathRef framePath = CGPathCreateMutable ();  CGPathAddRect (framePath, NULL, frameRect);  // Obtiene el marco que hará el renderizado.  CFRange currentRange = CFRangeMake (0, 0);  CTFrameRef frameRef = CTFramesetterCreateFrame (framesetter, currentRange, framePath, NULL);  CGPathRelease (framePath);  // Crear el contexto PDF utilizando el tamaño de página predeterminado de 612 x 792. UIGraphicsBeginPDFContextToFile (pdfFileName, CGRectZero, nil);  // Marcar el comienzo de una nueva página.  UIGraphicsBeginPDFPageWithInfo (CGRectMake (0, 0, 612, 792), nil);  // Obtener el contexto de gráficos.  CGContextRef currentContext = UIGraphicsGetCurrentContext ();  // Poner la matriz de texto en un estado conocido.  Esto asegura // que no se dejen en su lugar factores de escala antiguos.  CGContextSetTextMatrix (currentContext, CGAffineTransformIdentity);  // Core Text dibuja desde la esquina inferior izquierda, por lo que flip // la transformación actual antes de dibujar.  CGContextTranslateCTM (currentContext, 0, 100);  CGContextScaleCTM (currentContext, 1.0, -1.0);  // Dibuja el marco.  CTFrameDraw (frameRef, currentContext);  CFRelease (frameRef);  CFRelease (stringRef);  CFRelease (fotogramas);  // Cierra el contexto de PDF y escribe el contenido.  UIGraphicsEndPDFContext ();  } 

Las primeras seis líneas crean un nombre de archivo PDF para un archivo que residirá en la carpeta Documentos. El archivo se llamará Invoice.pdf.

  NSString * fileName = @ "Invoice.PDF";  NSArray * arrayPaths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);  NSString * path = [arrayPaths objectAtIndex: 0];  NSString * pdfFileName = [path stringByAppendingPathComponent: fileName]; 

El siguiente bloque de código crea una cadena de "Hello world" que dibujaremos en el PDF. También convierte la cadena a su contraparte CoreGraphics, CFStringRef.

  NSString * textToDraw = @ "Hola Mundo";  CFStringRef stringRef = (__bridge CFStringRef) textToDraw;  // Preparar el texto usando un marco de texto de núcleo.  CFAttributedStringRef currentText = CFAttributedStringCreate (NULL, stringRef, NULL);  CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString (currentText); 

Ahora creamos un CGRect que define el marco donde se dibujará el texto.

  CGRect frameRect = CGRectMake (0, 0, 300, 50);  CGMutablePathRef framePath = CGPathCreateMutable ();  CGPathAddRect (framePath, NULL, frameRect);  // Obtiene el marco que hará el renderizado.  CFRange currentRange = CFRangeMake (0, 0);  CTFrameRef frameRef = CTFramesetterCreateFrame (framesetter, currentRange, framePath, NULL);  CGPathRelease (framePath); 

A continuación creamos un contexto PDF y marcamos el comienzo de una página PDF. Cada página del PDF tiene que comenzar con una llamada a UIGraphicsBeginPDFPageWithInfo.

  // Crear el contexto PDF utilizando el tamaño de página predeterminado de 612 x 792. UIGraphicsBeginPDFContextToFile (pdfFileName, CGRectZero, nil);  // Marcar el comienzo de una nueva página.  UIGraphicsBeginPDFPageWithInfo (CGRectMake (0, 0, 612, 792), nil);  // Obtener el contexto de gráficos.  CGContextRef currentContext = UIGraphicsGetCurrentContext (); 

Las coordenadas de los dibujos de Core Graphics comienzan desde la esquina inferior izquierda, mientras que las coordenadas globales de UIKit comienzan desde la esquina superior izquierda. Necesitamos cambiar el contexto antes de empezar a dibujar.

  // Poner la matriz de texto en un estado conocido.  Esto asegura // que no se dejen en su lugar factores de escala antiguos.  CGContextSetTextMatrix (currentContext, CGAffineTransformIdentity);  // Core Text dibuja desde la esquina inferior izquierda, por lo que flip // la transformación actual antes de dibujar.  CGContextTranslateCTM (currentContext, 0, 100);  CGContextScaleCTM (currentContext, 1,0, -1,0); 

A continuación, dibujamos el marco real con el texto, liberamos todos los objetos de Core Graphics y cerramos el contexto de PDF (escribiendo el PDF al disco).

  // Dibuja el marco.  CTFrameDraw (frameRef, currentContext);  CFRelease (frameRef);  CFRelease (stringRef);  CFRelease (fotogramas);  // Cierra el contexto de PDF y escribe el contenido.  UIGraphicsEndPDFContext (); 

Si está interesado en aprender más acerca de cómo funciona Core Text y algunas cosas más interesantes que puede hacer con él, consulte nuestro tutorial de Core Text.

Agregar un UIWebView para mostrar el archivo PDF

Lo único que queda por hacer es mostrar nuestro archivo PDF en la pantalla. Para ello, agregue el siguiente método a PDFViewController.m, que agrega un UIWebView al controlador de vista y muestra la ruta del archivo PDF que acabamos de crear.

  - (void) showPDFFile {NSString * fileName = @ "Invoice.PDF";  NSArray * arrayPaths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);  NSString * path = [arrayPaths objectAtIndex: 0];  NSString * pdfFileName = [path stringByAppendingPathComponent: fileName];  UIWebView * webView = [[UIWebView alloc] initWithFrame: CGRectMake (0, 0, 320, 480)];  NSURL * url = [NSURL fileURLWithPath: pdfFileName];  NSURLRequest * request = [NSURLRequest requestWithURL: url];  [WebView setScalesPageToFit: SÍ];  [WebView loadRequest: request];  [Self.view addSubview: webView];  } 

A continuación, agregue la implementación de viewDidLoad para llamar a estos nuevos métodos:

  - (void) viewDidLoad {[self drawText];  [Auto showPDFFile];  [Super viewDidLoad];  } 

Ahora estamos listos para ver algunos resultados! Construye y ejecuta el proyecto, y deberías ver "Hello World" en la pantalla cuando realices el zoom!

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Un proceso de refactorización rápida

Nuestro código de dibujo no pertenece realmente al View Controller, así que vamos a cultivar eso en un nuevo NSObject llamado PDFRenderer. Cree un archivo nuevo con la plantilla de la clase Objectivity-C de iOS \ Cocoa Touch, introduzca PDFRenderer para la clase y NSObject para la subclase y finalice la creación del archivo.

Abra PDFRenderer.h e importe Core Text en la parte superior del archivo:

  #import CoreText / CoreText.h 

A continuación, mueva el método drawText de PDFViewController.m a PDFRenderer.m.

Vamos a pasar el nombre de archivo en el nuevo método drawText, así que vamos a crear un nuevo método en el archivo PDFViewController.m llamado getPDFFileName.

  - (NSString *) getPDFFileName {NSString * fileName = @ "Invoice.PDF";  NSArray * arrayPaths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);  NSString * path = [arrayPaths objectAtIndex: 0];  NSString * pdfFileName = [path stringByAppendingPathComponent: fileName];  Return pdfFileName;  } 

A continuación, abra PDFRenderer.m y quite este mismo bloque de código del método drawText y modifique la firma de método para tomar el nombre de archivo como un parámetro y convertirlo en un método estático:

  + (Void) drawText: (NSString *) pdfFileName 

También predeclare este método en PDFRenderer.h.

A continuación, importe PDFRenderer en la parte superior de PDFViewController.m:

  #import "PDFRenderer.h" 

Y modificar viewDidLoad para llamar a esta nueva clase y método:

  - (void) viewDidLoad {NSString * fileName = [auto getPDFFileName];  [PDFRenderer drawText: fileName];  [Auto showPDFFile];  [Super viewDidLoad];  } 

Construir y ejecutar el proyecto. Nuestra rápida refactorización no debería haber causado que la aplicación se comportara de manera diferente, pero el código está mejor organizado.

Dibujo de una línea con el Cuarzo 2D

La factura con la que queremos acabar se compone de texto, líneas e imágenes. Tenemos texto, ahora es el momento de practicar dibujar una línea. Para hacer eso, vamos a usar ... esperarlo ... el método drawLine!

Agregue este nuevo método a PDFRenderer.m:

  + (Void) drawLineFromPoint: (CGPoint) desde toPoint: (CGPoint) a {CGContextRef context = UIGraphicsGetCurrentContext ();  CGContextSetLineWidth (contexto, 2.0);  CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB ();  Componentes CGFloat [] = {0,2, 0,2, 0,2, 0,3};  CGColorRef color = CGColorCreate (color, componentes);  CGContextSetStrokeColorWithColor (contexto, color);  CGContextMoveToPoint (context, from.x, from.y);  CGContextAddLineToPoint (contexto, to.x, to.y);  CGContextStrokePath (contexto);  CGColorSpaceRelease (espacio de colores);  CGColorRelease (color);  } 

El código anterior establece las propiedades de la línea que queremos dibujar. Las propiedades son el espesor de la línea (2.0) y el color (gris transparente). Luego dibuja la línea entre los CGPoints pasados ​​en el método.

Podríamos ahora llamar a este método desde nuestro View Controller. Observe, sin embargo, que el método drawText no crea un nuevo contexto de PDF Graphics o una nueva página llamando a UIGraphicsBeginPDFContextToFile. Así que tenemos que hacer algunas modificaciones.

Primero, cree un nuevo método en el archivo PDFRenderer llamado drawPDF.

  + (Void) drawPDF: (NSString *) fileName {// Crear el contexto PDF usando el tamaño de página predeterminado de 612 x 792. UIGraphicsBeginPDFContextToFile (fileName, CGRectZero, nil);  // Marcar el comienzo de una nueva página.  UIGraphicsBeginPDFPageWithInfo (CGRectMake (0, 0, 612, 792), nil);  CGPoint de = CGPointMake (0, 0);  CGPoint to = CGPointMake (200, 300);  [PDFRenderer drawLineFromPoint: de toPoint: a];  [Self drawText];  // Cierra el contexto de PDF y escribe el contenido.  UIGraphicsEndPDFContext ();  } 

Esto creará nuestro contexto de gráficos, dibujará el texto y una línea de prueba y, a continuación, finalizará el contexto.

Tenga en cuenta que el método drawText ya no toma el nombre de archivo PDF como un parámetro. Aquí está nuestro nuevo método drawText.

  + (Void) drawText {NSString * textToDraw = @ "Hola Mundo";  CFStringRef stringRef = (__bridge CFStringRef) textToDraw;  // Preparar el texto utilizando un formador de texto básico CFAttributedStringRef currentText = CFAttributedStringCreate (NULL, stringRef, NULL);  CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString (currentText);  CGRect frameRect = CGRectMake (0, 0, 300, 50);  CGMutablePathRef framePath = CGPathCreateMutable ();  CGPathAddRect (framePath, NULL, frameRect);  // Obtiene el marco que hará el renderizado.  CFRange currentRange = CFRangeMake (0, 0);  CTFrameRef frameRef = CTFramesetterCreateFrame (framesetter, currentRange, framePath, NULL);  CGPathRelease (framePath);  // Obtener el contexto de gráficos.  CGContextRef currentContext = UIGraphicsGetCurrentContext ();  // Poner la matriz de texto en un estado conocido.  Esto asegura // que no se dejen en su lugar factores de escala antiguos.  CGContextSetTextMatrix (currentContext, CGAffineTransformIdentity);  // Core Text dibuja desde la esquina inferior izquierda, por lo que flip // la transformación actual antes de dibujar.  CGContextTranslateCTM (currentContext, 0, 100);  CGContextScaleCTM (currentContext, 1.0, -1.0);  // Dibuja el marco.  CTFrameDraw (frameRef, currentContext);  CFRelease (frameRef);  CFRelease (stringRef);  CFRelease (fotogramas);  } 

Agregue la predeclaración para drawPDF en PDFRenderer.h. A continuación, modifique el controlador de vista para llamar al método correcto en viewDidLoad, que es drawPDF en lugar de drawText.

¡Eso es! Construye y ejecuta la aplicación, deberías ver tanto "Hello World" como una línea diagonal, similar a la imagen de abajo.

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Sí, eso es gracioso. Y no, esto no es "Cómo dibujar arte abstracto con cuarzo 2D." No se preocupe, nuestro PDF logrará un poco de pulimento en la segunda parte del tutorial! :]

¿A dónde ir desde aquí?

Aquí hay un proyecto de ejemplo con todo el código del tutorial anterior.

Esto nos lleva al final de la primera parte de este tutorial. En la segunda parte, entraremos en técnicas de dibujo más avanzadas, como agregar imágenes y usar un archivo xib para facilitar el proceso de diseño.

Si tiene alguna pregunta o comentario sobre lo que hemos hecho hasta ahora, ¡únase a la discusión del foro a continuación!

Cómo crear un PDF con Cuarzo 2D en iOS 5 && num; 8211 & semi;  Parte 1

Esta es una entrada del blog del miembro del equipo de Tutorial de iOS, Tope Abayomi, un desarrollador de iOS con una pasión por aplicaciones fáciles de usar, útiles y estéticamente agradables. Éstos son algunos de sus videos y le enseña a diseñar una aplicación con un diseño personalizado.

Etiqueta:

Artículos relacionados

Popular

Último